fix: fix pagination not working for the mantime tables

Fixes #2187
flanksource · Aug 18, 2024 · 058c24d · 058c24d
1 parent c415667
commit 058c24d
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 60 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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"
   }
-}
+}
diff --git 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}
           />
         </div>
       </SearchLayout>

diff --git 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<JobHistory>();
 
-  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 && (
         <JobsHistoryDetails

diff --git a/src/components/SchemaResourcePage/SchemaResourceEditJobsTab.tsx b/src/components/SchemaResourcePage/SchemaResourceEditJobsTab.tsx
@@ -47,8 +47,7 @@ export function SchemaResourceJobsTab({
           jobs={jobs ?? []}
           isLoading={isLoading}
           pageCount={pageCount}
-          pageIndex={pageIndex}
-          pageSize={pageSize}
+          totalJobHistoryItems={totalEntries}
           hiddenColumns={["resource_id", "resource_type", "resource_name"]}
         />
       )}

diff --git 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
@@ -1,3 +1,4 @@
+import { VisibilityState } from "@tanstack/react-table";
 import {
   MantineReactTable,
   MRT_ColumnDef,
@@ -15,6 +16,12 @@ type MRTDataTableProps<T extends Record<string, any> = {}> = {
   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<T extends Record<string, any> = {}>({
@@ -25,7 +32,9 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
   disablePagination = false,
   enableServerSideSorting = false,
   enableServerSidePagination = false,
-  manualPageCount
+  manualPageCount,
+  totalRowCount,
+  hiddenColumns = []
 }: MRTDataTableProps<T>) {
   const { pageIndex, pageSize, setPageIndex } = useReactTablePaginationState();
   const [sortState, setSortState] = useReactTableSortState();
@@ -50,6 +59,8 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
     manualSorting: enableServerSideSorting,
     manualPagination: enableServerSidePagination,
     pageCount: manualPageCount,
+    rowCount: totalRowCount,
+    autoResetPageIndex: false,
     onPaginationChange: setPageIndex,
     onSortingChange: setSortState,
     mantineTableBodyRowProps: ({ row }) => ({
@@ -75,15 +86,15 @@ export default function MRTDataTable<T extends Record<string, any> = {}>({
       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"]