#114 Add option to show page index information by number of items displayed

Author: zxyctn

src/lib/components/Table/TableContent.svelte

@@ -57,6 +57,7 @@
 		toggle = false, // Whether to display the fitToScreen toggle
 		search = true, // Whether to display the search input
 		pageSizes = [5, 10, 20, 50, 100], // Page sizes to display in the pagination component
+		pageIndexStringType = 'pages', // pages by default
 		fitToScreen = true, // Whether to fit the table to the screen,
 		exportable = false, // Whether to display the export button and enable export functionality
 		server
@@ -780,10 +781,11 @@
 				{serverItemCount}
 				{updateTable}
 				{pageSizes}
+				{pageIndexStringType}
 				id={tableId}
 			/>
 		{:else}
-			<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
+			<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} {pageIndexStringType} />
 		{/if}
 	{/if}
 </div>

src/lib/components/Table/TablePagination.svelte

@@ -11,7 +11,10 @@
 
 	export let pageConfig;
 	export let pageSizes;
+	export let pageIndexStringType;
 	export let id;
+	
+	let indexInformation = '';
 
 	const { pageIndex, pageCount, pageSize, hasNextPage, hasPreviousPage } = pageConfig;
 
@@ -42,11 +45,22 @@
 		closeQuery: '.listbox-item'
 	};
 
+	const getIndexInfomationString = () => {
+		if (pageIndexStringType === 'pages') {
+			return $pageCount > 0 ? `Page ${$pageIndex + 1} of ${$pageCount}` : 'No pages';
+		} else {
+			return `Displaying items ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${
+				$pageCount * $pageSize
+			}`;
+		}
+	};
+
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 	$: goToNextPageDisabled = !$hasNextPage;
 	$: goToPreviousPageDisabled = !$hasPreviousPage;
 	$: $pageSize = pageSizeDropdownValue;
+	$: $pageCount, $pageIndex, $pageSize, (indexInformation = getIndexInfomationString());
 </script>
 
 <div class="flex justify-between w-full items-stretch gap-10">
@@ -124,12 +138,6 @@
 		>
 	</div>
 	<div class="flex justify-end items-center">
-		<span class="text-sm text-gray-500">
-			{#if $pageCount > 0}
-				Page {$pageIndex + 1} of {$pageCount}
-			{:else}
-				No pages
-			{/if}
-		</span>
+		<span class="text-sm text-gray-500">{indexInformation}</span>
 	</div>
 </div>

src/lib/components/Table/TablePaginationServer.svelte

@@ -10,6 +10,7 @@
 	export let id; // Unique table ID
 	export let pageIndex;
 	export let pageSize;
+	export let pageIndexStringType;
 	export let pageSizes; // Available page sizes
 	export let serverItemCount; // Total number of items expected from the server. `serverSide` must be true on table config.
 	export let updateTable; // Function to update table
@@ -20,6 +21,9 @@
 	let goToNextPageDisabled = true;
 	let goToPreviousPageDisabled = true;
 
+	// Index information string
+	let indexInformation = '';
+
 	// Handles the input change event
 	const handleChange = (e) => {
 		const value = e.target.value;
@@ -58,12 +62,23 @@
 		updateTable();
 	};
 
+	const getIndexInfomationString = () => {
+		if (pageIndexStringType === 'pages') {
+			return pageCount > 0 ? `Page ${$pageIndex + 1} of ${pageCount}` : 'No pages';
+		} else {
+			return `Showing ${$pageIndex * $pageSize + 1} - ${($pageIndex + 1) * $pageSize} of ${
+				pageCount * $pageSize
+			} items`;
+		}
+	};
+
 	$: pageCount = Math.ceil($serverItemCount / $pageSize);
 	$: goToFirstPageDisabled = !$pageIndex;
 	$: goToLastPageDisabled = $pageIndex == pageCount - 1;
 	$: goToNextPageDisabled = $pageIndex == pageCount - 1;
 	$: goToPreviousPageDisabled = !$pageIndex;
 	$: $pageSize && updateTable(); // Update query when page size changes
+	$: pageCount, $pageIndex, $pageSize, (indexInformation = getIndexInfomationString());
 
 	updateTable();
 </script>
@@ -127,15 +142,7 @@
 	</div>
 	<div class="flex justify-end items-center">
 		<span class="text-sm text-gray-500">
-			{#if pageCount > 0}
-				{#if pageCount == 1}
-					1 page
-				{:else}
-					{pageCount} pages
-				{/if}
-			{:else}
-				No pages
-			{/if}
+			{indexInformation}
 		</span>
 	</div>
 </div>

src/lib/models/Models.ts

@@ -127,6 +127,7 @@ export interface TableConfig<T> {
 	exportable?: boolean; // false by default
 	pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
 	defaultPageSize?: number; // 10 by default
+	pageIndexStringType?: 'items' | 'pages'; // pages by default
 	optionsComponent?: typeof SvelteComponent;
 
 	server?: ServerConfig;

src/routes/components/table/data/codeBlocks.ts

@@ -146,6 +146,7 @@ export const usersBDHTML = `
 	const usersBDConfig: TableConfig<UserBD> = {
 		id: 'usersBD',
 		data: usersBDStore,
+		pageIndexStringType: 'items',
 		columns: {
 			dateOfBirth: {
 				header: 'Date of birth',
@@ -213,6 +214,7 @@ export interface TableConfig<T> {
 	exportable?: boolean; // false by default
 	pageSizes?: number[]; // [5, 10, 20, 50, 100] by default
 	defaultPageSize?: number; // 10 by default
+	pageIndexStringType?: 'items' | 'pages'; // pages by default
 	optionsComponent?: typeof SvelteComponent;
 
 	server?: ServerConfig;

src/routes/components/table/docs/TableConfigDocs.svelte

@@ -190,6 +190,21 @@
 		</p>
 	</div>
 
+	<div class="items-center">
+		<div class="flex gap-2">
+			<div class="italic">pageIndexStringType:</div>
+			<div class="font-bold"><i>"items"</i> or <i>"pages"</i></div>
+		</div>
+
+		<p class="text-xl pl-10">
+			Whether the table should display page index information by number of items or pages. <code
+				class="!text-xl bg-tertiary-300 dark:bg-tertiary-700/50 rounded-md p-0.5 text-primary-500"
+				>"pages"</code
+			>
+			by default.
+		</p>
+	</div>
+
 	<div class="items-center">
 		<div class="flex gap-2">
 			<div class="italic">optionsComponent:</div>

src/routes/components/table/examples/TableDate.svelte

@@ -9,6 +9,7 @@
 	const usersBDConfig: TableConfig<UserBD> = {
 		id: 'usersBD',
 		data: usersBDStore,
+		pageIndexStringType: 'items',
 		columns: {
 			dateOfBirth: {
 				header: 'Date of birth',
@@ -24,7 +25,7 @@
 </script>
 
 <div id="usersBD">
-	<CodeContainer title="Date" svelte={usersBDHTML} data={usersBDStoreCode}>
+	<CodeContainer title="Date (+ page index type of items)" svelte={usersBDHTML} data={usersBDStoreCode}>
 		<Table config={usersBDConfig} />
 	</CodeContainer>
 </div>