material-react-table 0.5.9 → 0.6.2

package/src/useMRT.tsx

@@ -7,6 +7,7 @@ import React, {
   useState,
   Dispatch,
   SetStateAction,
+  useCallback,
 } from 'react';
 import {
   PluginHook,
@@ -21,9 +22,13 @@ import {
   useSortBy,
   useTable,
 } from 'react-table';
-import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import type {
+  MRT_ColumnInterface,
+  MRT_FilterType,
+  MRT_Row,
+  MRT_TableInstance,
+} from '.';
 import { MRT_FILTER_TYPE } from './enums';
-import { defaultFilterFNs } from './filtersFNs';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -33,6 +38,7 @@ export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsExpanded: boolean;
   icons: MRT_Icons;
   idPrefix: string;
+  filterTypes: { [key in MRT_FILTER_TYPE]: any };
   localization: MRT_Localization;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
   setCurrentFilterTypes: Dispatch<
@@ -82,17 +88,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     props.initialState?.showSearch ?? false,
   );
 
-  const filterTypes = useMemo<{
-    [key in MRT_FILTER_TYPE]: any;
-  }>(
-    () => ({
-      ...defaultFilterFNs,
-      ...props.filterTypes,
-    }),
-    [props.filterTypes],
-  );
-
-  const getInitialFilterTypeState = () => {
+  const findLowestLevelCols = useCallback(() => {
     let lowestLevelColumns: any[] = props.columns;
     let currentCols: any[] = props.columns;
     while (!!currentCols.length && currentCols.some((col) => col.columns)) {
@@ -105,42 +101,50 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
       }
       currentCols = nextCols;
     }
-    lowestLevelColumns = lowestLevelColumns.filter((col) => !col.columns);
+    return lowestLevelColumns.filter((col) => !col.columns);
+  }, [props.columns]);
 
-    return Object.assign(
+  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
+    [key: string]: MRT_FilterType;
+  }>(() =>
+    Object.assign(
       {},
-      ...lowestLevelColumns.map((c) => ({
+      ...findLowestLevelCols().map((c) => ({
         [c.accessor as string]:
           c.filter ??
           props?.initialState?.filters?.[c.accessor as any] ??
           (!!c.filterSelectOptions ? 'equals' : 'fuzzy'),
       })),
-    );
-  };
-
-  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
-    [key: string]: MRT_FilterType;
-  }>(() => getInitialFilterTypeState());
+    ),
+  );
 
-  const columns = useMemo(
-    () =>
-      props.columns.map((column) => {
-        column.filter =
-          filterTypes[
-            currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
-          ];
+  const applyFiltersToColumns = useCallback(
+    (cols: MRT_ColumnInterface[]) =>
+      cols.map((column) => {
+        if (column.columns) {
+          applyFiltersToColumns(column.columns);
+        } else {
+          column.filter =
+            props?.filterTypes?.[
+              currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
+            ];
+        }
         return column;
       }),
-    [props.columns, filterTypes, currentFilterTypes],
+    [currentFilterTypes, props.filterTypes],
+  );
+
+  const columns = useMemo(
+    () => applyFiltersToColumns(props.columns),
+    [props.columns, applyFiltersToColumns],
   );
 
   const tableInstance = useTable(
+    // @ts-ignore
     {
       ...props,
-      columns,
       // @ts-ignore
-      filterTypes,
-      globalFilterValue: 'fuzzy',
+      columns,
       useControlledState: (state) =>
         useMemo(
           () => ({
@@ -166,7 +170,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
         ),
     },
     ...hooks,
-  ) as MRT_TableInstance<D>;
+  ) as unknown as MRT_TableInstance<D>;
 
   const idPrefix = useMemo(
     () => props.idPrefix ?? Math.random().toString(36).substring(2, 9),