material-react-table 0.11.0 → 0.12.2

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,
-      onHandleGlobalFilterValueChange,
+      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);
-      onHandleGlobalFilterValueChange?.({ 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,
-      onHandleSelectRowChange,
-      onHandleSelectAllChange,
+      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);
       }
-      onHandleSelectAllChange?.({
+      onRowSelectAllChanged?.({
         event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         instance,
       });
     } else if (row) {
       row?.getToggleSelectedHandler()(event as any);
-      onHandleSelectRowChange?.({
+      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, onHandleToggleColumnVisibility },
+    options: { enableColumnOrdering, onColumnVisibilityChanged },
     setColumnOrder,
   } = instance;
 
@@ -56,7 +56,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     } else {
       column.toggleVisibility();
     }
-    onHandleToggleColumnVisibility?.({
+    onColumnVisibilityChanged?.({
       column,
       columnVisibility,
       instance,

package/src/table/MRT_TableRoot.tsx

@@ -153,87 +153,104 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     [],
   );
 
-  const displayColumns = useMemo(
-    () =>
-      [
-        showActionColumn &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => (
-              <MRT_ToggleRowActionMenuButton
-                row={cell.row as any}
-                instance={instance}
-              />
-            ),
-            header: props.localization?.actions,
-            id: 'mrt-row-actions',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 70,
-          }),
-        showExpandColumn &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => (
-              <MRT_ExpandButton row={cell.row as any} instance={instance} />
-            ),
-            Header: () =>
-              props.enableExpandAll ? (
-                <MRT_ExpandAllButton instance={instance} />
-              ) : null,
-            header: props.localization?.expand,
-            id: 'mrt-expand',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 50,
-          }),
-        props.enableRowSelection &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => (
-              <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
-            ),
-            Header: () =>
-              props.enableSelectAll ? (
-                <MRT_SelectCheckbox selectAll instance={instance} />
-              ) : null,
-            header: props.localization?.select,
-            id: 'mrt-select',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 50,
-          }),
-        props.enableRowNumbers &&
-          createDisplayColumn(table, {
-            Cell: ({ cell }) => cell.row.index + 1,
-            Header: () => props.localization?.rowNumber,
-            header: props.localization?.rowNumbers,
-            id: 'mrt-row-numbers',
-            muiTableBodyCellProps: props.muiTableBodyCellProps,
-            muiTableHeadCellProps: props.muiTableHeadCellProps,
-            size: 50,
-          }),
-      ].filter(Boolean),
-    [
-      props.editingMode,
-      props.enableEditing,
-      props.enableExpandAll,
-      props.enableExpanding,
-      props.enableGrouping,
-      props.enableRowActions,
-      props.enableRowNumbers,
-      props.enableRowSelection,
-      props.enableSelectAll,
-      props.localization,
-      table,
-    ],
-  );
+  const [leadingDisplayColumns, trailingDisplayColumns] = useMemo(() => {
+    const leadingDisplayColumns = [
+      showActionColumn &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => (
+            <MRT_ToggleRowActionMenuButton
+              row={cell.row as any}
+              instance={instance}
+            />
+          ),
+          header: props.localization?.actions,
+          id: 'mrt-row-actions',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 70,
+        }),
+      showExpandColumn &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => (
+            <MRT_ExpandButton row={cell.row as any} instance={instance} />
+          ),
+          Header: () =>
+            props.enableExpandAll ? (
+              <MRT_ExpandAllButton instance={instance} />
+            ) : null,
+          header: props.localization?.expand,
+          id: 'mrt-expand',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 50,
+        }),
+      props.enableRowSelection &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => (
+            <MRT_SelectCheckbox row={cell.row as any} instance={instance} />
+          ),
+          Header: () =>
+            props.enableSelectAll ? (
+              <MRT_SelectCheckbox selectAll instance={instance} />
+            ) : null,
+          header: props.localization?.select,
+          id: 'mrt-select',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 50,
+        }),
+      props.enableRowNumbers &&
+        createDisplayColumn(table, {
+          Cell: ({ cell }) => cell.row.index + 1,
+          Header: () => props.localization?.rowNumber,
+          header: props.localization?.rowNumbers,
+          id: 'mrt-row-numbers',
+          muiTableBodyCellProps: props.muiTableBodyCellProps,
+          muiTableHeadCellProps: props.muiTableHeadCellProps,
+          size: 50,
+        }),
+    ].filter(Boolean) as MRT_ColumnDef<D>[];
+
+    const trailingDisplayColumns = [] as MRT_ColumnDef<D>[];
+
+    if (props.enableRowActions && props.positionActionsColumn === 'last') {
+      trailingDisplayColumns.push(
+        ...leadingDisplayColumns.splice(
+          leadingDisplayColumns.findIndex(
+            (col) => col.id === 'mrt-row-actions',
+          ),
+          1,
+        ),
+      );
+    }
+
+    return [leadingDisplayColumns, trailingDisplayColumns];
+  }, [
+    props.editingMode,
+    props.enableEditing,
+    props.enableExpandAll,
+    props.enableExpanding,
+    props.enableGrouping,
+    props.enableRowActions,
+    props.enableRowNumbers,
+    props.enableRowSelection,
+    props.enableSelectAll,
+    props.localization,
+    props.muiTableBodyCellProps,
+    props.muiTableHeadCellProps,
+    props.positionActionsColumn,
+    table,
+  ]);
 
   const columns = useMemo(
     () => [
-      ...displayColumns,
+      ...leadingDisplayColumns,
       ...props.columns.map((column) =>
         column.columns
           ? createGroup(table, column as any, currentFilterFns)
           : createDataColumn(table, column as any, currentFilterFns),
       ),
+      ...trailingDisplayColumns,
     ],
     [table, props.columns, currentFilterFns],
   );