fix: table pagination resets on data update

neurostuff · Sep 19, 2024 · b0f3394 · b0f3394
1 parent 21103b4
commit b0f3394
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTable.tsx
@@ -227,14 +227,12 @@ const ExtractionTable: React.FC = () => {
         getPaginationRowModel: getPaginationRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         onColumnFiltersChange: setColumnFilters,
+        autoResetPageIndex: false,
         state: {
             pagination: pagination,
             columnFilters: columnFilters,
             sorting: sorting,
         },
-        meta: {
-            studyStatusMap,
-        },
     });
 
     const handleRowsPerPageChange = useCallback(
@@ -294,6 +292,7 @@ const ExtractionTable: React.FC = () => {
                                             )}
                                             {header.column.getCanFilter() ? (
                                                 <ExtractionTableFilterInput
+                                                    table={table}
                                                     column={header.column}
                                                 />
                                             ) : (

diff --git a/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableFilterInput.tsx b/compose/neurosynth-frontend/src/pages/Extraction/components/ExtractionTableFilterInput.tsx
@@ -1,23 +1,25 @@
 import { Box } from '@mui/material';
-import { Column } from '@tanstack/react-table';
+import { Column, Table } from '@tanstack/react-table';
 import DebouncedTextField from 'components/DebouncedTextField';
 import { useCallback } from 'react';
 import { EExtractionStatus } from '../ExtractionPage';
 import { IExtractionTableStudy } from './ExtractionTable';
 import ExtractionTableJournalAutocomplete from './ExtractionTableJournalAutocomplete';
 import ExtractionTableStatusFilter from './ExtractionTableStatusFilter';
 
-const ExtractionTableFilterInput: React.FC<{ column: Column<IExtractionTableStudy, unknown> }> = ({
-    column,
-}) => {
+const ExtractionTableFilterInput: React.FC<{
+    table: Table<IExtractionTableStudy>;
+    column: Column<IExtractionTableStudy, unknown>;
+}> = ({ table, column }) => {
     const columnFilterValue = column.getFilterValue();
     const { filterVariant } = column.columnDef.meta ?? {};
 
     const handleChangeAutocomplete = useCallback(
         (event: string | null | undefined) => {
+            table.resetPageIndex();
             column.setFilterValue(event ?? null);
         },
-        [column]
+        [column, table]
     );
 
     if (filterVariant === 'status-select') {