CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 20:41:03 +12:00
Code Issues Projects Releases Wiki Activity

Add transitions to data UI tables to improve smoothness and prevent stuttering and flashing on loading

Browse source
This commit is contained in:
Andrew Kingston 2021-09-29 10:33:55 +01:00
parent ac635b34f6
commit 824d8ac81a
2 changed files with 33 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
packages/builder/src/components/backend/DataTable/DataTable.svelte
View file

@ -1,4 +1,5 @@
<script>
import { fade } from "svelte/transition"
import { tables } from "stores/backend"
import CreateRowButton from "./buttons/CreateRowButton.svelte"
import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
@ -88,15 +89,19 @@
{/key}
{/if}
</Table>
<div class="pagination">
<Pagination
page={$search.pageNumber + 1}
hasPrevPage={$search.hasPrevPage}
hasNextPage={$search.hasNextPage}
goToPrevPage={$search.loading ? null : search.prevPage}
goToNextPage={$search.loading ? null : search.nextPage}
/>
</div>
{#key id}
<div in:fade={{ delay: 200, duration: 100 }}>
<div class="pagination">
<Pagination
page={$search.pageNumber + 1}
hasPrevPage={$search.hasPrevPage}
hasNextPage={$search.hasNextPage}
goToPrevPage={$search.loading ? null : search.prevPage}
goToNextPage={$search.loading ? null : search.nextPage}
/>
</div>
</div>
{/key}
</div>
<style>

36
packages/builder/src/components/backend/DataTable/Table.svelte
View file

@ -118,23 +118,25 @@
</div>
</div>
{#key tableId}
<Table
{data}
{schema}
{loading}
{customRenderers}
{rowCount}
{disableSorting}
bind:selectedRows
allowSelectRows={allowEditing && !isUsersTable}
allowEditRows={allowEditing}
allowEditColumns={allowEditing && isInternal}
showAutoColumns={!hideAutocolumns}
on:editcolumn={e => editColumn(e.detail)}
on:editrow={e => editRow(e.detail)}
on:clickrelationship={e => selectRelationship(e.detail)}
on:sort
/>
<div in:fade={{ delay: 200, duration: 100 }}>
<Table
{data}
{schema}
{loading}
{customRenderers}
{rowCount}
{disableSorting}
bind:selectedRows
allowSelectRows={allowEditing && !isUsersTable}
allowEditRows={allowEditing}
allowEditColumns={allowEditing && isInternal}
showAutoColumns={!hideAutocolumns}
on:editcolumn={e => editColumn(e.detail)}
on:editrow={e => editRow(e.detail)}
on:clickrelationship={e => selectRelationship(e.detail)}
on:sort
/>
</div>
{/key}
</Layout>