began transition to tanstack table

frontend/package.json

@@ -17,6 +17,7 @@
     "svelte": "^4.0.0",
     "svelte-check": "^3.4.3",
     "svelte-headless-table": "^0.18.2",
+    "@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/Anime.svelte

@@ -45,6 +45,7 @@
     import { AddAnimeServiceToTable } from "../helperModules/AddAnimeServiceToTable.svelte";
     import { CheckIfAniListLoggedInAndLoadWatchList } from "../helperModules/CheckIfAniListLoggedInAndLoadWatchList.svelte";
     import Datepicker from "./Datepicker.svelte";
+    import AnimeTableTanstack from "./AnimeTableTanstack.svelte";
     const re = /^([0-9]{4})-([0-9]{2})-([0-9]{2})/;
 
     let isAniListLoggedIn: boolean;
@@ -710,6 +711,7 @@
             </Button>
         </div>
     </div>
+    <AnimeTableTanstack />
     <AnimeTable />
 
     <div class="flex rounded-lg shadow max-w-4-4 bg-gray-800">

frontend/src/helperComponents/AnimeTableTanstack.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+    import { writable } from "svelte/store";
+    import {
+        createSvelteTable,
+        flexRender,
+        getCoreRowModel,
+        renderComponent,
+    } from "@tanstack/svelte-table";
+    import type { ColumnDef, TableOptions } 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;
+
+    tableItems.subscribe((value: TableItems) => (currentTableItems = value));
+
+    const defaultColumns: ColumnDef<TableItem>[] = [
+        {
+            accessorKey: "id",
+            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",
+        },
+    ];
+
+    const options = writable<TableOptions<TableItem>>({
+        data: currentTableItems,
+        columns: defaultColumns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    const rerender = () => {
+        options.update((options) => ({
+            ...options,
+            data: currentTableItems,
+        }));
+    };
+
+    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-400">
+        <thead class="text-xs uppercase bg-gray-700 text-gray-400">
+            {#each $table.getHeaderGroups() as headerGroup}
+                <tr>
+                    {#each headerGroup.headers as header}
+                        <th class="px-6 py-3">
+                            {#if !header.isPlaceholder}
+                                <svelte:component
+                                    this={flexRender(
+                                        header.column.columnDef.header,
+                                        header.getContext(),
+                                    )}
+                                />
+                            {/if}
+                        </th>
+                    {/each}
+                </tr>
+            {/each}
+        </thead>
+        <tbody class="bg-gray-800 border-gray-700">
+            {#each $table.getRowModel().rows as row}
+                <tr>
+                    {#each row.getVisibleCells() as cell}
+                        <td class="px-6 py-4">
+                            <svelte:component
+                                this={flexRender(
+                                    cell.column.columnDef.cell,
+                                    cell.getContext(),
+                                )}
+                            />
+                        </td>
+                    {/each}
+                </tr>
+            {/each}
+        </tbody>
+    </table>
+    <button on:click={() => rerender()} class="border p-2"> Rerender </button>
+</div>