finished switch from svelte table to tanstack table
This commit is contained in:
parent
3ec5eb1a03
commit
45845c2a69
File diff suppressed because it is too large
Load Diff
@ -1,119 +1,166 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {
|
import { writable } from "svelte/store";
|
||||||
createRender,
|
import {
|
||||||
createTable,
|
createSvelteTable,
|
||||||
Render,
|
flexRender,
|
||||||
Subscribe,
|
getCoreRowModel,
|
||||||
} from "svelte-headless-table"
|
getSortedRowModel,
|
||||||
// @ts-ignore
|
type OnChangeFn,
|
||||||
import { addSortBy } from "svelte-headless-table/plugins"
|
renderComponent,
|
||||||
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
|
} from "@tanstack/svelte-table";
|
||||||
import WebsiteLink from "./WebsiteLink.svelte"
|
import type {
|
||||||
|
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";
|
||||||
|
|
||||||
//when adding sort here is code { sort: addSortBy() }
|
let currentTableItems: TableItems;
|
||||||
const table = createTable(tableItems, { sort: addSortBy() })
|
|
||||||
|
|
||||||
const columns = table.createColumns([
|
tableItems.subscribe((value: TableItems) => (currentTableItems = value));
|
||||||
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",
|
|
||||||
}),
|
|
||||||
])
|
|
||||||
|
|
||||||
//add pluginStates when add sort back
|
const defaultColumns: ColumnDef<TableItem>[] = [
|
||||||
const { headerRows, rows, tableAttrs, tableBodyAttrs } =
|
{
|
||||||
table.createViewModel(columns)
|
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",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
//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>
|
</script>
|
||||||
|
|
||||||
<div class="relative overflow-x-auto rounded-lg mb-5">
|
<div>
|
||||||
<table
|
<div class="relative overflow-x-auto rounded-lg mb-5">
|
||||||
class="w-full text-sm text-left rtl:text-right text-gray-400"
|
<table class="w-full text-sm text-left rtl:text-right text-gray-400">
|
||||||
{...$tableAttrs}
|
<thead class="text-xs uppercase bg-gray-700 text-gray-400">
|
||||||
>
|
{#each $table.getHeaderGroups() as headerGroup}
|
||||||
<thead class="text-xs uppercase bg-gray-700 text-gray-400">
|
<tr>
|
||||||
{#each $headerRows as headerRow (headerRow.id)}
|
{#each headerGroup.headers as header}
|
||||||
<Subscribe attrs={headerRow.attrs()} let:attrs>
|
<th colSpan={header.colSpan} class="px-6 py-3">
|
||||||
<tr {...attrs}>
|
{#if !header.isPlaceholder}
|
||||||
{#each headerRow.cells as cell (cell.id)}
|
<div
|
||||||
<Subscribe
|
class:cursor-pointer={header.column.getCanSort()}
|
||||||
attrs={cell.attrs()}
|
class:select-none={header.column.getCanSort()}
|
||||||
let:attrs
|
on:click={header.column.getToggleSortingHandler()}
|
||||||
props={cell.props()}
|
>
|
||||||
let:props
|
<svelte:component
|
||||||
>
|
this={flexRender(
|
||||||
<th
|
header.column.columnDef.header,
|
||||||
{...attrs}
|
header.getContext(),
|
||||||
on:click={props.sort.toggle}
|
)}
|
||||||
class:sorted={props.sort.order !==
|
/>
|
||||||
undefined}
|
{#if header.column.getIsSorted().toString() === "asc"}
|
||||||
class="px-6 py-3"
|
⬆️
|
||||||
>
|
{:else if header.column.getIsSorted().toString() === "desc"}
|
||||||
<div>
|
⬇️
|
||||||
<Render of={cell.render()} />
|
{/if}
|
||||||
{#if props.sort.order === "asc"}
|
</div>
|
||||||
⬇️
|
{/if}
|
||||||
{:else if props.sort.order === "desc"}
|
</th>
|
||||||
⬆️
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</th>
|
|
||||||
</Subscribe>
|
|
||||||
{/each}
|
|
||||||
</tr>
|
|
||||||
</Subscribe>
|
|
||||||
{/each}
|
{/each}
|
||||||
</thead>
|
</tr>
|
||||||
<tbody {...$tableBodyAttrs}>
|
{/each}
|
||||||
{#each $rows as row (row.id)}
|
</thead>
|
||||||
<Subscribe attrs={row.attrs()} let:attrs>
|
<tbody class="bg-gray-800 border-gray-700">
|
||||||
<tr {...attrs} class="bg-gray-800 border-gray-700">
|
{#each $table.getRowModel().rows as row}
|
||||||
{#each row.cells as cell (cell.id)}
|
<tr>
|
||||||
<Subscribe attrs={cell.attrs()} let:attrs>
|
{#each row.getVisibleCells() as cell}
|
||||||
<td {...attrs} class="px-6 py-4">
|
<td class="px-6 py-4">
|
||||||
<Render of={cell.render()} />
|
<svelte:component
|
||||||
</td>
|
this={flexRender(
|
||||||
</Subscribe>
|
cell.column.columnDef.cell,
|
||||||
{/each}
|
cell.getContext(),
|
||||||
</tr>
|
)}
|
||||||
</Subscribe>
|
/>
|
||||||
|
</td>
|
||||||
{/each}
|
{/each}
|
||||||
</tbody>
|
</tr>
|
||||||
|
{/each}
|
||||||
|
</tbody>
|
||||||
</table>
|
</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>
|
</div>
|
||||||
|
|||||||
@ -1,118 +0,0 @@
|
|||||||
<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>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user