Pagination

[ftognetto]

Describe the feature in detail (code, mocks, or screenshots encouraged)

I'm trying to create a pagination component to use with the datable.
If this can be useful for the library or simply for someone who is looking for a solution I have created a prototype that surely needs to be worked on but for now it fits my needs.
It uses svelte-headless-table and melt/ui so it fits the libraries used by shadcn-svelte

This Is the pagination component

<script lang="ts">
	import { createPagination } from '@melt-ui/svelte';
	import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-svelte';
	import type { PaginationState } from 'svelte-headless-table/lib/plugins/addPagination';

	// PaginationState
	export let state: PaginationState;
	const { hasNextPage, hasPreviousPage, pageCount, pageIndex, pageSize, serverItemCount } = state;

	// init Melt pagination
	const pagination = createPagination({
		count: $serverItemCount || $pageCount,
		perPage: $pageSize,
		defaultPage: $pageIndex,
		siblingCount: 1,
		onPageChange: (page) => {
			$pageIndex = page.next;
			return page.next;
		}
	});
	const {
		elements: { root, pageTrigger, prevButton, nextButton },
		states: { pages, range, page: currentPage }
	} = pagination;

	// Must be reactive because serverItemCount can change if the user filters the table
	$: {
		pagination.options.count.set($serverItemCount);
		pagination.states = pagination.states;
	}

	// Tailwind classes for buttons
	const paginationButtonClass =
		'flex items-center justify-center origin-center left-0 z-20 transition-transform !duration-300 min-w-9 w-9 h-9 text-sm rounded-lg bg-white text-gray-700 ring-1 ring-gray-200';
	const paginationButtonActiveClass =
		'flex items-center justify-center origin-center left-0 z-20 transition-transform !duration-300 min-w-9 w-9 h-9 text-sm rounded-lg bg-primary text-primary-foreground';
</script>

<nav
	{...$root}
	use:root
	class="flex items-center justify-center md:justify-between {$$props.class}"
>
	<p class="hidden md:block text-sm text-gray-700">
		Mostra dal {$range.start + 1} al {$range.end} di {$serverItemCount} risultati
	</p>
	<nav class="flex items-center gap-1" aria-label="Pagination">
		<button
			{...$prevButton}
			use:prevButton
			disabled={!$hasPreviousPage}
			class={paginationButtonClass}
		>
			<ChevronLeftIcon class="w-5 h-5" />
		</button>
		{#each $pages as page (page.key)}
			{#if page.type === 'ellipsis'}
				<span class={paginationButtonClass}>...</span>
			{:else}
				<button
					{...$pageTrigger(page)}
					use:pageTrigger
					class={$currentPage === page.value ? paginationButtonActiveClass : paginationButtonClass}
					>{page.value}</button
				>
			{/if}
		{/each}

		<button {...$nextButton} use:nextButton disabled={!$hasNextPage} class={paginationButtonClass}>
			<ChevronRightIcon class="w-5 h-5" />
		</button>
	</nav>
</nav>

It expect a PaginationState that comes from svelte-headless-table addPagination plugin.

---

This is an example of how I use it

+page.svelte

<script lang="ts">
	import { browser } from '$app/environment';
	import { goto } from '$app/navigation';
	import { page } from '$app/stores';
	import Pagination from '$lib/components/datatable/pagination.svelte';
	import Button from '$lib/components/ui/button/button.svelte';
	import Input from '$lib/components/ui/input/input.svelte';
	import TableBody from '$lib/components/ui/table/table-body.svelte';
	import TableCell from '$lib/components/ui/table/table-cell.svelte';
	import TableHead from '$lib/components/ui/table/table-head.svelte';
	import TableHeader from '$lib/components/ui/table/table-header.svelte';
	import TableRow from '$lib/components/ui/table/table-row.svelte';
	import Table from '$lib/components/ui/table/table.svelte';
	import { cn, debounce } from '$lib/utils.js';
	import { ArrowUpDown, PlusIcon } from 'lucide-svelte';
	import { Render, Subscribe, createTable } from 'svelte-headless-table';
	import { addPagination, addSortBy, addTableFilter } from 'svelte-headless-table/plugins';
	import { writable } from 'svelte/store';

	export let data;
	const paginatedData = writable(data.paginatedData.data);

	// Must be reactive because data can change if the user filters the table or change page etc...
	$: {
		$paginatedData = data.paginatedData.data;
		// Update also the serverItemCount. It can change if the user filters the table
		pluginStates.page.serverItemCount.set(data.paginatedData.count);
	}

	// Init svelte-headless-table as usual
	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'))
				: 1,
			initialPageSize: $page.url.searchParams.get('limit')
				? Number($page.url.searchParams.get('limit'))
				: 10
		}),
		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;
	// debounce is a helper function to debounce the filterValue
	const debouncedFilterValue = debounce(filterValue);

	$: {
		if (browser) {
			// do a fetch to get the data from the server when the user change page, sort or filter the table
			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));
			// goto +page.server.ts which download the data from the db
			goto(`?${q}`, { noScroll: true });
		}
	}
