Pagination

Client pagination slices after search, filters and sorting, so the page count follows the filtered total. The page index is clamped: a filter that empties later pages moves the user to the last page that exists instead of showing nothing. Rows pinned through rowPinning stay at the top or bottom of every page and are not counted against the page size.

The pager announces its status line through a polite live region and names every button from the messages (first, previous, next, last, pageNumber). Between the arrows it shows numbered pages: the first, the last and the current page with its neighbours, with a gap icon where pages are left out; the current page carries aria-current="page". Below a 600px viewport the numbers and the page-size select are hidden and the arrows remain. The page-size select offers pageSizeOptions (default 10, 20, 50 and 100), the current size and, for a size of zero, the allRows option. Because paging is state, controls outside the table can drive it, and an application that pages on the server switches to manual mode with the same state object.

Client pagination

Client or server pagination with controlled page index and page size.

<script lang="ts">
	import { DataTable, defaultState, type TableState } from '@svelte-lean/table';
	import { memberColumns, pick } from '$lib/demo/columns';
	import { people } from '$lib/demo/data';

	const data = people(36);
	const columns = pick(memberColumns(), ['name', 'team', 'region', 'revenue']);
	let tableState = $state<Partial<TableState>>(defaultState({ pageSize: 5 }));
	const pages = $derived(Math.max(1, Math.ceil(data.length / (tableState.pageSize || data.length))));
</script>

<!-- A pager outside the table: Button primitives writing pageIndex into the same state. -->
<button type="button" data-slean="button" data-variant="outline" disabled={!tableState.pageIndex}
	onclick={() => (tableState = { ...tableState, pageIndex: (tableState.pageIndex ?? 0) - 1 })}>Previous</button>
<span>Page {(tableState.pageIndex ?? 0) + 1} of {pages}</span>
<button type="button" data-slean="button" data-variant="outline" disabled={(tableState.pageIndex ?? 0) >= pages - 1}
	onclick={() => (tableState = { ...tableState, pageIndex: (tableState.pageIndex ?? 0) + 1 })}>Next</button>

<DataTable
	{data}
	{columns}
	getRowId={(row) => row.id}
	bind:state={tableState}
	pageSizeOptions={[5, 10, 25]}
	label="Members"
/>

• Sorting, searching or filtering resets pageIndex to zero.
• The status line reads the filtered total, not the length of data.

Without a pager

Two different things: pagination={false} removes the pager and renders the whole model, while a page size of zero keeps the pager (and its size select) and shows every row.

<!-- Every row on one page, no pager. -->
<DataTable {data} {columns} getRowId={(row) => row.id} pagination={false} />

<!-- The pager stays, page size 0 shows every row and the select offers "All". -->
<DataTable {data} {columns} getRowId={(row) => row.id} state={defaultState({ pageSize: 0 })} />

Server pagination

With manual, the engine slices nothing: data is the page the server returned and rowCount is the total it reported. The state still changes when the user pages, so the application requests the next slice from it. An endpoint that reports only whether another page follows (a cursor) passes pageCount instead: the status line then leaves the total out, and the page message receives undefined as its row count. With a known rowCount the table also sets aria-rowcount and aria-rowindex, so assistive technology reads the row position within the whole result. The Server data page shows the loader and the stale-request guard.

<!-- The page is a slice the server produced; rowCount gives the page count. -->
<DataTable manual data={page.rows} rowCount={page.total} bind:state={tableState} {columns} getRowId={(row) => row.id} />

<!-- The server knows only whether another page follows: pageCount instead of rowCount. -->
<DataTable
	manual
	data={page.rows}
	pageCount={(tableState.pageIndex ?? 0) + (page.hasMore ? 2 : 1)}
	bind:state={tableState}
	{columns}
	getRowId={(row) => row.id}
/>

API

Related

• Server data
• Filtering
• State persistence