fix: pass serverItemSize as prop

Author: bryanmylee

docs/src/routes/docs/[...3]plugins/[...7]add-pagination/+page.md

@@ -64,6 +64,14 @@ If `true`, the pagination plugin will have no effect on the rows of the table. I
 
 _Defaults to `false`_.
 
+### `serverItemCount: Writable<number>`
+
+The total number of items expected from the server.
+
+When using server-side pagination, the number of items in `$data` only reflects the number of items in the page and not the number of total items. To calculate the right number of pages required, the plugin needs to know how many items in total are expected.
+
+_Required when `serverSide = true`_.
+
 ## Column Options
 
 :::callout
@@ -138,12 +146,6 @@ Whether a next page is available.
 
 The total number of pages derived from the number of rows and page size.
 
-### `serverItemCount: Writable<number>`
-
-The total number of items expected from the server.
-
-When using server-side pagination, the number of items in `$data` only reflects the number of items in the page and not the number of total items. To calculate the right number of pages required, the plugin needs to know how many items in total are expected.
-
 ## Examples
 
 ### Simple pagination

src/lib/plugins/addPagination.ts

@@ -2,17 +2,24 @@ import type { BodyRow } from '../bodyRows';
 import type { DeriveRowsFn, NewTablePropSet, TablePlugin } from '../types/TablePlugin';
 import { derived, writable, type Readable, type Updater, type Writable } from 'svelte/store';
 
-export interface PaginationConfig {
+export type PaginationConfig = {
 	initialPageIndex?: number;
 	initialPageSize?: number;
-	serverSide?: boolean;
-}
+} & (
+	| {
+			serverSide?: false | undefined;
+			serverItemCount?: undefined;
+	  }
+	| {
+			serverSide: true;
+			serverItemCount: Readable<number>;
+	  }
+);
 
 export interface PaginationState {
 	pageSize: Writable<number>;
 	pageIndex: Writable<number>;
 	pageCount: Readable<number>;
-	serverItemCount: Writable<number>;
 	hasPreviousPage: Readable<boolean>;
 	hasNextPage: Readable<boolean>;
 }
@@ -24,6 +31,7 @@ export const createPageStore = ({
 	initialPageSize,
 	initialPageIndex,
 	serverSide,
+	serverItemCount,
 }: PageStoreConfig) => {
 	const pageSize = writable(initialPageSize);
 	const updatePageSize = (fn: Updater<number>) => {
@@ -50,9 +58,8 @@ export const createPageStore = ({
 		return $pageCount;
 	}
 
-	const serverItemCount = writable(0);
 	let pageCount;
-	if (serverSide) {
+	if (serverSide && serverItemCount != null) {
 		pageCount = derived([pageSize, serverItemCount], calcPageCountAndLimitIndex);
 	} else {
 		const itemCount = derived(items, ($items) => $items.length);
@@ -85,13 +92,15 @@ export interface PageStoreConfig {
 	initialPageSize?: number;
 	initialPageIndex?: number;
 	serverSide?: boolean;
+	serverItemCount?: Readable<number>;
 }
 
 export const addPagination =
 	<Item>({
 		initialPageIndex = 0,
 		initialPageSize = 10,
 		serverSide = false,
+		serverItemCount,
 	}: PaginationConfig = {}): TablePlugin<
 		Item,
 		PaginationState,
@@ -101,18 +110,17 @@ export const addPagination =
 	() => {
 		const prePaginatedRows = writable<BodyRow<Item>[]>([]);
 		const paginatedRows = writable<BodyRow<Item>[]>([]);
-		const { pageSize, pageIndex, pageCount, serverItemCount, hasPreviousPage, hasNextPage } =
-			createPageStore({
-				items: prePaginatedRows,
-				initialPageIndex,
-				initialPageSize,
-				serverSide,
-			});
+		const { pageSize, pageIndex, pageCount, hasPreviousPage, hasNextPage } = createPageStore({
+			items: prePaginatedRows,
+			initialPageIndex,
+			initialPageSize,
+			serverSide,
+			serverItemCount,
+		});
 		const pluginState: PaginationState = {
 			pageSize,
 			pageIndex,
 			pageCount,
-			serverItemCount,
 			hasPreviousPage,
 			hasNextPage,
 		};

src/routes/+page.svelte

@@ -64,6 +64,7 @@
 		page: addPagination({
 			initialPageSize: 20,
 			serverSide: serverSide,
+			serverItemCount: readable(40) as any,
 		}),
 		resize: addResizedColumns(),
 		export: addDataExport(),
@@ -265,7 +266,7 @@
 	const { filterValues } = pluginStates.filter;
 	const { filterValue } = pluginStates.tableFilter;
 	const { selectedDataIds } = pluginStates.select;
-	const { pageIndex, pageCount, pageSize, hasPreviousPage, hasNextPage, serverItemCount } =
+	const { pageIndex, pageCount, pageSize, hasPreviousPage, hasNextPage } =
 		pluginStates.page;
 	const { expandedIds } = pluginStates.expand;
 	const { columnIdOrder } = pluginStates.orderColumns;
@@ -276,8 +277,6 @@
 	const { exportedData } = pluginStates.export;
 	const { exportedData: exportedJson } = pluginStates.exportJson;
 	const { exportedData: exportedCsv } = pluginStates.exportCsv;
-
-	$serverItemCount = 6;
 </script>
 
 <h1>svelte-headless-table</h1>
@@ -325,10 +324,11 @@
 										{/if}
 									</button>
 								{/if}
-								{#if props.filter !== undefined}
+								{#if props.filter?.render !== undefined}
 									<Render of={props.filter.render} />
 								{/if}
 								{#if !props.resize.disabled}
+									<!-- svelte-ignore a11y-click-events-have-key-events -->
 									<div class="resizer" on:click|stopPropagation use:props.resize.drag use:props.resize.reset />
 								{/if}
 							</th>