material-react-table 0.6.1 → 0.6.2

package/dist/useMRT.d.ts

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
 import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -8,6 +9,9 @@ export declare 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<SetStateAction<{

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.1",
+  "version": "0.6.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -20,7 +20,7 @@ import {
   Column,
   ColumnInstance,
   FilterType,
-  // ColumnInterface,
+  ColumnInterface,
   HeaderGroup,
   Row,
   TableInstance,
@@ -78,6 +78,7 @@ import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
+import { defaultFilterFNs } from './filtersFNs';
 
 export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
@@ -115,57 +116,60 @@ export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
     getToggleAllRowsExpandedProps: () => void;
   };
 
-export type MRT_ColumnInterface<D extends {} = {}> =
-  // ColumnInterface<D> &
+export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
   UseFiltersColumnOptions<D> &
-    UseGlobalFiltersColumnOptions<D> &
-    UseGroupByColumnOptions<D> &
-    UseResizeColumnsColumnOptions<D> &
-    UseSortByColumnOptions<D> & {
-      Edit?: ({
-        cell,
-        onChange,
-      }: {
-        cell: MRT_Cell<D>;
-        onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-      }) => ReactNode;
-      Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
-      Footer?: string;
-      Header?: string;
-      disableFilters?: boolean;
-      editable?: boolean;
-      filter?: MRT_FilterType | string | FilterType<D>;
-      filterSelectOptions?: (string | { text: string; value: string })[];
-      muiTableBodyCellEditTextFieldProps?:
-        | TextFieldProps
-        | ((cell: MRT_Cell<D>) => TextFieldProps);
-      muiTableBodyCellProps?:
-        | TableCellProps
-        | ((cell: MRT_Cell<D>) => TableCellProps);
-      muiTableFooterCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      muiTableHeadCellFilterTextFieldProps?:
-        | TextFieldProps
-        | ((column: Column<D>) => TextFieldProps);
-      muiTableHeadCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      onCellEditChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        cell: MRT_Cell<D>,
-      ) => void;
-      onFilterChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        filterValue: any,
-      ) => void;
-    };
+  UseGlobalFiltersColumnOptions<D> &
+  UseGroupByColumnOptions<D> &
+  UseResizeColumnsColumnOptions<D> &
+  UseSortByColumnOptions<D> & {
+    Edit?: ({
+      cell,
+      onChange,
+    }: {
+      cell: MRT_Cell<D>;
+      onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    }) => ReactNode;
+    Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
+    Footer?: string;
+    Header?: string;
+    accessor: string;
+    columns?: (Column<D> & MRT_ColumnInterface<D>)[];
+    disableFilters?: boolean;
+    editable?: boolean;
+    filter?: MRT_FilterType | string | FilterType<D>;
+    filterSelectOptions?: (string | { text: string; value: string })[];
+    filterTypes: MRT_FILTER_TYPE[];
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell: MRT_Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell: MRT_Cell<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    onCellEditChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      cell: MRT_Cell<D>,
+    ) => void;
+    onFilterChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      filterValue: any,
+    ) => void;
+  };
 
 export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
   UseFiltersColumnProps<D> &
   UseGroupByColumnProps<D> &
   UseResizeColumnsColumnProps<D> &
-  UseSortByColumnProps<D> & {
+  UseSortByColumnProps<D> &
+  MRT_ColumnInterface<D> & {
     columns?: MRT_ColumnInstance<D>[];
   };
 
@@ -185,7 +189,9 @@ export type MRT_Row<D extends {} = {}> = Row<D> &
 
 export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
-  UseRowStateCellProps<D> & {};
+  UseRowStateCellProps<D> & {
+    column: MRT_ColumnInstance<D>;
+  };
 
 export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
@@ -232,6 +238,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelection?: boolean;
+    filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
     hideToolbarBottom?: boolean;
@@ -362,6 +369,8 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
 
 export default <D extends {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
+  filterTypes,
+  globalFilter = 'fuzzy',
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -372,6 +381,9 @@ export default <D extends {}>({
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
     defaultColumn={defaultColumn}
+    // @ts-ignore
+    filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
+    globalFilter={globalFilter}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}

package/src/filtersFNs.ts

@@ -1,25 +1,15 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzySearchFN = (
-  rows: MRT_Row[],
-  columnIds: string[],
-  filterValue: string | number,
-) =>
-  matchSorter(rows, filterValue.toString().trim(), {
-    keys: columnIds.map((c) => `values.${c}`),
-    sorter: (rankedItems) => rankedItems,
-  });
-
-fuzzySearchFN.autoRemove = (val: any) => !val;
-
 export const fuzzyFilterFN = (
   rows: MRT_Row[],
-  id: string,
+  columnIds: string[] | string,
   filterValue: string | number,
 ) =>
   matchSorter(rows, filterValue.toString().trim(), {
-    keys: [`values.${id}`],
+    keys: Array.isArray(columnIds)
+      ? columnIds.map((c) => `values.${c}`)
+      : [`values.${columnIds}`],
     sorter: (rankedItems) => rankedItems,
   });
 
@@ -146,7 +136,6 @@ export const defaultFilterFNs = {
   endsWith: endsWithFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
-  globalFuzzy: fuzzySearchFN,
   greaterThan: greaterThanFilterFN,
   lessThan: lessThanFilterFN,
   notEmpty: notEmptyFilterFN,

package/src/inputs/MRT_FilterTextField.tsx

@@ -149,6 +149,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
               <Tooltip arrow title={localization.changeFilterMode}>
                 <span>
                   <IconButton
+                    aria-label={localization.changeFilterMode}
                     onClick={handleFilterMenuOpen}
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}

package/src/useMRT.tsx

@@ -22,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';
@@ -34,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<
@@ -83,16 +88,6 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     props.initialState?.showSearch ?? false,
   );
 
-  const filterTypes = useMemo<{
-    [key in MRT_FILTER_TYPE]: any;
-  }>(
-    () => ({
-      ...defaultFilterFNs,
-      ...props.filterTypes,
-    }),
-    [props.filterTypes],
-  );
-
   const findLowestLevelCols = useCallback(() => {
     let lowestLevelColumns: any[] = props.columns;
     let currentCols: any[] = props.columns;
@@ -123,25 +118,33 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
     ),
   );
 
-  const columns = useMemo(
-    () =>
-      findLowestLevelCols().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,
-      globalFilter: props.globalFilter ?? 'globalFuzzy',
+      columns,
       useControlledState: (state) =>
         useMemo(
           () => ({
@@ -167,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),