feat: add table scroll component

src/lib/elements/table/index.ts

@@ -1,4 +1,5 @@
 export { default as Table } from './table.svelte';
+export { default as TableScroll } from './tableScroll.svelte';
 export { default as TableBody } from './body.svelte';
 export { default as TableHeader } from './header.svelte';
 export { default as TableFooter } from './footer.svelte';

src/lib/elements/table/table.svelte

@@ -1,7 +1,3 @@
-<script>
-    export let sticky = false;
-</script>
-
-<div class:is-sticky-scroll={sticky} class="table is-vertical u-margin-block-start-32" role="table">
+<div class="table is-vertical u-margin-block-start-32" role="table">
     <slot />
 </div>

src/lib/elements/table/tableScroll.svelte

@@ -0,0 +1,7 @@
+<div class="table-with-scroll u-margin-block-start-32">
+    <div class="table-wrapper">
+        <div class="table is-sticky-scroll" role="table">
+            <slot />
+        </div>
+    </div>
+</div>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/_create.svelte

@@ -10,8 +10,6 @@
     import { addNotification } from '$lib/stores/notifications';
     import Attribute from './document/[document]/_attribute.svelte';
 
-    $: attributeList.load($page.params.collection);
-
     export let showCreate = false;
 
     let newDocument = {};
@@ -63,6 +61,8 @@
         }
     };
 
+    $: attributeList.load($page.params.collection);
+
     $: if (!showCreate) {
         initializeDocument();
         currentStep = 0;

src/routes/console/[project]/databases/database/[database]/collection/[collection]/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import {
-        Table,
+        TableScroll,
         TableRowLink,
         TableBody,
         TableHeader,
@@ -47,36 +47,35 @@
     </div>
 
     {#if $documentList?.total}
-        <div class="table-wrapper">
-            <Table sticky={true}>
-                <TableHeader>
-                    <TableCellHead>Document ID</TableCellHead>
-                    {#each columns as column}
-                        <TableCellHead>{column.title}</TableCellHead>
-                    {/each}
-                </TableHeader>
-                <TableBody>
-                    {#each $documentList.documents as document}
-                        <TableRowLink
-                            href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
-                            <TableCell width={230}>
-                                <Copy value={document.$id}>
-                                    <Pill button>
-                                        <span class="icon-duplicate" aria-hidden="true" />
-                                        <span class="text u-trim-start">{document.$id}</span>
-                                    </Pill>
-                                </Copy>
+        <TableScroll>
+            <TableHeader>
+                <TableCellHead>Document ID</TableCellHead>
+                {#each columns as column}
+                    <TableCellHead>{column.title}</TableCellHead>
+                {/each}
+            </TableHeader>
+            <TableBody>
+                {#each $documentList.documents as document}
+                    <TableRowLink
+                        href={`${base}/console/${projectId}/databases/database/${databaseId}/collection/${$collection.$id}/document/${document.$id}`}>
+                        <TableCell width={230}>
+                            <Copy value={document.$id}>
+                                <Pill button>
+                                    <span class="icon-duplicate" aria-hidden="true" />
+                                    <span class="text u-trim-start">{document.$id}</span>
+                                </Pill>
+                            </Copy>
+                        </TableCell>
+                        {#each columns as column}
+                            <TableCell>
+                                {document[column.key] ?? 'n/a'}
                             </TableCell>
-                            {#each columns as column}
-                                <TableCell>
-                                    {document[column.key] ?? 'n/a'}
-                                </TableCell>
-                            {/each}
-                        </TableRowLink>
-                    {/each}
-                </TableBody>
-            </Table>
-        </div>
+                        {/each}
+                    </TableRowLink>
+                {/each}
+            </TableBody>
+        </TableScroll>
+
         <div class="u-flex common-section u-main-space-between">
             <p class="text">Total results: {$documentList.total}</p>
             <Pagination {limit} bind:offset sum={$documentList.total} />
@@ -100,4 +99,6 @@
     {/if}
 </Container>
 
-<Create bind:showCreate />
+{#if showCreate}
+    <Create bind:showCreate />
+{/if}