reverted back to svelte-headless-table

frontend/package.json

@@ -16,8 +16,7 @@
     "postcss": "^8.4.45",
     "svelte": "^4.0.0",
     "svelte-check": "^3.4.3",
-    "svelte-headless-table": "^0.18.2",
+    "svelte-headless-table": "^0.18.3",
-    "@tanstack/svelte-table": "^8.20.5",
     "svelte-preprocess": "^5.0.3",
     "svelte-spa-router": "^4.0.1",
     "tailwind-merge": "^2.5.2",

frontend/src/helperComponents/AnimeTable.svelte

@@ -1,166 +1,119 @@
 <script lang="ts">
-  import { writable } from "svelte/store";
+    import {
-  import {
+        createRender,
-    createSvelteTable,
+        createTable,
-    flexRender,
+        Render,
-    getCoreRowModel,
+        Subscribe,
-    getSortedRowModel,
+    } from "svelte-headless-table";
-    type OnChangeFn,
+    // @ts-ignore
-    renderComponent,
+    import { addSortBy } from "svelte-headless-table/plugins";
-  } from "@tanstack/svelte-table";
+    import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
-  import type {
+    import WebsiteLink from "./WebsiteLink.svelte";
-    ColumnDef,
-    SortingState,
-    TableOptions,
-    Updater,
-  } from "@tanstack/svelte-table";
-  import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte";
-  import type { TableItem, TableItems } from "../helperTypes/TableTypes";
-  import WebsiteLink from "./WebsiteLink.svelte";
 
-  let currentTableItems: TableItems;
+    //when adding sort here is code { sort: addSortBy() }
+    const table = createTable(tableItems, { sort: addSortBy() });
 
-  tableItems.subscribe((value: TableItems) => (currentTableItems = value));
+    const columns = table.createColumns([
+        table.column({
+            header: "Service Id",
+            cell: ({ value }) => createRender(WebsiteLink, { id: value }),
+            accessor: "id",
+        }),
+        table.column({
+            header: "Anime Title",
+            accessor: "title",
+        }),
+        table.column({
+            header: "Service",
+            accessor: "service",
+        }),
+        table.column({
+            header: "Episode Progress",
+            accessor: "progress",
+        }),
+        table.column({
+            header: "Status",
+            accessor: "status",
+        }),
+        table.column({
+            header: "Started At",
+            accessor: "startedAt",
+        }),
+        table.column({
+            header: "Completed At",
+            accessor: "completedAt",
+        }),
+        table.column({
+            header: "Rating",
+            accessor: "score",
+        }),
+        table.column({
+            header: "Repeat",
+            accessor: "repeat",
+        }),
+        table.column({
+            header: "Notes",
+            accessor: "notes",
+        }),
+    ]);
 
-  const defaultColumns: ColumnDef<TableItem>[] = [
+    //add pluginStates when add sort back
-    {
+    const { headerRows, rows, tableAttrs, tableBodyAttrs } =
-      accessorKey: "id",
+        table.createViewModel(columns);
-      cell: (cell) => {
-        return renderComponent(WebsiteLink, { id: cell.renderValue() });
-      },
-      header: () => "Service ID",
-    },
-    {
-      accessorKey: "title",
-      header: () => "Anime Title",
-    },
-    {
-      accessorKey: "service",
-      header: () => "Service",
-    },
-    {
-      accessorKey: "progress",
-      header: () => "Episode Progress",
-    },
-    {
-      accessorKey: "status",
-      header: "Status",
-    },
-    {
-      accessorKey: "startedAt",
-      header: "Started At",
-    },
-    {
-      accessorKey: "completedAt",
-      header: "Completed At",
-    },
-    {
-      accessorKey: "score",
-      header: "Rating",
-    },
-    {
-      accessorKey: "repeat",
-      header: "Repeat",
-    },
-    {
-      accessorKey: "notes",
-      header: "Notes",
-    },
-  ];
-
-  //sorting info
-  let sorting: SortingState[] = [];
-
-  const setSorting: OnChangeFn<SortingState> = (updater) => {
-    if (updater instanceof Function) {
-      sorting = updater(sorting);
-    } else {
-      sorting = updater;
-    }
-    options.update((old) => ({
-      ...old,
-      state: {
-        ...old.state,
-        sorting,
-      },
-    }));
-  };
-
-  const options = writable<TableOptions<TableItem>>({
-    data: currentTableItems,
-    columns: defaultColumns,
-    state: {
-      sorting,
-    },
-    onSortingChange: setSorting,
-    getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
-  });
-
-  const rerender = () => {
-    options.update((options) => ({
-      ...options,
-      data: currentTableItems,
-    }));
-  };
-
-  const table = createSvelteTable(options);
 </script>
 