</script>

<!-- TABLE AS DATATABLE EXAMPLE IN SHADCN-SVELTE -->
<div class="w-full">
	<div class="flex items-center py-4 justify-between">
		<Input
			class="max-w-sm bg-white {$filterValue.length ? 'ring-1 ring-primary' : ''}"
			placeholder="Cerca..."
			type="text"
			bind:value={$filterValue}
		/>
		<Button slot="actions" type="button" on:click={() => goto('/seller/product/0')}>
			<PlusIcon class="h-4 w-4 mr-2" />
			Aggiungi nuovo prodotto
		</Button>
	</div>
	<div class="rounded-md border bg-white">
		<Table {...$tableAttrs}>
			<TableHeader>
				{#each $headerRows as headerRow}
					<Subscribe rowAttrs={headerRow.attrs()}>
						<TableRow class="bg-primary-500 hover:bg-primary-500 ">
							{#each headerRow.cells as cell (cell.id)}
								<Subscribe attrs={cell.attrs()} let:attrs props={cell.props()} let:props>
									<TableHead {...attrs} class="text-white first:rounded-tl-md last:rounded-tr-md">
										{#if !props.sort.disabled}
											<Button variant="ghost" on:click={props.sort.toggle} class="p-0">
												<Render of={cell.render()} />
												<ArrowUpDown
													class={cn(
														$sortKeys[0]?.id === cell.id && 'text-primary-100',
														'ml-2 h-4 w-4'
													)}
												/>
											</Button>
										{:else}
											<Render of={cell.render()} />
										{/if}
									</TableHead>
								</Subscribe>
							{/each}
						</TableRow>
					</Subscribe>
				{/each}
			</TableHeader>
			<TableBody {...$tableBodyAttrs}>
				{#each $pageRows as row (row.id)}
					<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
						<TableRow {...rowAttrs}>
							{#each row.cells as cell (cell.id)}
								<Subscribe attrs={cell.attrs()} let:attrs>
									<TableCell {...attrs}>
										{#if cell.id === 'amount'}
											<div class="text-right font-medium">
												<Render of={cell.render()} />
											</div>
										{:else if cell.id === 'status'}
											<div class="capitalize">
												<Render of={cell.render()} />
											</div>
										{:else}
											<Render of={cell.render()} />
										{/if}
									</TableCell>
								</Subscribe>
							{/each}
						</TableRow>
					</Subscribe>
				{/each}
			</TableBody>
		</Table>
	</div>
</div>

<!-- HERE I ADD THE PAGINATION PLUGIN -->
<Pagination state={pluginStates.page} class="py-4" />

+page.server.ts

export const load: PageServerLoad = async (event) => {
        // paginatedState() is an helper function that parse the current url and give back an object with page, limit, filters and sorts
	const _paginatedState = paginatedState(event.url);

        // download data from db based on paginatedState
	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 paginated data
	return {
		paginatedData: {
			data: pharmacyProduct,
			count
		}
	};
};

What type of pull request would this be?

Enhancement

Provide relevant links or additional information.

No response

[vcheeze]

@ftognetto not sure if you wrote this before the Pagination component was available. If not, what was the reason to not use that but to create your own component?