Tables in skeleton for svelte

[pr0t0n-cmd]

Is there a way to have filtering and serach functions in a table? or should i use another plugin? thanks

[endigo9740]

We suggest using Skeleton's Table elements, which provide theme styles for native HTML tables:
https://www.skeleton.dev/elements/tables

Then pair this with your data tables library of your choice. We've heard good things about Svelte Simple Datatables, but I'm sure other options are out there as well.

[endigo9740]

@pr0t0n-cmd to fast forward a bit - we've now implemented a proper integration guide here:

https://www.skeleton.dev/docs/ssd

This comes with a full walkthrough, screenshots, and even a demo repo to help get you rolling. Hope it helps!

[vhochstein]

All the examples given are using an external API to fetch the data.
How would it work using "native" Page SvelteKit export const load: PageServerLoad method ?

Thanks a lot for your support in advance.

[endigo9740]

@vhochstein When you're using SvelteKit's load function, you return the data using PageData, like this:
https://kit.svelte.dev/docs/load#page-data

Which means you should be able to swap from:

import data from '$lib/static/data';

To:

import type { PageData } from './$types';
export let data: PageData;

But I'll ping @kmalloy24 (the integration guide author) to confirm.

[kmalloy24]

@vhochstein glad you mentioned this...I was toying around with it the other week.

So, I've had a hard time getting the server state reload to work in a load function. The initial page load will load the data into the table, but not the subsequent calls to paginate, search, etc. What I've been doing now instead is putting the reload function in an onMount in the component. This avoids calling fetch eagerly during SSR - which will throw a warning in the CLI in skit v2.

<script lang="ts">
	//IMPORTS
	//Svelte
	import { onMount } from 'svelte';
	//Local Components
	import ThSort from '$lib/components/server/ThSort.svelte';
	import ThFilter from '$lib/components/server/ThFilter.svelte';
	import Search from '$lib/components/server/Search.svelte';
	import RowsPerPage from '$lib/components/server/RowsPerPage.svelte';
	import RowCount from '$lib/components/server/RowCount.svelte';
	import Pagination from '$lib/components/server/Pagination.svelte';
	//Svelte Simple Datatables
	import { DataHandler } from '@vincjo/datatables/remote';
	import type { State, Row } from '@vincjo/datatables/remote';

	//Init data handler - SERVER
	const handler = new DataHandler<Row>([], { rowsPerPage: 5, totalRows: 200 });
	const rows = handler.getRows();

	//Set API
	const API_BASE_URL = 'https://jsonplaceholder.typicode.com/todos?';

	//API Handler
	onMount(() => {
		const reload = async (state: State) => {
			const response = await fetch(`${API_BASE_URL}${getParams(state)}`);
			return response.json();
		};

		const getParams = (state: State) => {
			const { pageNumber, rowsPerPage, sort, filters, search } = state;

			let params = `_page=${pageNumber}`;

			if (rowsPerPage) {
				params += `&_limit=${rowsPerPage}`;
			}
			if (sort) {
				params += `&_sort=${sort.orderBy}&_order=${sort.direction}`;
			}

			if (filters) {
				params += filters.map(({ filterBy, value }) => `&${filterBy}=${value}`).join();
			}

			if (search) {
				params += `&q=${search}`;
			}
			return params;
		};

		handler.onChange((state: State) => reload(state));
		handler.invalidate();
	});
</script>

<div class="overflow-y-auto space-y-4">
	<header class="flex justify-between">
		<Search {handler} />
		<RowsPerPage {handler} />
	</header>
	<table class="table table-hover table-compact w-full table-auto">
		<thead>
			<tr>
				<ThSort {handler} orderBy="id">ID</ThSort>
				<ThSort {handler} orderBy="title">Title</ThSort>
				<ThSort {handler} orderBy="completed">Completed</ThSort>
			</tr>
			<tr>
				<ThFilter {handler} filterBy="id" />
				<ThFilter {handler} filterBy="title" />
				<ThFilter {handler} filterBy="completed" />
			</tr>
		</thead>
		<tbody>
			{#each $rows as row}
				<tr>
					<td>{row.id}</td>
					<td>{row.title}</td>
					<td>{@html row.completed ? '&check;' : '&#x2715;'}</td>
				</tr>
			{/each}
		</tbody>
	</table>
	<footer class="flex justify-between">
		<RowCount {handler} />
		<Pagination {handler} />
	</footer>
</div>

I've also been working on an example loading data from the Supabase JS client. Which still gets handled in onMount but requires updates to some of the components, and not all of the functionality is there yet, but I can share what I have so far if it would help.

@endigo9740 lmk if you want me to update the docs and example for SSR with this onMount example rather than using api.ts - not sure if it's a moot point with v3 on the way.

[endigo9740]

@endigo9740 lmk if you want me to update the docs and example for SSR with this onMount example rather than using api.ts - not sure if it's a moot point with v3 on the way.

Always down for updates, but up to you if you have the time and bandwidth! I'd gladly accept a PR for the docs and the example repo! The v3 integration guide is still a ways out, so probably best to grab this sooner than later.