changed to svelte headless table for reactive data

frontend/package.json

@@ -16,6 +16,7 @@
     "postcss": "^8.4.45",
     "svelte": "^4.0.0",
     "svelte-check": "^3.4.3",
+    "svelte-headless-table": "^0.18.2",
     "svelte-preprocess": "^5.0.3",
     "svelte-spa-router": "^4.0.1",
     "tailwind-merge": "^2.5.2",
@@ -26,9 +27,8 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@tanstack/svelte-table": "^8.20.5",
     "flowbite": "^2.5.1",
     "flowbite-svelte": "^0.46.16",
     "moment": "^2.30.1"
   }
-}
+}

frontend/src/helperComponents/AnimeTable.svelte

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