material-react-table 0.9.7 → 0.12.0

package/src/inputs/MRT_FilterTextField.tsx

@@ -15,31 +15,33 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import type { MRT_Header, MRT_TableInstance } from '..';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { MRT_FILTER_OPTION } from '../enums';
+import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
   inputIndex?: number;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({
   header,
   inputIndex,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
     options: {
+      enabledColumnFilterOptions,
       icons: { FilterListIcon, CloseIcon },
-      tableId,
       localization,
       muiTableHeadCellFilterTextFieldProps,
+      onColumnFilterValueChanged,
+      onColumnFilterValueChangedDebounced,
+      tableId,
     },
     setCurrentFilterFns,
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 
@@ -51,14 +53,14 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps({ column, tableInstance })
+      ? muiTableHeadCellFilterTextFieldProps({ column, instance })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
     columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
       ? columnDef.muiTableHeadCellFilterTextFieldProps({
           column,
-          tableInstance,
+          instance,
         })
       : columnDef.muiTableHeadCellFilterTextFieldProps;
 
@@ -74,20 +76,45 @@ export const MRT_FilterTextField: FC<Props> = ({
   );
 
   const handleChangeDebounced = useCallback(
-    debounce(
-      (event: ChangeEvent<HTMLInputElement>) =>
-        inputIndex !== undefined
-          ? column.setFilterValue((old: [string, string]) => {
-              const newFilterValues = old ?? ['', ''];
-              newFilterValues[inputIndex] = event.target.value;
-              return newFilterValues;
-            })
-          : column.setFilterValue(event.target.value ?? undefined),
-      150,
-    ),
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
+      if (inputIndex !== undefined) {
+        column.setFilterValue((old: [string, string]) => {
+          const newFilterValues = old ?? ['', ''];
+          newFilterValues[inputIndex] = event.target.value;
+          return newFilterValues;
+        });
+      } else {
+        column.setFilterValue(event.target.value ?? undefined);
+      }
+      onColumnFilterValueChangedDebounced?.({
+        column,
+        event,
+        filterValue: event.target.value,
+      });
+      columnDef.onColumnFilterValueChangedDebounced?.({
+        column,
+        event,
+        filterValue: event.target.value,
+      });
+    }, 200),
     [],
   );
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setFilterValue(event.target.value);
+    handleChangeDebounced(event);
+    onColumnFilterValueChanged?.({
+      column,
+      event,
+      filterValue: event.target.value,
+    });
+    columnDef.onColumnFilterValueChanged?.({
+      column,
+      event,
+      filterValue: event.target.value,
+    });
+  };
+
   const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -110,12 +137,12 @@ export const MRT_FilterTextField: FC<Props> = ({
     column.setFilterValue(undefined);
     setCurrentFilterFns((prev) => ({
       ...prev,
-      [header.id]: MRT_FILTER_OPTION.FUZZY,
+      [header.id]: 'fuzzy',
     }));
   };
 
   if (columnDef.Filter) {
-    return <>{columnDef.Filter?.({ header, tableInstance })}</>;
+    return <>{columnDef.Filter?.({ header, instance })}</>;
   }
 
   const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
@@ -124,10 +151,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   const filterFn = currentFilterFns?.[header.id];
   const isSelectFilter = !!columnDef.filterSelectOptions;
   const filterChipLabel =
-    !(filterFn instanceof Function) &&
-    [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(
-      filterFn as MRT_FILTER_OPTION,
-    )
+    !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn)
       ? //@ts-ignore
         localization[
           `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
@@ -145,6 +169,9 @@ export const MRT_FilterTextField: FC<Props> = ({
       ? localization.max
       : '';
 
+  const allowedColumnFilterOptions =
+    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+
   return (
     <>
       <TextField
@@ -159,7 +186,9 @@ export const MRT_FilterTextField: FC<Props> = ({
           title: filterPlaceholder,
         }}
         helperText={
-          !inputIndex ? (
+          !inputIndex &&
+          (allowedColumnFilterOptions === undefined ||
+            (allowedColumnFilterOptions?.length ?? 0) > 0) ? (
             <label htmlFor={filterId}>
               {filterFn instanceof Function
                 ? localization.filterMode.replace(
@@ -196,37 +225,37 @@ export const MRT_FilterTextField: FC<Props> = ({
         placeholder={
           filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
         }
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setFilterValue(event.target.value);
-          handleChangeDebounced(event);
-        }}
+        onChange={handleChange}
         onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
         select={isSelectFilter}
         value={filterValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment: !isSelectFilter && !inputIndex && (
-            <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeFilterMode}>
-                <span>
-                  <IconButton
-                    aria-label={localization.changeFilterMode}
-                    onClick={handleFilterMenuOpen}
-                    size="small"
-                    sx={{ height: '1.75rem', width: '1.75rem' }}
-                  >
-                    <FilterListIcon />
-                  </IconButton>
-                </span>
-              </Tooltip>
-              {filterChipLabel && (
-                <Chip
-                  onDelete={handleClearFilterChip}
-                  label={filterChipLabel}
-                />
-              )}
-            </InputAdornment>
-          ),
+          startAdornment: !isSelectFilter &&
+            !inputIndex &&
+            (allowedColumnFilterOptions === undefined ||
+              (allowedColumnFilterOptions?.length ?? 0) > 0) && (
+              <InputAdornment position="start">
+                <Tooltip arrow title={localization.changeFilterMode}>
+                  <span>
+                    <IconButton
+                      aria-label={localization.changeFilterMode}
+                      onClick={handleFilterMenuOpen}
+                      size="small"
+                      sx={{ height: '1.75rem', width: '1.75rem' }}
+                    >
+                      <FilterListIcon />
+                    </IconButton>
+                  </span>
+                </Tooltip>
+                {filterChipLabel && (
+                  <Chip
+                    onDelete={handleClearFilterChip}
+                    label={filterChipLabel}
+                  />
+                )}
+              </InputAdornment>
+            ),
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip
@@ -292,7 +321,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         anchorEl={anchorEl}
         header={header}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </>
   );

package/src/inputs/MRT_SearchTextField.tsx

@@ -17,10 +17,10 @@ import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
+export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
   const {
     getState,
     setGlobalFilter,
@@ -29,23 +29,30 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onMrtGlobalFilterValueChange,
+      onGlobalFilterValueChanged,
+      onGlobalFilterValueChangedDebounced,
     },
-  } = tableInstance;
+  } = instance;
 
   const { globalFilter, showGlobalFilter } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
-  const handleChange = useCallback(
+  const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
       setGlobalFilter(event.target.value ?? undefined);
-      onMrtGlobalFilterValueChange?.({ event, tableInstance });
-    }, 200),
+      onGlobalFilterValueChangedDebounced?.({ event, instance });
+    }, 250),
     [],
   );
 
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setSearchValue(event.target.value);
+    handleChangeDebounced(event);
+    onGlobalFilterValueChanged?.({ event, instance });
+  };
+
   const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);
   };
@@ -57,7 +64,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
 
   const textFieldProps =
     muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ tableInstance })
+      ? muiSearchTextFieldProps({ instance })
       : muiSearchTextFieldProps;
 
   return (
@@ -65,10 +72,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       <TextField
         id={`mrt-${tableId}-search-text-field`}
         placeholder={localization.search}
-        onChange={(event: ChangeEvent<HTMLInputElement>) => {
-          setSearchValue(event.target.value);
-          handleChange(event);
-        }}
+        onChange={handleChange}
         value={searchValue ?? ''}
         variant="standard"
         InputProps={{
@@ -108,7 +112,7 @@ export const MRT_SearchTextField: FC<Props> = ({ tableInstance }) => {
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
-        tableInstance={tableInstance}
+        instance={instance}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -5,14 +5,10 @@ import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
   row?: MRT_Row;
   selectAll?: boolean;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
-export const MRT_SelectCheckbox: FC<Props> = ({
-  row,
-  selectAll,
-  tableInstance,
-}) => {
+export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
   const {
     getRowModel,
     getSelectedRowModel,
@@ -20,29 +16,29 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     options: {
       localization,
       muiSelectCheckboxProps,
-      onMrtSelectRowChange,
-      onMrtSelectAllChange,
+      onRowSelectionChanged,
+      onRowSelectAllChanged,
       selectAllMode,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
   const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       if (selectAllMode === 'all') {
-        tableInstance.getToggleAllRowsSelectedHandler()(event as any);
+        instance.getToggleAllRowsSelectedHandler()(event as any);
       } else if (selectAllMode === 'page') {
-        tableInstance.getToggleAllPageRowsSelectedHandler()(event as any);
+        instance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
-      onMrtSelectAllChange?.({
+      onRowSelectAllChanged?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
-        tableInstance,
+        instance,
       });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onMrtSelectRowChange?.({
+      onRowSelectionChanged?.({
         event,
         row,
         selectedRows: event.target.checked
@@ -50,14 +46,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({
           : getSelectedRowModel().flatRows.filter(
               (selectedRow) => selectedRow.id !== row.id,
             ),
-        tableInstance,
+        instance,
       });
     }
   };
 
   const checkboxProps =
     muiSelectCheckboxProps instanceof Function
-      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, tableInstance })
+      ? muiSelectCheckboxProps({ isSelectAll: !!selectAll, row, instance })
       : muiSelectCheckboxProps;
 
   return (
@@ -71,13 +67,11 @@ export const MRT_SelectCheckbox: FC<Props> = ({
     >
       <Checkbox
         checked={
-          selectAll
-            ? tableInstance.getIsAllRowsSelected()
-            : row?.getIsSelected()
+          selectAll ? instance.getIsAllRowsSelected() : row?.getIsSelected()
         }
         indeterminate={
           selectAll
-            ? tableInstance.getIsSomeRowsSelected()
+            ? instance.getIsSomeRowsSelected()
             : row?.getIsSomeSelected()
         }
         inputProps={{

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -20,14 +20,14 @@ interface Props {
   anchorEl: HTMLElement | null;
   header: MRT_Header;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_ColumnActionMenu: FC<Props> = ({
   anchorEl,
   header,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -56,7 +56,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       localization,
     },
     setShowFilters,
-  } = tableInstance;
+  } = instance;
 
   const { column } = header;
 
@@ -249,7 +249,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             key={2}
             onSelect={handleFilterByColumn}
             setAnchorEl={setFilterMenuAnchorEl}
-            tableInstance={tableInstance}
+            instance={instance}
           />,
         ]}
       {enableGrouping &&
@@ -377,7 +377,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           isSubMenu
           key={2}
           setAnchorEl={setShowHideColumnsMenuAnchorEl}
-          tableInstance={tableInstance}
+          instance={instance}
         />,
       ]}
     </Menu>

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,7 +1,11 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
-import type { MRT_FilterFn, MRT_Header, MRT_TableInstance } from '..';
-import { MRT_FILTER_OPTION } from '../enums';
+import type {
+  MRT_FilterFn,
+  MRT_FILTER_OPTION,
+  MRT_Header,
+  MRT_TableInstance,
+} from '..';
 import {
   between,
   contains,
@@ -27,7 +31,7 @@ interface Props {
   header?: MRT_Header;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_FilterOptionMenu: FC<Props> = ({
@@ -35,14 +39,18 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   header,
   onSelect,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
-    options: { enabledGlobalFilterOptions, localization },
+    options: {
+      enabledGlobalFilterOptions,
+      enabledColumnFilterOptions,
+      localization,
+    },
     setCurrentFilterFns,
     setCurrentGlobalFilterFn,
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding, currentFilterFns, currentGlobalFilterFn } =
     getState();
@@ -51,104 +59,103 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const { columnDef } = column ?? {};
 
-  const filterOptions: {
-    option: MRT_FILTER_OPTION;
-    label: string;
-    divider: boolean;
-    fn: Function;
-  }[] = useMemo(
+  const allowedColumnFilterOptions =
+    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+
+  const filterOptions = useMemo(
     () =>
       [
         {
-          option: MRT_FILTER_OPTION.FUZZY,
+          option: 'fuzzy',
           label: localization.filterFuzzy,
           divider: false,
           fn: fuzzy,
         },
         {
-          option: MRT_FILTER_OPTION.CONTAINS,
+          option: 'contains',
           label: localization.filterContains,
           divider: false,
           fn: contains,
         },
         {
-          option: MRT_FILTER_OPTION.STARTS_WITH,
+          option: 'startsWith',
           label: localization.filterStartsWith,
           divider: false,
           fn: startsWith,
         },
         {
-          option: MRT_FILTER_OPTION.ENDS_WITH,
+          option: 'endsWith',
           label: localization.filterEndsWith,
           divider: true,
           fn: endsWith,
         },
         {
-          option: MRT_FILTER_OPTION.EQUALS,
+          option: 'equals',
           label: localization.filterEquals,
           divider: false,
           fn: equals,
         },
         {
-          option: MRT_FILTER_OPTION.NOT_EQUALS,
+          option: 'notEquals',
           label: localization.filterNotEquals,
           divider: true,
           fn: notEquals,
         },
         {
-          option: MRT_FILTER_OPTION.BETWEEN,
+          option: 'between',
           label: localization.filterBetween,
           divider: false,
           fn: between,
         },
         {
-          option: MRT_FILTER_OPTION.GREATER_THAN,
+          option: 'greaterThan',
           label: localization.filterGreaterThan,
           divider: false,
           fn: greaterThan,
         },
         {
-          option: MRT_FILTER_OPTION.LESS_THAN,
+          option: 'lessThan',
           label: localization.filterLessThan,
           divider: true,
           fn: lessThan,
         },
         {
-          option: MRT_FILTER_OPTION.EMPTY,
+          option: 'empty',
           label: localization.filterEmpty,
           divider: false,
           fn: empty,
         },
         {
-          option: MRT_FILTER_OPTION.NOT_EMPTY,
+          option: 'notEmpty',
           label: localization.filterNotEmpty,
           divider: false,
           fn: notEmpty,
         },
       ].filter((filterType) =>
         columnDef
-          ? !columnDef.enabledColumnFilterOptions ||
-            columnDef.enabledColumnFilterOptions.includes(filterType.option)
+          ? allowedColumnFilterOptions === undefined ||
+            allowedColumnFilterOptions?.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterType.option)) &&
-            [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(
-              filterType.option,
-            ),
-      ),
+            ['fuzzy', 'contains'].includes(filterType.option),
+      ) as Array<{
+        option: MRT_FILTER_OPTION;
+        label: string;
+        divider: boolean;
+        fn: Function;
+      }>,
     [],
   );
 
-  const handleSelectFilterType = (value: MRT_FILTER_OPTION) => {
+  const handleSelectFilterType = (value: string) => {
     if (header && column) {
       setCurrentFilterFns((prev: { [key: string]: MRT_FilterFn }) => ({
         ...prev,
         [header.id]: value,
       }));
-      if (
-        [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)
-      ) {
+      if (['empty', 'notEmpty'].includes(value)) {
         column.setFilterValue(' ');
-      } else if (value === MRT_FILTER_OPTION.BETWEEN) {
+      } else if (value === 'between') {
         column.setFilterValue(['', '']);
       } else {
         column.setFilterValue('');
@@ -178,10 +185,10 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         <MenuItem
           divider={divider}
           key={index}
-          onClick={() => handleSelectFilterType(option)}
+          onClick={() => handleSelectFilterType(option as string)}
           selected={option === filterOption || fn === filterOption}
           sx={commonMenuItemStyles}
-          value={option}
+          value={option as string}
         >
           {label}
         </MenuItem>

package/src/menus/MRT_RowActionMenu.tsx

@@ -11,7 +11,7 @@ interface Props {
   handleEdit: () => void;
   row: MRT_Row;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  tableInstance: MRT_TableInstance;
+  instance: MRT_TableInstance;
 }
 
 export const MRT_RowActionMenu: FC<Props> = ({
@@ -19,7 +19,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
   handleEdit,
   row,
   setAnchorEl,
-  tableInstance,
+  instance,
 }) => {
   const {
     getState,
@@ -29,7 +29,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       localization,
       renderRowActionMenuItems,
     },
-  } = tableInstance;
+  } = instance;
 
   const { isDensePadding } = getState();
 
@@ -54,7 +54,7 @@ export const MRT_RowActionMenu: FC<Props> = ({
       )}
       {renderRowActionMenuItems?.({
         row,
-        tableInstance,
+        instance,
         closeMenu: () => setAnchorEl(null),
       })}
     </Menu>