fix: updating filters state from outside #157

Kuechlin · May 25, 2023 · 83055cd · 83055cd
1 parent 22bf93e
commit 83055cd
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 72 deletions.
diff --git a/docs/pages/examples/ResetFilterExample.tsx b/docs/pages/examples/ResetFilterExample.tsx
@@ -0,0 +1,71 @@
+import { Button, Stack } from '@mantine/core';
+import { useState } from 'react';
+import {
+  DataGrid,
+  DataGridFiltersState,
+  booleanFilterFn,
+  dateFilterFn,
+  highlightFilterValue,
+  numberFilterFn,
+  stringFilterFn,
+} from '../../../src';
+import { demoData } from '../../demoData';
+
+export default function ResetDefaultExample() {
+  const [filter, setFilter] = useState<DataGridFiltersState>([]);
+
+  return (
+    <Stack>
+      <Button disabled={filter.length === 0} onClick={() => setFilter([])}>
+        Reset Filters
+      </Button>
+      <DataGrid
+        data={demoData}
+        striped
+        highlightOnHover
+        withGlobalFilter
+        withPagination
+        withColumnFilters
+        withSorting
+        withColumnResizing
+        state={{
+          columnFilters: filter,
+        }}
+        onFilter={setFilter}
+        columns={[
+          {
+            accessorKey: 'text',
+            header: 'Text that is too long for a Header',
+            filterFn: stringFilterFn,
+            size: 300,
+            cell: highlightFilterValue,
+          },
+          {
+            header: 'Animal',
+            columns: [
+              { accessorKey: 'cat', filterFn: stringFilterFn },
+              {
+                accessorKey: 'fish',
+                filterFn: stringFilterFn,
+              },
+            ],
+          },
+          {
+            accessorKey: 'city',
+            filterFn: stringFilterFn,
+          },
+          { accessorKey: 'value', filterFn: numberFilterFn },
+          {
+            accessorKey: 'date',
+            cell: (cell) => cell.getValue<Date>()?.toLocaleDateString(),
+            filterFn: dateFilterFn,
+          },
+          {
+            accessorKey: 'bool',
+            filterFn: booleanFilterFn,
+          },
+        ]}
+      />
+    </Stack>
+  );
+}
diff --git a/docs/pages/examples/index.ts b/docs/pages/examples/index.ts
@@ -75,6 +75,10 @@ import NestedExample from './NestedExample';
 // @ts-ignore
 import NestedExampleCode from './NestedExample.tsx?raw';
 
+import ResetFilterExample from './ResetFilterExample';
+// @ts-ignore
+import ResetFilterExampleCode from './ResetFilterExample.tsx?raw';
+
 export type Example = {
   label: string;
   path: string;
@@ -192,4 +196,10 @@ export const examples = {
     element: NestedExample,
     code: NestedExampleCode,
   }),
+  reset: ex({
+    label: 'Reset Filter',
+    path: '/example/reset',
+    element: ResetFilterExample,
+    code: ResetFilterExampleCode,
+  }),
 };
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -10,6 +10,7 @@ import {
   RowSelectionState,
   SortingState,
   Table,
+  TableState,
   flexRender,
   functionalUpdate,
   getCoreRowModel,
@@ -170,88 +171,59 @@ export function DataGrid<TData extends RowData>({
     }
   }, [table, width, noFlexLayout, tableSize]);
 
-  const handleGlobalFilterChange: OnChangeFn<string> = useCallback(
-    (arg0) =>
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.globalFilter || '');
-        onSearch && onSearch(next);
-        return {
-          ...state,
-          globalFilter: next,
-        };
-      }),
-    [table, onSearch]
+  const handleChange = useCallback(
+    function change<T extends keyof TableState>(
+      key: T,
+      handler?: (value: TableState[T]) => void
+    ): OnChangeFn<TableState[T]> {
+      return (arg0) => {
+        if (state && state[key]) {
+          const next = functionalUpdate(arg0, state[key]);
+          handler && handler(next);
+        } else {
+          table.setState((state) => {
+            const next = functionalUpdate(arg0, state[key]);
+            handler && handler(next);
+            return {
+              ...state,
+              [key]: next,
+            };
+          });
+        }
+      };
+    },
+    [state, table]
   );
 
-  const handleSortingChange: OnChangeFn<SortingState> = useCallback(
-    (arg0) =>
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.sorting);
-        onSort && onSort(next);
-        return {
-          ...state,
-          sorting: next,
-        };
-      }),
-    [table, onSort]
-  );
+  const handleGlobalFilterChange: OnChangeFn<string> = useCallback(handleChange('globalFilter', onSearch), [
+    handleChange,
+    onSearch,
+  ]);
+
+  const handleSortingChange: OnChangeFn<SortingState> = useCallback(handleChange('sorting', onSort), [
+    handleChange,
+    onSort,
+  ]);
 
   const handleColumnFiltersChange: OnChangeFn<ColumnFiltersState> = useCallback(
-    (arg0) =>
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.columnFilters);
-        onFilter && onFilter(next);
-        return {
-          ...state,
-          columnFilters: next,
-        };
-      }),
-    [table, onFilter]
+    handleChange('columnFilters', onFilter),
+    [handleChange, onFilter]
   );
 
-  const handlePaginationChange: OnChangeFn<PaginationState> = useCallback(
-    (arg0) => {
-      const pagination = table.getState().pagination;
-      const next = functionalUpdate(arg0, pagination);
-      if (next.pageIndex !== pagination.pageIndex || next.pageSize !== pagination.pageSize) {
-        onPageChange && onPageChange(next);
-        table.setState((state) => ({
-          ...state,
-          pagination: next,
-        }));
-      }
-    },
-    [table, onPageChange]
-  );
+  const handlePaginationChange: OnChangeFn<PaginationState> = useCallback(handleChange('pagination', onPageChange), [
+    handleChange,
+    onPageChange,
+  ]);
 
   const handleRowSelectionChange: OnChangeFn<RowSelectionState> = useCallback(
-    (arg0) => {
-      table.setState(() => {
-        const state = table.getState();
-        const next = functionalUpdate(arg0, state.rowSelection);
-        onRowSelectionChange && onRowSelectionChange(next);
-        return {
-          ...state,
-          rowSelection: next,
-        };
-      });
-    },
-    [table, onRowSelectionChange]
+    handleChange('rowSelection', onRowSelectionChange),
+    [handleChange, onRowSelectionChange]
   );
 
-  const handleExpandedChange: OnChangeFn<ExpandedState> = useCallback(
-    (arg0) => {
-      table.setState((state) => {
-        const next = functionalUpdate(arg0, state.expanded);
-        onExpandedChange && onExpandedChange(next);
-        return {
-          ...state,
-          expanded: next,
-        };
-      });
-    },
-    [table, onExpandedChange]
-  );
+  const handleExpandedChange: OnChangeFn<ExpandedState> = useCallback(handleChange('expanded', onExpandedChange), [
+    handleChange,
+    onExpandedChange,
+  ]);
 
   const pageCount = withPagination && total ? Math.ceil(total / table.getState().pagination.pageSize) : undefined;