120 lines
4.1 KiB
Svelte
120 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
createRender,
|
|
createTable,
|
|
Render,
|
|
Subscribe,
|
|
} from "svelte-headless-table"
|
|
// @ts-ignore
|
|
import { addSortBy } from "svelte-headless-table/plugins"
|
|
import { tableItems } from "../helperModules/GlobalVariablesAndHelperFunctions.svelte"
|
|
import WebsiteLink from "./WebsiteLink.svelte"
|
|
|
|
//when adding sort here is code { sort: addSortBy() }
|
|
const table = createTable(tableItems, { sort: addSortBy() })
|
|
|
|
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",
|
|
}),
|
|
])
|
|
|
|
//add pluginStates when add sort back
|
|
const { headerRows, rows, tableAttrs, tableBodyAttrs } =
|
|
table.createViewModel(columns)
|
|
</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"
|
|
{...$tableAttrs}
|
|
>
|
|
<thead class="text-xs uppercase bg-gray-700 text-gray-400">
|
|
{#each $headerRows as headerRow (headerRow.id)}
|
|
<Subscribe attrs={headerRow.attrs()} let:attrs>
|
|
<tr {...attrs}>
|
|
{#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"
|
|
>
|
|
<div>
|
|
<Render of={cell.render()} />
|
|
{#if props.sort.order === "asc"}
|
|
⬇️
|
|
{:else if props.sort.order === "desc"}
|
|
⬆️
|
|
{/if}
|
|
</div>
|
|
</th>
|
|
</Subscribe>
|
|
{/each}
|
|
</tr>
|
|
</Subscribe>
|
|
{/each}
|
|
</thead>
|
|
<tbody {...$tableBodyAttrs}>
|
|
{#each $rows as row (row.id)}
|
|
<Subscribe attrs={row.attrs()} let:attrs>
|
|
<tr {...attrs} class="bg-gray-800 border-gray-700">
|
|
{#each row.cells as cell (cell.id)}
|
|
<Subscribe attrs={cell.attrs()} let:attrs>
|
|
<td {...attrs} class="px-6 py-4">
|
|
<Render of={cell.render()} />
|
|
</td>
|
|
</Subscribe>
|
|
{/each}
|
|
</tr>
|
|
</Subscribe>
|
|
{/each}
|
|
</tbody>
|
|
</table>
|
|
</div>
|