Fix table issues

2 files changed, 32 insertions, 20 deletions

diff --git a/frontend/src/components/tables/BaseTable.tsx b/frontend/src/components/tables/BaseTable.tsx
index a3ba1a2f3..d378d6f56 100644
--- a/frontend/src/components/tables/BaseTable.tsx
+++ b/frontend/src/components/tables/BaseTable.tsx
@@ -55,7 +55,8 @@ function DefaultRowRenderer<T extends object>(row: Row<T>): JSX.Element | null {
 export default function BaseTable<T extends object>(props: BaseTableProps<T>) {
   const {
     headerGroups,
-    rows,
+    rows: tableRows,
+    page: tablePages,
     prepareRow,
     getTableProps,
     getTableBodyProps,
@@ -74,6 +75,9 @@ export default function BaseTable<T extends object>(props: BaseTableProps<T>) {
     );
   }, [headerGroups]);
 
+  // Switch to usePagination plugin if enabled
+  const rows = tablePages ?? tableRows;
+
   const empty = rows.length === 0;
 
   const [pageSize] = usePageSize();
diff --git a/frontend/src/components/tables/PageTable.tsx b/frontend/src/components/tables/PageTable.tsx
index 0df1959e4..bc43b25e0 100644
--- a/frontend/src/components/tables/PageTable.tsx
+++ b/frontend/src/components/tables/PageTable.tsx
@@ -1,9 +1,10 @@
 import { ScrollToTop } from "@/utilities";
-import { useEffect, useRef } from "react";
-import { TableInstance, usePagination } from "react-table";
+import { useEffect } from "react";
+import { usePagination, useTable } from "react-table";
+import BaseTable from "./BaseTable";
 import PageControl from "./PageControl";
 import { useDefaultSettings } from "./plugins";
-import SimpleTable, { SimpleTableProps } from "./SimpleTable";
+import { SimpleTableProps } from "./SimpleTable";
 
 type Props<T extends object> = SimpleTableProps<T> & {
   autoScroll?: boolean;
@@ -12,33 +13,40 @@ type Props<T extends object> = SimpleTableProps<T> & {
 const tablePlugins = [useDefaultSettings, usePagination];
 
 export default function PageTable<T extends object>(props: Props<T>) {
-  const { autoScroll, plugins, ...remain } = props;
+  const { autoScroll = true, plugins, instanceRef, ...options } = props;
 
-  const instance = useRef<TableInstance<T> | null>(null);
+  const instance = useTable(
+    options,
+    useDefaultSettings,
+    ...tablePlugins,
+    ...(plugins ?? [])
+  );
+
+  if (instanceRef) {
+    instanceRef.current = instance;
+  }
 
   // Scroll to top when page is changed
   useEffect(() => {
     if (autoScroll) {
       ScrollToTop();
     }
-  }, [instance.current?.state.pageIndex, autoScroll]);
+  }, [instance.state.pageIndex, autoScroll]);
 
   return (
     <>
-      <SimpleTable
-        {...remain}
-        instanceRef={instance}
+      <BaseTable
+        {...options}
+        {...instance}
         plugins={[...tablePlugins, ...(plugins ?? [])]}
-      ></SimpleTable>
-      {instance.current && (
-        <PageControl
-          count={instance.current.pageCount}
-          index={instance.current.state.pageIndex}
-          size={instance.current.state.pageSize}
-          total={instance.current.rows.length}
-          goto={instance.current.gotoPage}
-        ></PageControl>
-      )}
+      ></BaseTable>
+      <PageControl
+        count={instance.pageCount}
+        index={instance.state.pageIndex}
+        size={instance.state.pageSize}
+        total={instance.rows.length}
+        goto={instance.gotoPage}
+      ></PageControl>
     </>
   );
 }