feat: custom pagination on all tables

client/src/components/tables/components/TachiTable.tsx

@@ -4,9 +4,10 @@ import Icon from "components/util/Icon";
 import SmallText from "components/util/SmallText";
 import { useZTable, ZTableSortFn } from "components/util/table/useZTable";
 import { UserSettingsContext } from "context/UserSettingsContext";
-import React, { useContext, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import { Button } from "react-bootstrap";
 import { integer } from "tachi-common";
+import Select from "components/util/Select";
 import FilterDirectivesIndicator from "./FilterDirectivesIndicator";
 import NoDataWrapper from "./NoDataWrapper";
 import PageSelector from "./PageSelector";
@@ -98,6 +99,16 @@ export default function TachiTable<D>({
 
 	const sortFunctions = GetSortFunctions(headers);
 
+	const ztable = useZTable(dataset ?? [], {
+		search,
+		searchFunction,
+		sortFunctions,
+		entryName,
+		pageLen,
+		defaultSortMode,
+		defaultReverseSort,
+	});
+
 	const {
 		window,
 		setPage,
@@ -111,15 +122,7 @@ export default function TachiTable<D>({
 		reverseSort,
 		changeSort,
 		filteredDataset,
-	} = useZTable(dataset ?? [], {
-		search,
-		searchFunction,
-		sortFunctions,
-		entryName,
-		pageLen,
-		defaultSortMode,
-		defaultReverseSort,
-	});
+	} = ztable;
 
 	const headersRow = ParseHeaders(headers, {
 		changeSort,
@@ -164,7 +167,18 @@ export default function TachiTable<D>({
 			</div>
 			<div className="col-12 px-0">
 				<div className="row">
-					<div className="col-lg-4 align-self-center">{displayStr}</div>
+					<div className="col-lg-4 align-self-center">
+						<Select
+							name={`Show this many ${entryName}:`}
+							value={ztable.pageLen.toString()}
+							setValue={(e) => ztable.setPageLen(Number(e))}
+						>
+							<option value="10">10</option>
+							<option value="25">25</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</Select>
+					</div>
 					<div className="d-none d-lg-flex col-lg-4 justify-content-center align-items-center">
 						{settings?.preferences.developerMode && (
 							<Button

client/src/components/util/table/useZTable.tsx

@@ -33,7 +33,7 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 	const {
 		search,
 		entryName,
-		pageLen,
+		pageLen: initialPageLen,
 		defaultReverseSort,
 		searchFunction,
 		sortFunctions,
@@ -41,6 +41,7 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 	} = options;
 
 	const [page, setPage] = useState(1);
+	const [pageLen, setPageLen] = useState(initialPageLen);
 
 	// what we're currently sorting on. If null, use natural order.
 	const [sortMode, setSortMode] = useState(defaultSortMode);
@@ -67,7 +68,7 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 		return mutatedSet;
 	}, [search, originalDataset, sortMode, reverseSort]);
 
-	const maxPage = useMemo(() => Math.ceil(dataset.length / pageLen), [dataset]);
+	const maxPage = useMemo(() => Math.ceil(dataset.length / pageLen), [dataset, pageLen]);
 
 	const pageState = useMemo(() => {
 		if ((page === maxPage && page === 1) || maxPage === 0) {
@@ -96,12 +97,12 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 		)} of ${dataset.length} ${entryName}${
 			search !== "" ? ` (Filtered from ${originalDataset.length})` : ""
 		}.`;
-	}, [page, dataset]);
+	}, [page, dataset, pageLen]);
 
 	// Create a sliding window that can be used for pagination.
 	const window = useMemo(
 		() => dataset.slice((page - 1) * pageLen, page * pageLen),
-		[page, dataset, search]
+		[page, dataset, search, pageLen]
 	);
 
 	// simple utilities for previous and next buttons
@@ -113,6 +114,11 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 		setPage(page - 1);
 	};
 
+	const setInnerPageLen = (pageLen: number) => {
+		setPageLen(pageLen);
+		setPage(1);
+	};
+
 	// utility for sorting
 	const changeSort = (sort: string) => {
 		if (sortMode === sort) {
@@ -137,5 +143,7 @@ export function useZTable<D>(originalDataset: D[], providedOptions?: Partial<ZTa
 		changeSort,
 		reverseSort,
 		filteredDataset: dataset,
+		pageLen,
+		setPageLen: setInnerPageLen,
 	};
 }