-<div>
+<div class="relative overflow-x-auto rounded-lg mb-5">
-  <div class="relative overflow-x-auto rounded-lg mb-5">
+    <table
-    <table class="w-full text-sm text-left rtl:text-right text-gray-400">
+        class="w-full text-sm text-left rtl:text-right text-gray-400"
-      <thead class="text-xs uppercase bg-gray-700 text-gray-400">
+        {...$tableAttrs}
-        {#each $table.getHeaderGroups() as headerGroup}
+    >
-          <tr>
+        <thead class="text-xs uppercase bg-gray-700 text-gray-400">
-            {#each headerGroup.headers as header}
+            {#each $headerRows as headerRow (headerRow.id)}
-              <th colSpan={header.colSpan} class="px-6 py-3">
+                <Subscribe attrs={headerRow.attrs()} let:attrs>
-                {#if !header.isPlaceholder}
+                    <tr {...attrs}>
-                  <div
+                        {#each headerRow.cells as cell (cell.id)}
-                    class:cursor-pointer={header.column.getCanSort()}
+                            <Subscribe
-                    class:select-none={header.column.getCanSort()}
+                                attrs={cell.attrs()}
-                    on:click={header.column.getToggleSortingHandler()}
+                                let:attrs
-                  >
+                                props={cell.props()}
-                    <svelte:component
+                                let:props
-                      this={flexRender(
+                            >
-                        header.column.columnDef.header,
+                                <th
-                        header.getContext(),
+                                    {...attrs}
-                      )}
+                                    on:click={props.sort.toggle}
-                    />
+                                    class:sorted={props.sort.order !==
-                    {#if header.column.getIsSorted().toString() === "asc"}
+                                        undefined}
-                      ⬆️
+                                    class="px-6 py-3"
-                    {:else if header.column.getIsSorted().toString() === "desc"}
+                                >
-                      ⬇️
+                                    <div>
-                    {/if}
+                                        <Render of={cell.render()} />
-                  </div>
+                                        {#if props.sort.order === "asc"}
-                {/if}
+                                            ⬇️
-              </th>
+                                        {:else if props.sort.order === "desc"}
+                                            ⬆️
+                                        {/if}
+                                    </div>
+                                </th>
+                            </Subscribe>
+                        {/each}
+                    </tr>
+                </Subscribe>
             {/each}
-          </tr>
+        </thead>
-        {/each}
+        <tbody {...$tableBodyAttrs}>
-      </thead>
+            {#each $rows as row (row.id)}
-      <tbody class="bg-gray-800 border-gray-700">
+                <Subscribe attrs={row.attrs()} let:attrs>
-        {#each $table.getRowModel().rows as row}
+                    <tr {...attrs} class="bg-gray-800 border-gray-700">
-          <tr>
+                        {#each row.cells as cell (cell.id)}
-            {#each row.getVisibleCells() as cell}
+                            <Subscribe attrs={cell.attrs()} let:attrs>
-              <td class="px-6 py-4">
+                                <td {...attrs} class="px-6 py-4">
-                <svelte:component
+                                    <Render of={cell.render()} />
-                  this={flexRender(
+                                </td>
-                    cell.column.columnDef.cell,
+                            </Subscribe>
-                    cell.getContext(),
+                        {/each}
-                  )}
+                    </tr>
-                />
+                </Subscribe>
-              </td>
             {/each}
-          </tr>
+        </tbody>
-        {/each}
-      </tbody>
     </table>
-  </div>
-  <!-- <button -->
-  <!--   class="text-white bg-blue-600 dark:bg-blue-600 hover:bg-blue-700 dark:hover:bg-blue-700 focus:ring-4 focus:ring-blue-800 dark:focus:ring-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 focus:outline-none" -->
-  <!--   on:click={() => rerender()} -->
-  <!-- > -->
-  <!--   Rerender -->
-  <!-- </button> -->
 </div>