Use common table code

Author: hhvrc

src/routes/(authenticated)/sharelinks/columns.ts

@@ -1,7 +1,7 @@
 import type { ColumnDef, StringOrTemplateHeader } from '@tanstack/table-core';
 import { createRawSnippet } from 'svelte';
 import { renderComponent, renderSnippet } from '$lib/components/ui/data-table';
-import DataTableSortButton from './data-table-sort-button.svelte';
+import DataTableSortButton from '$lib/components/Table/SortButton.svelte';
 import DataTableActions from './data-table-actions.svelte';
 
 export type ShareLink = {

src/routes/(authenticated)/sharelinks/data-table-sort-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="TData, TValue">
-  import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table';
-  import * as Table from '$lib/components/ui/table';
+  import { createSvelteTable } from '$lib/components/ui/data-table';
+  import Table from '$lib/components/Table/TableTemplate.svelte';
   import {
     getCoreRowModel,
     getFilteredRowModel,
@@ -39,40 +39,4 @@
   });
 </script>
 
-<div>
-  <div class="rounded-md border">
-    <Table.Root>
-      <Table.Header>
-        {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-          <Table.Row>
-            {#each headerGroup.headers as header (header.id)}
-              <Table.Head>
-                {#if !header.isPlaceholder}
-                  <FlexRender
-                    content={header.column.columnDef.header}
-                    context={header.getContext()}
-                  />
-                {/if}
-              </Table.Head>
-            {/each}
-          </Table.Row>
-        {/each}
-      </Table.Header>
-      <Table.Body>
-        {#each table.getRowModel().rows as row (row.id)}
-          <Table.Row data-state={row.getIsSelected() && 'selected'}>
-            {#each row.getVisibleCells() as cell (cell.id)}
-              <Table.Cell>
-                <FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-              </Table.Cell>
-            {/each}
-          </Table.Row>
-        {:else}
-          <Table.Row>
-            <Table.Cell colspan={columns.length} class="h-24 text-center">No results.</Table.Cell>
-          </Table.Row>
-        {/each}
-      </Table.Body>
-    </Table.Root>
-  </div>
-</div>
+<Table {table} {columns} />