Looking for example of DataTable to use paginated API

[ChristianRiesen]

I have the following example of a DataTable that uses an API (JSON-LD using hydra collections). For simplicity I ommit the code for fetching but I think it's pretty obvious at this point.

What works: It loads the first page without issue, shows the correct number of pages and total items. Switching the number of items per page also works flawlessly.

What doesn't work: As soon as you go to page 2, the list is empty. Same for the next pages, it just is always empty. In the network panel I can see the requests being made correctly with pagesize and page number being sent to the api and it replying correctly. My guess is that the component treats the reply from page 2 as if it was page 1, and so it thinks there is no data for page 2.

I may just miss something obvious as I'm new to Svelte(Kit) and these components. A good hint would be appreciated, or just a link to where someone has already explained it in detail as I was unable to find a good example of this. Thanks!

<script lang="ts">
	import {
		DataTable,
		Toolbar,
		ToolbarContent,
		ToolbarSearch,
		Pagination,
	} from 'carbon-components-svelte';
	import type { DataTableHeader } from 'carbon-components-svelte/src/DataTable/DataTable.svelte';
	import { api } from '$lib/ApiClient';

	let pageSize: number = 15;
	let page = 1;
	let totalItems = 0;
	let filteredRowIds = [];
	let isLoading = true;
	let error: unknown = null;

	async function fetchContacts() {
		isLoading = true;
		try {
			contacts = await api.getContacts(page, pageSize);
			console.log(contacts); // Check the fetched datas
		} catch (err) {
			error = err;
			isLoading = false;
		} finally {
			isLoading = false;
		}
	}
	const headers: DataTableHeader = [
		{ key: 'id', value: 'Id', width: '60px' },
		{ key: 'company', value: 'Company' },
		{ key: 'namelast', value: 'Last Name' },
		{ key: 'namefirst', value: 'First Name' },
		{ key: 'city', value: 'City' }
	];

	$: rows = contacts['hydra:member'].map((contact) => ({
		id: contact.id,
		company: contact.company ?? '',
		namelast: contact.namelast ?? '',
		namefirst: contact.namefirst ?? '',
		city: contact.city ?? ''
	}));

	$: totalItems = contacts['hydra:totalItems'];

	$: (page, pageSize), fetchContacts();
</script>

<DataTable {headers} {rows} {pageSize} {page}>
	<svelte:fragment slot="cell" let:row let:cell>
		{#if cell.key === 'id'}
			<a href="/contacts/{row.id}">{cell.value}</a>
		{:else}
			{cell.value}
		{/if}
	</svelte:fragment>
	<Toolbar>
		<ToolbarContent>
			<ToolbarSearch persistent value="" bind:filteredRowIds />
		</ToolbarContent>
	</Toolbar>
</DataTable>

<Pagination bind:pageSize bind:page bind:totalItems pageSizes={[15, 30, 50, 100]} />

[theetrain]

Hi @ChristianRiesen,

In order to paginate results loaded server-side, here's what needs to be done:

1. Use on:change instead of bind: in <Pagination /> to respond to events such as the user clicking on the 'next page' button.
2. Do not use <DataTable>'s page prop since that will paginate items already available in the table. In your case, there's only ever one page in the DataTable, but multiple pages represented in <Pagination>.
3. Make your API call or navigate the page if using SvelteKit's load method
4. When you reassign your rows and page values, your Pagination and DataTables will update.

Example code:

<script>
  import { goto } from '$app/navigation';
  import { DataTable, Pagination } from 'carbon-components-svelte';
  import 'carbon-components-svelte/css/white.css';

  export let data;

  const changePage = async (e) => {
    await goto(`?page=${e.detail.page}`);
  };
</script>

<h1>Server-paginated table</h1>

<DataTable headers={data.headers} rows={data.rows} />

<Pagination
  page={data.page}
  totalPages={data.totalPages}
  pageSize={5}
  totalItems={data.totalItems}
  pageSizes={[5]}
  on:change={changePage}
/>

Working demo using SvelteKit, load, and searchParams: https://www.sveltelab.dev/7qvtc7bpxjua7gv

[ChristianRiesen]

Thank you. This makes it obvious where I was going the wrong way. This works perfectly for me now.