From 058c24d0c2fc19ae97d928793d56a5aa3da00e38 Mon Sep 17 00:00:00 2001 From: Maina Wycliffe Date: Thu, 15 Aug 2024 10:16:17 +0300 Subject: [PATCH] fix: fix pagination not working for the mantime tables Fixes #2187 --- package-lock.json | 18 ++++---- package.json | 4 +- .../JobsHistory/JobsHistorySettingsPage.tsx | 6 +-- .../JobsHistory/JobsHistoryTable.tsx | 43 ++++--------------- .../SchemaResourceEditJobsTab.tsx | 3 +- .../Hooks/useReactTablePaginationState.tsx | 4 +- src/ui/MRTDataTable/MRTDataTable.tsx | 23 +++++++--- 7 files changed, 41 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index e5f0339d2..9926e6234 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,7 +6,7 @@ "packages": { "": { "name": "@flanksource/flanksource-ui", - "version": "1.0.733", + "version": "1.0.735", "dependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@clerk/nextjs": "^5.3.0", @@ -29,7 +29,7 @@ "@tanstack/query-core": "^4.27.0", "@tanstack/react-query": "^4.0.9", "@tanstack/react-query-devtools": "^4.0.8", - "@tanstack/react-table": "^8.15.3", + "@tanstack/react-table": "^8.20.1", "@tanstack/react-virtual": "^3.0.0-beta.30", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", @@ -12753,11 +12753,11 @@ } }, "node_modules/@tanstack/react-table": { - "version": "8.15.3", - "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.15.3.tgz", - "integrity": "sha512-aocQ4WpWiAh7R+yxNp+DGQYXeVACh5lv2kk96DjYgFiHDCB0cOFoYMT/pM6eDOzeMXR9AvPoLeumTgq8/0qX+w==", + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.1.tgz", + "integrity": "sha512-PJK+07qbengObe5l7c8vCdtefXm8cyR4i078acWrHbdm8JKw1ES7YpmOtVt9ALUVEEFAHscdVpGRhRgikgFMbQ==", "dependencies": { - "@tanstack/table-core": "8.15.3" + "@tanstack/table-core": "8.20.1" }, "engines": { "node": ">=12" @@ -12788,9 +12788,9 @@ } }, "node_modules/@tanstack/table-core": { - "version": "8.15.3", - "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.15.3.tgz", - "integrity": "sha512-wOgV0HfEvuMOv8RlqdR9MdNNqq0uyvQtP39QOvGlggHvIObOE4exS+D5LGO8LZ3LUXxId2IlUKcHDHaGujWhUg==", + "version": "8.20.1", + "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.1.tgz", + "integrity": "sha512-5Ly5TIRHnWH7vSDell9B/OVyV380qqIJVg7H7R7jU4fPEmOD4smqAX7VRflpYI09srWR8aj5OLD2Ccs1pI5mTg==", "engines": { "node": ">=12" }, diff --git a/package.json b/package.json index f26ad3e2b..62c76b6e2 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "@tanstack/query-core": "^4.27.0", "@tanstack/react-query": "^4.0.9", "@tanstack/react-query-devtools": "^4.0.8", - "@tanstack/react-table": "^8.15.3", + "@tanstack/react-table": "^8.20.1", "@tanstack/react-virtual": "^3.0.0-beta.30", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^14.0.0", @@ -220,4 +220,4 @@ "msw": { "workerDirectory": "public" } -} +} \ No newline at end of file diff --git a/src/components/JobsHistory/JobsHistorySettingsPage.tsx b/src/components/JobsHistory/JobsHistorySettingsPage.tsx index d6f1bcbd7..f11ff60a8 100644 --- a/src/components/JobsHistory/JobsHistorySettingsPage.tsx +++ b/src/components/JobsHistory/JobsHistorySettingsPage.tsx @@ -9,8 +9,7 @@ import JobsHistoryTable from "./JobsHistoryTable"; export default function JobsHistorySettingsPage() { const [searchParams] = useSearchParams(); - const pageIndex = parseInt(searchParams.get("pageIndex") ?? "0"); - const pageSize = parseInt(searchParams.get("pageSize") ?? "150"); + const pageSize = parseInt(searchParams.get("pageSize") ?? "50"); const { data, isLoading, refetch, isRefetching } = useJobsHistoryForSettingQuery({ @@ -45,8 +44,7 @@ export default function JobsHistorySettingsPage() { jobs={jobs ?? []} isLoading={isLoading || isRefetching} pageCount={pageCount} - pageIndex={pageIndex} - pageSize={pageSize} + totalJobHistoryItems={totalEntries} /> diff --git a/src/components/JobsHistory/JobsHistoryTable.tsx b/src/components/JobsHistory/JobsHistoryTable.tsx index 268675ccb..84580e442 100644 --- a/src/components/JobsHistory/JobsHistoryTable.tsx +++ b/src/components/JobsHistory/JobsHistoryTable.tsx @@ -1,8 +1,5 @@ -import { PaginationOptions } from "@flanksource-ui/ui/DataTable"; -import useReactTableSortState from "@flanksource-ui/ui/DataTable/Hooks/useReactTableSortState"; import MRTDataTable from "@flanksource-ui/ui/MRTDataTable/MRTDataTable"; -import { useCallback, useMemo, useState } from "react"; -import { useSearchParams } from "react-router-dom"; +import { useCallback, useState } from "react"; import { JobsHistoryDetails } from "./JobsHistoryDetails"; import { JobsHistoryTableColumn as jobsHistoryTableColumn } from "./JobsHistoryTableColumn"; @@ -52,48 +49,20 @@ type JobsHistoryTableProps = { jobs: JobHistory[]; isLoading?: boolean; pageCount: number; - pageIndex: number; - pageSize: number; hiddenColumns?: string[]; + totalJobHistoryItems?: number; }; export default function JobsHistoryTable({ jobs, isLoading, pageCount, - pageIndex, - pageSize, - hiddenColumns = [] + hiddenColumns = [], + totalJobHistoryItems }: JobsHistoryTableProps) { - const [params, setParams] = useSearchParams(); const [isModalOpen, setIsModalOpen] = useState(false); const [selectedJob, setSelectedJob] = useState(); - const [tableSortByState, onSortByChanged] = useReactTableSortState(); - - const pagination: PaginationOptions = useMemo(() => { - return { - setPagination: (updater) => { - const newParams = - typeof updater === "function" - ? updater({ - pageIndex, - pageSize - }) - : updater; - params.set("pageIndex", newParams.pageIndex.toString()); - params.set("pageSize", newParams.pageSize.toString()); - setParams(params); - }, - pageIndex, - pageSize, - pageCount, - remote: true, - enable: true, - loading: isLoading - }; - }, [pageIndex, pageSize, pageCount, isLoading, params, setParams]); - const onRowClick = useCallback( (row: JobHistory) => { const jobId = row.id; @@ -114,6 +83,10 @@ export default function JobsHistoryTable({ isLoading={isLoading} onRowClick={onRowClick} enableServerSideSorting + enableServerSidePagination + manualPageCount={pageCount} + hiddenColumns={hiddenColumns} + totalRowCount={totalJobHistoryItems} /> {selectedJob && ( )} diff --git a/src/ui/DataTable/Hooks/useReactTablePaginationState.tsx b/src/ui/DataTable/Hooks/useReactTablePaginationState.tsx index 3e987de8a..02ef6e57e 100644 --- a/src/ui/DataTable/Hooks/useReactTablePaginationState.tsx +++ b/src/ui/DataTable/Hooks/useReactTablePaginationState.tsx @@ -16,8 +16,8 @@ export default function useReactTablePaginationState() { const updated = typeof param === "function" ? param({ - pageIndex: pageIndex, - pageSize: pageSize + pageIndex: pageIndex ?? 0, + pageSize: pageSize ?? 50 }) : param; params.set("pageIndex", updated.pageIndex.toString()); diff --git a/src/ui/MRTDataTable/MRTDataTable.tsx b/src/ui/MRTDataTable/MRTDataTable.tsx index d2ac06557..edd709c55 100644 --- a/src/ui/MRTDataTable/MRTDataTable.tsx +++ b/src/ui/MRTDataTable/MRTDataTable.tsx @@ -1,3 +1,4 @@ +import { VisibilityState } from "@tanstack/react-table"; import { MantineReactTable, MRT_ColumnDef, @@ -15,6 +16,12 @@ type MRTDataTableProps = {}> = { enableServerSideSorting?: boolean; enableServerSidePagination?: boolean; manualPageCount?: number; + hiddenColumns?: string[]; + /** + * The total number of rows in the dataset. This is used for server-side + * pagination to determine the total number of pages. + */ + totalRowCount?: number; }; export default function MRTDataTable = {}>({ @@ -25,7 +32,9 @@ export default function MRTDataTable = {}>({ disablePagination = false, enableServerSideSorting = false, enableServerSidePagination = false, - manualPageCount + manualPageCount, + totalRowCount, + hiddenColumns = [] }: MRTDataTableProps) { const { pageIndex, pageSize, setPageIndex } = useReactTablePaginationState(); const [sortState, setSortState] = useReactTableSortState(); @@ -50,6 +59,8 @@ export default function MRTDataTable = {}>({ manualSorting: enableServerSideSorting, manualPagination: enableServerSidePagination, pageCount: manualPageCount, + rowCount: totalRowCount, + autoResetPageIndex: false, onPaginationChange: setPageIndex, onSortingChange: setSortState, mantineTableBodyRowProps: ({ row }) => ({ @@ -75,15 +86,15 @@ export default function MRTDataTable = {}>({ density: "xs", pagination: { pageIndex, - pageSize: pageSize + pageSize }, sorting: sortState }, initialState: { - pagination: { - pageIndex: 0, - pageSize: pageSize - } + columnVisibility: hiddenColumns.reduce((acc: VisibilityState, column) => { + acc[column] = false; + return acc; + }, {}) }, mantinePaginationProps: { rowsPerPageOptions: ["50", "100", "200"]