CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-03 21:40:55 +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> <script>
import { fade } from "svelte/transition"
import { tables } from "stores/backend" import { tables } from "stores/backend"
import CreateRowButton from "./buttons/CreateRowButton.svelte" import CreateRowButton from "./buttons/CreateRowButton.svelte"
import CreateColumnButton from "./buttons/CreateColumnButton.svelte" import CreateColumnButton from "./buttons/CreateColumnButton.svelte"
@ -88,15 +89,19 @@
{/key} {/key}
{/if} {/if}
</Table> </Table>
<div class="pagination"> {#key id}
<Pagination <div in:fade={{ delay: 200, duration: 100 }}>
page={$search.pageNumber + 1} <div class="pagination">
hasPrevPage={$search.hasPrevPage} <Pagination
hasNextPage={$search.hasNextPage} page={$search.pageNumber + 1}
goToPrevPage={$search.loading ? null : search.prevPage} hasPrevPage={$search.hasPrevPage}
goToNextPage={$search.loading ? null : search.nextPage} hasNextPage={$search.hasNextPage}
/> goToPrevPage={$search.loading ? null : search.prevPage}
</div> goToNextPage={$search.loading ? null : search.nextPage}
/>
</div>
</div>
{/key}
</div> </div>
<style> <style>

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

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