Server side API?

[Gildedter]

Currently my (table) search is using the "filterValue" store, but I want to send a request to my server, is there an existing API?

I'd also like to handle pagination server side as well, I am fetching it on page load and updating a writable store behind the scene.

[bryanmylee]

I haven't designed a server-side API yet because I'm not sure what the best practices are for that.

If we want to support server-side sorting / filtering / pagination etc., would it be sufficient to keep the plugin states (i.e. sort keys, filters, page index, etc.) but make the plugins have no effect on the rows?

That way, we can use Svelte Headless Table as a way of managing the sort / filter / pagination state, but update the data store for the table independently.

[blerrgh]

They way you describe it would be super useful to me -- let Svelte Headless Table manage the view states, essentially, which can then drive a paginated/filtered API query behind the scenes.

[Gildedter]

Haven't read all of the code, this is how I'm implementing it on my project, I didn't touch any of the plugins (had to remove pagination, since I'm handling that manually), I basically update the store inside my search function, call it on button click to fetch search results, the problem with this approach is, I'm handling all the pagination, I need to pass my search term and page size to my endpoint while my endpoint returns the current page number and max number rows, and result rows

[webtech-tom]

They way you describe it would be super useful to me -- let Svelte Headless Table manage the view states, essentially, which can then drive a paginated/filtered API query behind the scenes.

I agree!

If we want to support server-side sorting / filtering / pagination etc., would it be sufficient to keep the plugin states (i.e. sort keys, filters, page index, etc.) but make the plugins have no effect on the rows?
That way, we can use Svelte Headless Table as a way of managing the sort / filter / pagination state, but update the data store for the table independently.

exactly what Iam looking for.

[Gildedter]

I saw a serverItemCount parameter on the addPagination plugin, is that working now or just a stub? can't seem to find a usage example

[bryanmylee]

Hey @Gildedter! @blerrgh actually implemented some server side features at the start of the year but the documentation had to be delayed since the previous framework I was using relied on an old SvelteKit version which was no longer publishable to Vercel.

I recently spent a lot of effort migrating the site though, so a documentation update is definitely due.

In the meantime, you can refer to this snippet for an idea of how server-side sorting, filtering, and pagination can be implemented:

const data = writable([...]);

const table = createTable(data, {
  sort: addSortBy({ serverSide: true }),
  filter: addTableFilter({ serverSide: true }),
  page: addPagination({ serverSide: true }),
});

const columns = table.createColumns(...);
const {rows, pluginStates} = table.createViewModel(columns);
const {sortKeys} = pluginStates.sort;
const {filterValue} = pluginStates.filter;
const {pageSize, pageIndex} = pluginStates.filter;

async function updateQuery() {
  const q = new URLSearchParams();
  q.set('order_by', $sortKeys[0].id);
  q.set('order_dir', $sortKeys[0].order);
  q.set('filter', $filterValue);
  q.set('limit', String($pageSize));
  q.set('skip', String($pageSize * $pageIndex));
  $data = await fetch(`/api_endpoint?${q});
}
// ...

[Gildedter]

Many thanks, will look into it later at work.

[ftognetto]

I'm using a different approach to paginate the datable.
In the +page.server.ts I download the paginated data and give back to the page only the data needed.

export const load: PageServerLoad = async (event) => {
        // helper function that parse the url and give back an object with page, limit, filters and sorts
	const _paginatedState = paginatedState(event.url);
	const where: Prisma.PharmacyProductWhereInput = {};
	if (_paginatedState.filters) {
		if (_paginatedState.filters.search && _paginatedState.filters.search !== '') {
			where.OR = [{ id_product: { contains: _paginatedState.filters.search } }];
		}
	}
	const pharmacyProduct = await pharmacyProductService.findAll(where, _paginatedState);
	const count = await pharmacyProductService.countAll(where);
	return {
		paginatedData: {
			data: pharmacyProduct,
			count
		}
	};
};

And then in the +page.svelte

        export let data;
	const paginatedData = writable(data.paginatedData.data);
	$: {
                // need to be reactive because data can change
		$paginatedData = data.paginatedData.data;
		pluginStates.page.serverItemCount.update(() => data.paginatedData.count);
	}
	const table = createTable(paginatedData, {
		sort: addSortBy({ disableMultiSort: true, serverSide: true }),
		page: addPagination({
			serverSide: true,
			initialPageIndex: $page.url.searchParams.get('page')
				? Number($page.url.searchParams.get('page'))
				: undefined,
			initialPageSize: $page.url.searchParams.get('limit')
				? Number($page.url.searchParams.get('limit'))
				: undefined
		}),
		filter: addTableFilter({
			serverSide: true,
			initialFilterValue: $page.url.searchParams.get('search') || undefined
		})
	});
	const columns = table.createColumns([
		table.column({ header: 'Prodotto', accessor: 'id_product' }),
		table.column({ header: 'Giacenza', accessor: 'stock', plugins: { sort: { disable: true } } }),
		table.column({ header: 'Prezzo', accessor: 'price', plugins: { sort: { disable: true } } })
	]);
	const { headerRows, pageRows, tableAttrs, tableBodyAttrs, flatColumns, pluginStates } =
		table.createViewModel(columns);
	const { pageIndex, pageSize } = pluginStates.page;
	const { filterValue } = pluginStates.filter;
	const { sortKeys } = pluginStates.sort;
	const debouncedFilterValue = debounce(filterValue);

	$: {
		if (browser) {
			debugger;
			const q = new URLSearchParams();
			if ($sortKeys.length) {
				q.set('sort', ($sortKeys[0].order === 'asc' ? '+' : '-') + $sortKeys[0].id);
			}
			q.set('search', $debouncedFilterValue);
			q.set('limit', String($pageSize));
			q.set('page', String($pageIndex));
                        // here I call again +page.server.ts with the new url
			goto(`?${q}`, { noScroll: true });
		}
	}