feat: data-table to use tanstack table

package.json

@@ -45,6 +45,7 @@
   "type": "module",
   "dependencies": {
     "@eslint/js": "^9.9.0",
+    "@tanstack/svelte-table": "^8.20.5",
     "@types/lodash": "^4.17.7",
     "@unovis/svelte": "^1.4.4",
     "@unovis/ts": "^1.4.4",

src/lib/components/data-table/data-table-span.svelte → src/lib/components/data-table/data-table-cell.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
   import type { HTMLAttributes } from "svelte/elements";
 
-  type $$Props = HTMLAttributes<HTMLSpanElement>;
+  type $$Props = HTMLAttributes<HTMLSpanElement> & {
+    value: string;
+  };
+
+  export let value;
 
   let className: $$Props["class"] = undefined;
   export { className as class };
 </script>
 
 <span class={className} {...$$restProps}>
-  <slot />
+  {value}
 </span>

src/lib/components/data-table/data-table-column-header.svelte

@@ -1,32 +1,28 @@
-<script lang="ts">
+<script lang="ts" generics="TData, TValue">
+  import type { Column } from "@tanstack/svelte-table";
+
   import { cn } from "$lib/utils";
-  import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-svelte";
+  import {
+    ArrowDown,
+    ArrowUp,
+    ChevronsUpDown,
+    EyeOffIcon,
+  } from "lucide-svelte";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
   import { Button } from "$lib/components/ui/button";
 
   let className: string | undefined | null = undefined;
 
   export { className as class };
-  export let props: {
-    sort: {
-      order?: "asc" | "desc";
-      toggle: (event: Event) => void;
-      clear: () => void;
-      disabled: boolean;
-    };
-  };
-
-  function handleSort(event: Event, order: "asc" | "desc") {
-    if (props.sort.order === order) {
-      return;
-    }
-    props.sort.toggle(event);
-  }
+  export let column: Column<TData, TValue>;
 </script>
 
-{#if !props.sort.disabled}
+{#if !column.getCanSort()}
+  <div class={className}><slot /></div>
+{:else}
+  {@const isSorted = column.getIsSorted()}
   <div class={cn("flex items-center", className)}>
-    <DropdownMenu.Root positioning={{ placement: "bottom-start" }}>
+    <DropdownMenu.Root>
       <DropdownMenu.Trigger asChild let:builder>
         <Button
           variant="ghost"
@@ -36,24 +32,29 @@
           <span class="capitalize">
             <slot />
           </span>
-          {#if props.sort.order === "asc"}
+          {#if isSorted === "asc"}
             <ArrowUp class="w-4 h-4 ml-2" />
-          {:else if props.sort.order === "desc"}
+          {:else if isSorted === "desc"}
             <ArrowDown class="w-4 h-4 ml-2" />
           {:else}
             <ChevronsUpDown class="w-4 h-4 ml-2" />
           {/if}
         </Button>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content>
-        <DropdownMenu.Item on:click={(event) => handleSort(event, "asc")}>
+        <DropdownMenu.Item on:click={() => column.toggleSorting(false)}>
           <ArrowUp class="w-4 h-4 mr-2" />
-          Asc</DropdownMenu.Item
-        >
-        <DropdownMenu.Item on:click={(event) => handleSort(event, "desc")}>
+          Asc
+        </DropdownMenu.Item>
+        <DropdownMenu.Item on:click={() => column.toggleSorting(true)}>
           <ArrowDown class="w-4 h-4 mr-2" />
-          Desc</DropdownMenu.Item
-        >
+          Desc
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item on:click={() => column.toggleVisibility(false)}>
+          <EyeOffIcon class="w-4 h-4 mr-2" />
+          Hide
+        </DropdownMenu.Item>
       </DropdownMenu.Content>
     </DropdownMenu.Root>
   </div>

src/lib/components/data-table/data-table-link.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { HTMLAnchorAttributes } from "svelte/elements";
 
-  type $$Props = HTMLAnchorAttributes;
+  type $$Props = HTMLAnchorAttributes & { value: string };
 
   let className: $$Props["class"] = undefined;
   let href: $$Props["href"] = undefined;
+  export let value;
   export { className as class };
 </script>
 
 <a class={className} {href} {...$$restProps}>
-  <slot />
+  {value}
 </a>

src/lib/components/data-table/data-table-pagination.svelte

@@ -1,28 +1,25 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="TData">
+  import type { Readable } from "svelte/store";
   import Button from "$lib/components/ui/button/button.svelte";
   import * as Select from "$lib/components/ui/select";
-  import type { TableViewModel } from "svelte-headless-table";
-  import type { AnyPlugins } from "svelte-headless-table/plugins";
+  import type { Table } from "@tanstack/svelte-table";
   import {
     ChevronLeftIcon,
     ChevronRightIcon,
     ChevronsLeftIcon,
     ChevronsRightIcon,
   } from "lucide-svelte";
 
-  export let tableModel: TableViewModel<T, AnyPlugins>;
-
-  const { pluginStates, rows } = tableModel;
-
-  const { hasNextPage, hasPreviousPage, pageSize, pageCount, pageIndex } =
-    pluginStates.page;
+  export let table: Readable<Table<TData>>;
 </script>
 
 <div class="flex items-center justify-end px-2">
   <div class="flex items-center space-x-6 lg:space-x-8">
     <p class="text-sm font-medium">Rows per page</p>
     <Select.Root
-      onSelectedChange={(selected) => pageSize.set(Number(selected?.value))}
+      onSelectedChange={(selected) => {
+        $table.setPageSize(Number(selected?.value));
+      }}
       selected={{ value: 10, label: "10" }}
     >
       <Select.Trigger class="w-[180px]">
@@ -37,41 +34,41 @@
       </Select.Content>
     </Select.Root>
     <div class="w-[100px] items-center justify-center text-sm font-medium">
-      Page {$pageIndex + 1} of {$pageCount}
+      Page {$table.getState().pagination.pageIndex + 1} of
+      {$table.getPageCount()}
     </div>
     <div class="flex items-center space-x-2">
       <Button
         variant="outline"
         class="hidden h-8 w-8 p-0 lg:flex"
-        on:click={() => ($pageIndex = 0)}
-        disabled={!$hasPreviousPage}
+        on:click={() => $table.setPageIndex(0)}
+        disabled={!$table.getCanPreviousPage()}
       >
         <span class="sr-only">Go to first page</span>
         <ChevronsLeftIcon size={15} />
       </Button>
       <Button
         variant="outline"
         class="hidden h-8 w-8 p-0 lg:flex"
-        on:click={() => ($pageIndex = $pageIndex - 1)}
-        disabled={!$hasPreviousPage}
+        on:click={() => $table.previousPage()}
+        disabled={!$table.getCanPreviousPage()}
       >
         <span class="sr-only">Go to previous page</span>
         <ChevronLeftIcon size={15} />
       </Button>
       <Button
         variant="outline"
         class="hidden h-8 w-8 p-0 lg:flex"
-        on:click={() => ($pageIndex = $pageIndex + 1)}
-        disabled={!$hasNextPage}
+        on:click={() => $table.nextPage()}
+        disabled={!$table.getCanNextPage()}
       >
         <span class="sr-only">Go to next page</span>
         <ChevronRightIcon size={15} />
       </Button>
       <Button
         variant="outline"
         class="hidden h-8 w-8 p-0 lg:flex"
-        on:click={() => ($pageIndex = Math.ceil($rows.length / $pageSize) - 1)}
-        disabled={!$hasNextPage}
+        on:click={() => $table.setPageIndex($table.getPageCount() - 1)}
       >
         <span class="sr-only">Go to last page</span>
         <ChevronsRightIcon size={15} />

src/lib/components/data-table/data-table-toolbar.svelte

@@ -1,21 +1,12 @@
-<script lang="ts" generics="T">
-  import type { Writable } from "svelte/store";
+<script lang="ts" generics="TData">
+  import type { Readable } from "svelte/store";
 
-  import { Input } from "$lib/components/ui/input";
-  import type { TableViewModel } from "svelte-headless-table";
+  import type { Table } from "@tanstack/svelte-table";
 
-  import type { AnyPlugins } from "svelte-headless-table/plugins";
+  import { Input } from "$lib/components/ui/input";
 
   import { DataTableViewOptions } from "$lib/components/data-table";
-  export let tableModel: TableViewModel<T, AnyPlugins>;
-
-  const { pluginStates } = tableModel;
-
-  const {
-    filterValue,
-  }: {
-    filterValue: Writable<string>;
-  } = pluginStates.filter;
+  export let table: Readable<Table<TData>>;
 </script>
 
 <div class="flex items-center justify-between">
@@ -24,8 +15,8 @@
       class="h-8 w-[150px] lg:w-[250px]"
       placeholder="Search"
       type="text"
-      bind:value={$filterValue}
+      on:keyup={(event) => $table.setGlobalFilter(String(event?.target?.value))}
     />
   </div>
-  <DataTableViewOptions {tableModel} />
+  <DataTableViewOptions {table} />
 </div>

src/lib/components/data-table/data-table-view-options.svelte

@@ -1,24 +1,11 @@
-<script lang="ts" generics="T">
+<script lang="ts" generics="TData">
+  import type { Readable } from "svelte/store";
   import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
   import { Button } from "$lib/components/ui/button";
-  import type { AnyPlugins } from "svelte-headless-table/plugins";
-  import type { TableViewModel } from "svelte-headless-table";
   import { SlidersHorizontalIcon } from "lucide-svelte";
+  import type { Table } from "@tanstack/svelte-table";
 
-  export let tableModel: TableViewModel<T, AnyPlugins>;
-  const { pluginStates, flatColumns } = tableModel;
-  const { hiddenColumnIds } = pluginStates.hide;
-
-  const ids = flatColumns.map((column) => column.id);
-
-  let hideForId = Object.fromEntries(
-    ids.map((id) =>
-      !$hiddenColumnIds.includes(id) ? [id, true] : [id, false],
-    ),
-  );
-  $: $hiddenColumnIds = Object.entries(hideForId)
-    .filter(([, hide]) => !hide)
-    .map(([id]) => id);
+  export let table: Readable<Table<TData>>;
 </script>
 
 <DropdownMenu.Root>
@@ -34,9 +21,14 @@
   </DropdownMenu.Trigger>
   <DropdownMenu.Content>
     <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>
-    {#each flatColumns as column}
-      <DropdownMenu.CheckboxItem bind:checked={hideForId[column.id]}>
-        {column.header}
+    {#each $table
+      .getAllColumns()
+      .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide()) as column}
+      <DropdownMenu.CheckboxItem
+        checked={column.getIsVisible()}
+        on:click={() => column.toggleVisibility()}
+      >
+        {column.columnDef.header}
       </DropdownMenu.CheckboxItem>
     {/each}
   </DropdownMenu.Content>