material-react-table 0.10.0 → 0.12.1

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,10 +32,13 @@ export const MRT_FilterTextField: FC<Props> = ({
   const {
     getState,
     options: {
+      enabledColumnFilterOptions,
       icons: { FilterListIcon, CloseIcon },
-      tableId,
       localization,
       muiTableHeadCellFilterTextFieldProps,
+      onColumnFilterValueChanged,
+      onColumnFilterValueChangedDebounced,
+      tableId,
     },
     setCurrentFilterFns,
   } = instance;
@@ -73,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);
   };
@@ -141,6 +169,9 @@ export const MRT_FilterTextField: FC<Props> = ({
       ? localization.max
       : '';
 
+  const allowedColumnFilterOptions =
+    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+
   return (
     <>
       <TextField
@@ -155,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(
@@ -192,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

package/src/inputs/MRT_SearchTextField.tsx

@@ -29,7 +29,8 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
       tableId,
       localization,
       muiSearchTextFieldProps,
-      onMrtGlobalFilterValueChange,
+      onGlobalFilterValueChanged,
+      onGlobalFilterValueChangedDebounced,
     },
   } = instance;
 
@@ -38,14 +39,20 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
   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, instance });
-    }, 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);
   };
@@ -65,10 +72,7 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
       <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={{

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -16,8 +16,8 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
     options: {
       localization,
       muiSelectCheckboxProps,
-      onMrtSelectRowChange,
-      onMrtSelectAllChange,
+      onRowSelectionChanged,
+      onRowSelectAllChanged,
       selectAllMode,
     },
   } = instance;
@@ -31,14 +31,14 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, instance }) => {
       } else if (selectAllMode === 'page') {
         instance.getToggleAllPageRowsSelectedHandler()(event as any);
       }
-      onMrtSelectAllChange?.({
+      onRowSelectAllChanged?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         instance,
       });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onMrtSelectRowChange?.({
+      onRowSelectionChanged?.({
         event,
         row,
         selectedRows: event.target.checked

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -43,7 +43,11 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enabledGlobalFilterOptions, localization },
+    options: {
+      enabledGlobalFilterOptions,
+      enabledColumnFilterOptions,
+      localization,
+    },
     setCurrentFilterFns,
     setCurrentGlobalFilterFn,
   } = instance;
@@ -55,6 +59,9 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
 
   const { columnDef } = column ?? {};
 
+  const allowedColumnFilterOptions =
+    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+
   const filterOptions = useMemo(
     () =>
       [
@@ -126,8 +133,8 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         },
       ].filter((filterType) =>
         columnDef
-          ? !columnDef.enabledColumnFilterOptions ||
-            columnDef.enabledColumnFilterOptions.includes(filterType.option)
+          ? allowedColumnFilterOptions === undefined ||
+            allowedColumnFilterOptions?.includes(filterType.option)
           : (!enabledGlobalFilterOptions ||
               enabledGlobalFilterOptions.includes(filterType.option)) &&
             ['fuzzy', 'contains'].includes(filterType.option),

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -21,7 +21,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: { enableColumnOrdering, onMrtToggleColumnVisibility },
+    options: { enableColumnOrdering, onColumnVisibilityChanged },
     setColumnOrder,
   } = instance;
 
@@ -56,7 +56,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onMrtToggleColumnVisibility?.({
+    onColumnVisibilityChanged?.({
       column,
       columnVisibility,
       instance,