material-react-table 0.6.0 → 0.6.3

package/src/useMRT.tsx

@@ -1,12 +1,13 @@
 import React, {
   Context,
+  Dispatch,
   PropsWithChildren,
+  SetStateAction,
   createContext,
+  useCallback,
   useContext,
   useMemo,
   useState,
-  Dispatch,
-  SetStateAction,
 } from 'react';
 import {
   PluginHook,
@@ -21,18 +22,24 @@ 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';
+import { findLowestLevelCols } from './utils';
 
 export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
   anyRowsCanExpand: boolean;
   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,65 +89,63 @@ 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 = () => {
-    let lowestLevelColumns: any[] = props.columns;
-    let currentCols: any[] = props.columns;
-    while (!!currentCols.length && currentCols.some((col) => col.columns)) {
-      const nextCols = currentCols
-        .filter((col) => !!col.columns)
-        .map((col) => col.columns)
-        .flat();
-      if (nextCols.every((col) => !col.columns)) {
-        lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
-      }
-      currentCols = nextCols;
-    }
-    lowestLevelColumns = lowestLevelColumns.filter((col) => !col.columns);
-
-    return Object.assign(
+  const [currentFilterTypes, setCurrentFilterTypes] = useState<{
+    [key: string]: MRT_FilterType;
+  }>(() =>
+    Object.assign(
       {},
-      ...lowestLevelColumns.map((c) => ({
+      ...findLowestLevelCols(props.columns).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 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;
+      }),
+    [currentFilterTypes, props.filterTypes],
+  );
 
   const columns = useMemo(
+    () => applyFiltersToColumns(props.columns),
+    [props.columns, applyFiltersToColumns],
+  );
+
+  const data = useMemo(
     () =>
-      props.columns.map((column) => {
-        column.filter =
-          filterTypes[
-            currentFilterTypes[column.accessor as string] as MRT_FILTER_TYPE
-          ];
-        return column;
-      }),
-    [props.columns, filterTypes, currentFilterTypes],
+      !props.isLoading || !!props.data.length
+        ? props.data
+        : [...Array(10)].map((_) =>
+            Object.assign(
+              {},
+              ...findLowestLevelCols(props.columns).map((c) => ({
+                [c.accessor as string]: null,
+              })),
+            ),
+          ),
+    [props.data, props.isLoading],
   );
 
   const tableInstance = useTable(
+    // @ts-ignore
     {
       ...props,
-      columns,
       // @ts-ignore
-      filterTypes,
-      globalFilterValue: 'fuzzy',
+      columns,
+      data,
       useControlledState: (state) =>
         useMemo(
           () => ({
@@ -166,7 +171,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),

package/src/utils.ts

@@ -0,0 +1,17 @@
+import { MRT_ColumnInterface } from '.';
+
+export const findLowestLevelCols = (columns: MRT_ColumnInterface[]) => {
+  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
+  let currentCols: MRT_ColumnInterface[] | undefined = columns;
+  while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
+    const nextCols: MRT_ColumnInterface[] = currentCols
+      .filter((col) => !!col.columns)
+      .map((col) => col.columns)
+      .flat() as MRT_ColumnInterface[];
+    if (nextCols.every((col) => !col?.columns)) {
+      lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
+    }
+    currentCols = nextCols;
+  }
+  return lowestLevelColumns.filter((col) => !col.columns);
+};