Merge pull request #136 from sinamics/sort_pagination

Persist Pagesize, added more options to pagination menu

src/components/modules/networkTable.tsx

@@ -195,7 +195,7 @@ export const NetworkTable = ({ tableData = [] }) => {
 					</tbody>
 				</table>
 				<div className="flex flex-col items-center justify-between py-3 sm:flex-row">
-					<TableFooter table={table} />
+					<TableFooter table={table} page="networkTable" />
 				</div>
 			</div>
 		</div>

src/components/modules/table/memberHeaderColumns.tsx

@@ -28,8 +28,9 @@ const sortingMemberHex = (
 ): number => {
 	const a = rowA.original[columnId] as string;
 	const b = rowB.original[columnId] as string;
-	const numA = BigInt(`0x${a}`);
-	const numB = BigInt(`0x${b}`);
+
+	const numA = a ? BigInt(`0x${a}`) : a;
+	const numB = b ? BigInt(`0x${b}`) : b;
 
 	if (numA > numB) return 1;
 	if (numA < numB) return -1;

src/components/modules/table/networkMembersTable.tsx

@@ -33,6 +33,7 @@ interface IProp {
 }
 
 export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
+	// makeNetworkMemberData
 	const t = useTranslations("networkById");
 	const { query } = useRouter();
 	const [globalFilter, setGlobalFilter] = useState("");
@@ -60,12 +61,11 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
 		setData(networkById?.members ?? []);
 	}, [networkById?.members]);
 
-	// makeNetworkMemberData
+	// const [data, setData] = useState(() => makeNetworkMemberData(11));
 	const [data, setData] = useState(networkById?.members ?? []);
 	const columnsHeader = MemberHeaderColumns({ nwid, central });
 	const defaultColumn = MemberEditCell({ nwid, central });
 
-	// const [data, setData] = useState(() => makeNetworkMemberData(100));
 	const [autoResetPageIndex, skipAutoResetPageIndex] = useSkipper();
 	const table = useReactTable({
 		data,
@@ -109,6 +109,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
 		getFilteredRowModel: getFilteredRowModel(),
 		debugTable: false,
 	});
+
 	if (loadingNetworks) return <div>Loading</div>;
 	return (
 		<span className="rounded-xl pt-2">
@@ -212,7 +213,7 @@ export const NetworkMembersTable = ({ nwid, central = false }: IProp) => {
 				</tbody>
 			</table>
 			<div className="flex flex-col items-center justify-between py-3 sm:flex-row">
-				<TableFooter table={table} />
+				<TableFooter table={table} page="NetworkMembersTable" />
 			</div>
 		</span>
 	);

src/components/modules/tableFooter.tsx

@@ -1,5 +1,5 @@
 import { type Table } from "@tanstack/react-table";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 
 const BackForwardBtn = ({ table }: { table: Table<unknown> }) => (
@@ -35,10 +35,34 @@ const BackForwardBtn = ({ table }: { table: Table<unknown> }) => (
 	</>
 );
 
+const MIN_COUNT_TO_SHOW_FOOTER = 11;
+
 // rome-ignore lint/suspicious/noExplicitAny: <explanation>
-const TableFooter = ({ table }: { table: Table<any> }) => {
-	// In your component...
+const TableFooter = ({ table, page }: { table: Table<any>; page: string }) => {
 	const t = useTranslations("tableFooter"); // use the 'footer' namespace
+	const [pageSize, setPageSize] = useState<string | number>(
+		table.getState().pagination.pageSize,
+	);
+	const totalMembersCount = table?.options?.data?.length || 0;
+
+	useEffect(() => {
+		const savedPageSize = localStorage.getItem(`pageSize-${page}`);
+		setPageSize(savedPageSize || 10);
+		if (savedPageSize !== null) {
+			table.setPageSize(
+				savedPageSize === "all" ? table?.options?.data?.length : Number(savedPageSize),
+			);
+		}
+	}, []);
+
+	const storeLocalState = (pageSize) => {
+		table.setPageSize(pageSize === "all" ? totalMembersCount : Number(pageSize));
+		setPageSize(pageSize);
+		localStorage.setItem(`pageSize-${page}`, String(pageSize));
+	};
+	// dont show footer if there is only one page
+	if (totalMembersCount < MIN_COUNT_TO_SHOW_FOOTER) return null;
+
 	return (
 		<>
 			<div className="space-x-3 p-2">
@@ -47,16 +71,17 @@ const TableFooter = ({ table }: { table: Table<any> }) => {
 			<div className="space-x-3 p-2">
 				<select
 					className="select select-bordered select-sm"
-					value={table.getState().pagination.pageSize}
+					value={pageSize}
 					onChange={(e) => {
-						table.setPageSize(Number(e.target.value));
+						storeLocalState(e.target.value);
 					}}
 				>
-					{[10, 20, 30, 40, 50].map((pageSize) => (
+					{[10, 20, 30, 40, 50, 100].map((pageSize) => (
 						<option key={pageSize} value={pageSize}>
 							{t("show")} {pageSize}
 						</option>
 					))}
+					<option value="all">Show All</option>
 				</select>
 			</div>
 			<div className="space-x-3 p-2">

src/components/modules/ztCentral/centralNetworkTable.tsx

@@ -185,7 +185,7 @@ export const CentralNetworkTable = ({ tableData = [] }) => {
 					</tbody>
 				</table>
 				<div className="flex flex-col items-center justify-between py-3 sm:flex-row">
-					<TableFooter table={table} />
+					<TableFooter table={table} page="centralNetworkTable" />
 				</div>
 			</div>
 		</div>

src/utils/fakeData.ts

@@ -42,7 +42,7 @@ const newNetwork = (): Network => {
 const newMembers = (): Partial<MemberEntity> => {
 	return {
 		nwid: faker.string.uuid(),
-		id: faker.string.uuid(),
+		id: faker.string.hexadecimal({ length: 10 }).substring(2),
 		// online: faker.datatype.boolean(),
 		name: faker.person.firstName(),
 		// age: faker.datatype.number(40),