Update addPagination.ts

Add server side pagination support

Author: blerrgh

src/lib/plugins/addPagination.ts

@@ -5,19 +5,26 @@ import { derived, writable, type Readable, type Updater, type Writable } from 's
 export interface PaginationConfig {
 	initialPageIndex?: number;
 	initialPageSize?: number;
+	serverSide?: boolean;
 }
 
 export interface PaginationState {
 	pageSize: Writable<number>;
 	pageIndex: Writable<number>;
 	pageCount: Readable<number>;
+	serverItemsCount: Writable<number>;
 	hasPreviousPage: Readable<boolean>;
 	hasNextPage: Readable<boolean>;
 }
 
 const MIN_PAGE_SIZE = 1;
 
-export const createPageStore = ({ items, initialPageSize, initialPageIndex }: PageStoreConfig) => {
+export const createPageStore = ({
+	items,
+	initialPageSize,
+	initialPageIndex,
+	serverSide,
+}: PageStoreConfig) => {
 	const pageSize = writable(initialPageSize);
 	const updatePageSize = (fn: Updater<number>) => {
 		pageSize.update(($pageSize) => {
@@ -26,19 +33,28 @@ export const createPageStore = ({ items, initialPageSize, initialPageIndex }: Pa
 		});
 	};
 	const setPageSize = (newPageSize: number) => updatePageSize(() => newPageSize);
+	
+	const pageIndex = writable(initialPageIndex);
 
-	const pageCount = derived([pageSize, items], ([$pageSize, $items]) => {
-		const $pageCount = Math.ceil($items.length / $pageSize);
+	let pageCount;
+	function calcPageCount([$pageSize, $itemsCount]: [$pageSize: number, $itemsCount: number]) {
+		const $pageCount = Math.ceil($itemsCount / $pageSize);
 		pageIndex.update(($pageIndex) => {
 			if ($pageCount > 0 && $pageIndex >= $pageCount) {
 				return $pageCount - 1;
 			}
 			return $pageIndex;
 		});
 		return $pageCount;
-	});
+	}
 
-	const pageIndex = writable(initialPageIndex);
+	const serverItemsCount = writable(0);
+	if (serverSide) {
+		pageCount = derived([pageSize, serverItemsCount], calcPageCount)
+	} else {
+		const itemCount = derived(items, ($items) => $items.length)
+		pageCount = derived([pageSize, itemCount], calcPageCount)
+	}
 
 	const hasPreviousPage = derived(pageIndex, ($pageIndex) => {
 		return $pageIndex > 0;
@@ -53,8 +69,9 @@ export const createPageStore = ({ items, initialPageSize, initialPageIndex }: Pa
 			update: updatePageSize,
 			set: setPageSize,
 		},
-		pageCount,
 		pageIndex,
+		pageCount,
+		serverItemsCount,
 		hasPreviousPage,
 		hasNextPage,
 	};
@@ -64,10 +81,15 @@ export interface PageStoreConfig {
 	items: Readable<unknown[]>;
 	initialPageSize?: number;
 	initialPageIndex?: number;
+	serverSide?: boolean;
 }
 
 export const addPagination =
-	<Item>({ initialPageIndex = 0, initialPageSize = 10 }: PaginationConfig = {}): TablePlugin<
+	<Item>({
+		initialPageIndex = 0,
+		initialPageSize = 10,
+		serverSide = false,
+	}: PaginationConfig = {}): TablePlugin<
 		Item,
 		PaginationState,
 		Record<string, never>,
@@ -76,26 +98,34 @@ export const addPagination =
 	() => {
 		const prePaginatedRows = writable<BodyRow<Item>[]>([]);
 		const paginatedRows = writable<BodyRow<Item>[]>([]);
-		const { pageSize, pageCount, pageIndex, hasPreviousPage, hasNextPage } = createPageStore({
-			items: prePaginatedRows,
-			initialPageIndex,
-			initialPageSize,
-		});
+		const { pageSize, pageIndex, pageCount, serverItemsCount, hasPreviousPage, hasNextPage } =
+			createPageStore({
+				items: prePaginatedRows,
+				initialPageIndex,
+				initialPageSize,
+				serverSide,
+			});
 		const pluginState: PaginationState = {
 			pageSize,
 			pageIndex,
 			pageCount,
+			serverItemsCount,
 			hasPreviousPage,
 			hasNextPage,
 		};
 
 		const derivePageRows: DeriveRowsFn<Item> = (rows) => {
 			return derived([rows, pageSize, pageIndex], ([$rows, $pageSize, $pageIndex]) => {
 				prePaginatedRows.set($rows);
-				const startIdx = $pageIndex * $pageSize;
-				const _paginatedRows = $rows.slice(startIdx, startIdx + $pageSize);
-				paginatedRows.set(_paginatedRows);
-				return _paginatedRows;
+				if (!serverSide) {
+					const startIdx = $pageIndex * $pageSize;
+					const _paginatedRows = $rows.slice(startIdx, startIdx + $pageSize);
+					paginatedRows.set(_paginatedRows);
+					return _paginatedRows;
+				} else {
+					paginatedRows.set($rows);
+					return $rows;
+				}
 			});
 		};