material-react-table 3.0.3 → 3.2.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.0.3",
+  "version": "3.2.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -62,47 +62,46 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@faker-js/faker": "^9.2.0",
-    "@mui/icons-material": "^6.1.9",
-    "@mui/material": "^6.1.9",
-    "@mui/x-date-pickers": "^7.23.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@faker-js/faker": "^9.3.0",
+    "@mui/icons-material": "^6.2.1",
+    "@mui/material": "^6.2.1",
+    "@mui/x-date-pickers": "^7.23.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.1.6",
-    "@storybook/addon-a11y": "^8.4.6",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
-    "@storybook/addon-storysource": "^8.4.6",
-    "@storybook/blocks": "^8.4.6",
-    "@storybook/preview-api": "^8.4.6",
-    "@storybook/react": "^8.4.6",
-    "@storybook/react-vite": "^8.4.6",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/addon-storysource": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
+    "@storybook/react-vite": "^8.4.7",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "@typescript-eslint/eslint-plugin": "8.18.1",
+    "@typescript-eslint/parser": "8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "eslint": "^9.16.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^4.1.2",
+    "eslint-plugin-perfectionist": "^4.4.0",
     "eslint-plugin-storybook": "^0.11.1",
-    "prop-types": "^15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-is": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^2.1.0",
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.1.6",
-    "storybook": "^8.4.6",
+    "storybook": "^8.4.7",
     "storybook-dark-mode": "^4.0.2",
     "tslib": "^2.8.1",
-    "typescript": "^5.7.2",
-    "vite": "^6.0.1"
+    "typescript": "5.7.2",
+    "vite": "^6.0.5"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.13",
@@ -115,8 +114,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.19.4",
-    "@tanstack/react-table": "8.20.5",
-    "@tanstack/react-virtual": "3.10.9",
+    "@tanstack/react-table": "8.20.6",
+    "@tanstack/react-virtual": "3.11.2",
     "highlight-words": "2.0.0"
   }
-}
+}

package/src/components/body/MRT_TableBodyCell.tsx

@@ -30,7 +30,7 @@ export interface MRT_TableBodyCellProps<TData extends MRT_RowData>
   extends TableCellProps {
   cell: MRT_Cell<TData>;
   numRows?: number;
-  rowRef: RefObject<HTMLTableRowElement>;
+  rowRef: RefObject<HTMLTableRowElement | null>;
   staticColumnIndex?: number;
   staticRowIndex: number;
   table: MRT_TableInstance<TData>;
@@ -187,7 +187,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
       parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
     !['context-menu', false].includes(
-      // @ts-ignore
+      // @ts-expect-error
       parseFromValuesOrFunc(columnDef.enableClickToCopy, cell),
     );
 

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -11,7 +11,7 @@ const allowedTypes = ['string', 'number'];
 
 export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
-  rowRef?: RefObject<HTMLTableRowElement>;
+  rowRef?: RefObject<HTMLTableRowElement | null>;
   staticColumnIndex?: number;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;

package/src/components/body/MRT_TableBodyRow.tsx

@@ -129,7 +129,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
 
   const customRowHeight =
-    // @ts-ignore
+    // @ts-expect-error
     parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || undefined;
 
   const rowHeight = customRowHeight || defaultRowHeight;

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -11,7 +11,7 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData>
   extends IconButtonProps {
   row: MRT_Row<TData>;
-  rowRef: RefObject<HTMLTableRowElement>;
+  rowRef: RefObject<HTMLTableRowElement | null>;
   table: MRT_TableInstance<TData>;
 }
 

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -13,7 +13,7 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
   extends TableCellProps {
-  parentRowRef: RefObject<HTMLTableRowElement>;
+  parentRowRef: RefObject<HTMLTableRowElement | null>;
   row: MRT_Row<TData>;
   rowVirtualizer?: MRT_RowVirtualizer;
   staticRowIndex: number;

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -55,14 +55,14 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
 
   const handleSubmitRow = () => {
     //look for auto-filled input values
-    Object.values(editInputRefs?.current)
+    Object.values(editInputRefs.current ?? {})
       .filter((inputRef) => row.id === inputRef?.name?.split('_')?.[0])
       ?.forEach((input) => {
         if (
           input.value !== undefined &&
           Object.hasOwn(row?._valuesCache as object, input.name)
         ) {
-          // @ts-ignore
+          // @ts-expect-error
           row._valuesCache[input.name] = input.value;
         }
       });

package/src/components/footer/MRT_TableFooter.tsx

@@ -57,7 +57,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
       ref={(ref: HTMLTableSectionElement) => {
         tableFooterRef.current = ref;
         if (tableFooterProps?.ref) {
-          // @ts-ignore
+          // @ts-expect-error
           tableFooterProps.ref.current = ref;
         }
       }}

package/src/components/head/MRT_TableHead.tsx

@@ -44,7 +44,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
       ref={(ref: HTMLTableSectionElement) => {
         tableHeadRef.current = ref;
         if (tableHeadProps?.ref) {
-          // @ts-ignore
+          // @ts-expect-error
           tableHeadProps.ref.current = ref;
         }
       }}

package/src/components/head/MRT_TableHeadCell.tsx

@@ -191,7 +191,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       onDragOver={handleDragOver}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
-          tableHeadCellRefs.current[column.id] = node;
+          tableHeadCellRefs.current![column.id] = node;
           if (columnDefType !== 'group') {
             columnVirtualizer?.measureElement?.(node);
           }
@@ -319,7 +319,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                       column={column}
                       table={table}
                       tableHeadCellRef={{
-                        current: tableHeadCellRefs.current[column.id],
+                        current: tableHeadCellRefs.current?.[column.id]!,
                       }}
                     />
                   )}

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -76,12 +76,11 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           .replace(
             '{filterType}',
             currentFilterOption
-              ? // @ts-ignore
-                localization[
+              ? localization[
                   `filter${
-                    currentFilterOption?.charAt(0)?.toUpperCase() +
-                    currentFilterOption?.slice(1)
-                  }`
+                    currentFilterOption.charAt(0).toUpperCase() +
+                    currentFilterOption.slice(1)
+                  }` as keyof typeof localization
                 ]
               : '',
           )
@@ -109,8 +108,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
         in={
           columnFilterDisplayMode === 'popover' ||
           (!!filterValue && !isRangeFilter) ||
-          (isRangeFilter && // @ts-ignore
-            (!!filterValue?.[0] || !!filterValue?.[1]))
+          (isRangeFilter && (!!filterValue?.[0] || !!filterValue?.[1]))
         }
         unmountOnExit
       >
@@ -125,8 +123,8 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
                   setShowColumnFilters(true);
                 }
                 queueMicrotask(() => {
-                  filterInputRefs.current[`${column.id}-0`]?.focus?.();
-                  filterInputRefs.current[`${column.id}-0`]?.select?.();
+                  filterInputRefs.current?.[`${column.id}-0`]?.focus?.();
+                  filterInputRefs.current?.[`${column.id}-0`]?.select?.();
                 });
                 event.stopPropagation();
               }}
@@ -158,7 +156,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           disableScrollLock
           onClick={(event) => event.stopPropagation()}
           onClose={(event) => {
-            //@ts-ignore
+            //@ts-expect-error
             event.stopPropagation();
             setAnchorEl(null);
           }}

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -13,7 +13,7 @@ export interface MRT_TableHeadCellGrabHandleProps<TData extends MRT_RowData>
   extends IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
-  tableHeadCellRef: RefObject<HTMLTableCellElement>;
+  tableHeadCellRef: RefObject<HTMLTableCellElement | null>;
 }
 
 export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -70,7 +70,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const isSelectEdit = editVariant === 'select' || textFieldProps?.select;
 
   const saveInputValueToRowCache = (newValue: string) => {
-    //@ts-ignore
+    //@ts-expect-error
     row._valuesCache[column.id] = newValue;
     if (isCreating) {
       setCreatingRow(row);
@@ -96,7 +96,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   const handleEnterKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
     textFieldProps.onKeyDown?.(event);
     if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
-      editInputRefs.current[column.id]?.blur();
+      editInputRefs.current?.[column.id]?.blur();
     }
   };
 
@@ -110,7 +110,9 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {
-          editInputRefs.current[column.id] = inputRef;
+          editInputRefs.current![column.id] = isSelectEdit
+            ? inputRef.node
+            : inputRef;
           if (textFieldProps.inputRef) {
             textFieldProps.inputRef = inputRef;
           }

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -54,6 +54,13 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
 
   const isMounted = useRef(false);
 
+  // prevent moving the focus to the next/prev cell when using the arrow keys
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+      event.stopPropagation();
+    }
+  };
+
   useEffect(() => {
     if (isMounted.current) {
       if (columnFilterValue === undefined) {
@@ -84,6 +91,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
             }
           }
         }}
+        onKeyDown={handleKeyDown}
         value={filterValues}
         valueLabelDisplay="auto"
         {...sliderProps}
@@ -91,10 +99,10 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
           input: {
             ref: (node) => {
               if (node) {
-                filterInputRefs.current[`${column.id}-0`] = node;
-                // @ts-ignore
+                filterInputRefs.current![`${column.id}-0`] = node;
+                // @ts-expect-error
                 if (sliderProps?.slotProps?.input?.ref) {
-                  //@ts-ignore
+                  //@ts-expect-error
                   sliderProps.slotProps.input.ref = node;
                 }
               }
@@ -121,12 +129,11 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
         >
           {localization.filterMode.replace(
             '{filterType}',
-            // @ts-ignore
             localization[
               `filter${
                 currentFilterOption?.charAt(0)?.toUpperCase() +
                 currentFilterOption?.slice(1)
-              }`
+              }` as keyof typeof localization
             ],
           )}
         </FormHelperText>

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -1,12 +1,13 @@
 import {
   type ChangeEvent,
   type MouseEvent,
+  SyntheticEvent,
   useCallback,
   useEffect,
   useRef,
   useState,
 } from 'react';
-import Autocomplete from '@mui/material/Autocomplete';
+import Autocomplete, { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
 import Chip from '@mui/material/Chip';
@@ -107,12 +108,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   const dropdownOptions = useDropdownOptions({ header, table });
 
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
-    ? //@ts-ignore
-      localization[
+    ? localization[
         `filter${
           currentFilterOption?.charAt?.(0)?.toUpperCase() +
           currentFilterOption?.slice(1)
-        }`
+        }` as keyof typeof localization
       ]
     : '';
 
@@ -144,11 +144,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         ? (column.getFilterValue() as [string, string])?.[
             rangeFilterIndex as number
           ] || ''
+        : isAutocompleteFilter 
+        ? typeof column.getFilterValue() === 'string' ? column.getFilterValue() as string : ''
         : ((column.getFilterValue() as string) ?? ''),
   );
   const [autocompleteValue, setAutocompleteValue] =
     useState<DropdownOption | null>(
-      isAutocompleteFilter ? (filterValue as DropdownOption | null) : null,
+      () => isAutocompleteFilter ? ((column.getFilterValue() || null) as DropdownOption | null) : null,
     );
 
   const handleChangeDebounced = useCallback(
@@ -185,9 +187,13 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
+  const handleAutocompleteInputChange = (_event: SyntheticEvent, newValue: string, _reason: AutocompleteInputChangeReason) => {
+    handleChange(newValue)
+  };
+
   const handleAutocompleteChange = (newValue: DropdownOption | null) => {
     setAutocompleteValue(newValue);
-    handleChange(getValueAndLabel(newValue).value);
+    handleChangeDebounced(getValueAndLabel(newValue).value);
   };
 
   const handleClear = () => {
@@ -201,6 +207,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         newFilterValues[rangeFilterIndex as number] = undefined;
         return newFilterValues;
       });
+    } else if (isAutocompleteFilter) {
+      setAutocompleteValue(null)
+      setFilterValue('')
+      // when using 'autocomplete' this function is called only inside effect and only if the filterValue === undefined
+      // so the following call is excessive; should be uncommented if the handleClear becomes part of the Autocomplete component callbacks
+      // column.setFilterValue(undefined)
     } else {
       setFilterValue('');
       column.setFilterValue(undefined);
@@ -246,7 +258,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (
       <InputAdornment
         position="end"
-        sx={{ mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }}
+        sx={{
+          mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined,
+          visibility: (filterValue?.length ?? 0) > 0 ? 'visible' : 'hidden',
+        }}
       >
         <Tooltip placement="right" title={localization.clearFilter ?? ''}>
           <span>
@@ -288,44 +303,23 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     </InputAdornment>
   ) : null;
 
-  const commonTextFieldProps: TextFieldProps = {
-    FormHelperTextProps: {
-      sx: {
-        fontSize: '0.75rem',
-        lineHeight: '0.8rem',
-        whiteSpace: 'nowrap',
-      },
-    },
-    InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
-      ? { endAdornment, startAdornment }
-      : { startAdornment },
+  const commonTextFieldProps: TextFieldProps<any> = {
     fullWidth: true,
     helperText: showChangeModeButton ? (
       <label>
         {localization.filterMode.replace(
           '{filterType}',
-          // @ts-ignore
           localization[
             `filter${
               currentFilterOption?.charAt(0)?.toUpperCase() +
               currentFilterOption?.slice(1)
-            }`
+            }` as keyof typeof localization
           ],
         )}
       </label>
     ) : null,
-    inputProps: {
-      'aria-label': filterPlaceholder,
-      autoComplete: 'off',
-      disabled: !!filterChipLabel,
-      sx: {
-        textOverflow: 'ellipsis',
-        width: filterChipLabel ? 0 : undefined,
-      },
-      title: filterPlaceholder,
-    },
     inputRef: (inputRef) => {
-      filterInputRefs.current[`${column.id}-${rangeFilterIndex ?? 0}`] =
+      filterInputRefs.current![`${column.id}-${rangeFilterIndex ?? 0}`] =
         inputRef;
       if (textFieldProps.inputRef) {
         textFieldProps.inputRef = inputRef;
@@ -338,6 +332,31 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         : filterPlaceholder,
     variant: 'standard',
     ...textFieldProps,
+    slotProps: {
+      ...textFieldProps.slotProps,
+      formHelperText: {
+        sx: {
+          fontSize: '0.75rem',
+          lineHeight: '0.8rem',
+          whiteSpace: 'nowrap',
+        },
+        ...textFieldProps.slotProps?.formHelperText,
+      },
+      input: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
+        ? { endAdornment, startAdornment }
+        : { startAdornment },
+      htmlInput: {
+        'aria-label': filterPlaceholder,
+        autoComplete: 'off',
+        disabled: !!filterChipLabel,
+        sx: {
+          textOverflow: 'ellipsis',
+          width: filterChipLabel ? 0 : undefined,
+        },
+        title: filterPlaceholder,
+        ...textFieldProps.slotProps?.htmlInput,
+      },
+    },
     onKeyDown: (e) => {
       e.stopPropagation();
       textFieldProps.onKeyDown?.(e);
@@ -422,28 +441,35 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           getOptionLabel={(option: DropdownOption) =>
             getValueAndLabel(option).label
           }
-          // @ts-ignore
-          onChange={(_e, newValue: DropdownOption | null) =>
-            handleAutocompleteChange(newValue)
+          onChange={(_e, newValue) =>
+            handleAutocompleteChange(newValue as DropdownOption | null)
           }
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }
+          inputValue={filterValue as string}
+          onInputChange={handleAutocompleteInputChange}
           {...autocompleteProps}
-          renderInput={(builtinTextFieldProps) => (
+          renderInput={(builtinTextFieldProps: TextFieldProps) => (
             <TextField
-              {...builtinTextFieldProps}
               {...commonTextFieldProps}
-              InputProps={{
-                ...builtinTextFieldProps.InputProps,
-                startAdornment:
-                  commonTextFieldProps?.InputProps?.startAdornment,
-              }}
-              inputProps={{
-                ...builtinTextFieldProps.inputProps,
-                ...commonTextFieldProps?.inputProps,
+              {...builtinTextFieldProps}
+              slotProps={{
+                ...builtinTextFieldProps.slotProps,
+                ...commonTextFieldProps.slotProps,
+                input: {
+                  ...builtinTextFieldProps.InputProps,
+                  ...builtinTextFieldProps.slotProps?.input,
+                  startAdornment:
+                    //@ts-expect-error
+                    commonTextFieldProps?.slotProps?.input?.startAdornment,
+                },
+                htmlInput: {
+                  ...builtinTextFieldProps.inputProps,
+                  ...builtinTextFieldProps.slotProps?.htmlInput,
+                  ...commonTextFieldProps?.slotProps?.htmlInput,
+                },
               }}
-              onChange={handleTextFieldChange}
               onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
             />
           )}
@@ -453,31 +479,41 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         <TextField
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}
-          SelectProps={{
-            MenuProps: { disableScrollLock: true },
-            displayEmpty: true,
-            multiple: isMultiSelectFilter,
-            renderValue: isMultiSelectFilter
-              ? (selected: any) =>
-                  !Array.isArray(selected) || selected.length === 0 ? (
-                    <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
-                  ) : (
-                    <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
-                      {selected.map((value: string) => {
-                        const selectedValue = dropdownOptions?.find(
-                          (option) => getValueAndLabel(option).value === value,
-                        );
-                        return (
-                          <Chip
-                            key={value}
-                            label={getValueAndLabel(selectedValue).label}
-                          />
-                        );
-                      })}
-                    </Box>
-                  )
-              : undefined,
-            ...commonTextFieldProps.SelectProps,
+          slotProps={{
+            ...commonTextFieldProps.slotProps,
+            inputLabel: {
+              shrink: isSelectFilter || isMultiSelectFilter,
+              ...(commonTextFieldProps.slotProps?.inputLabel as any),
+            },
+            select: {
+              MenuProps: { disableScrollLock: true },
+              displayEmpty: true,
+              multiple: isMultiSelectFilter,
+              renderValue: isMultiSelectFilter
+                ? (selected: any) =>
+                    !Array.isArray(selected) || selected?.length === 0 ? (
+                      <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
+                    ) : (
+                      <Box
+                        sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}
+                      >
+                        {selected.map((value: string) => {
+                          const selectedValue = dropdownOptions?.find(
+                            (option) =>
+                              getValueAndLabel(option).value === value,
+                          );
+                          return (
+                            <Chip
+                              key={value}
+                              label={getValueAndLabel(selectedValue).label}
+                            />
+                          );
+                        })}
+                      </Box>
+                    )
+                : undefined,
+              ...commonTextFieldProps.slotProps?.select,
+            },
           }}
           onChange={handleTextFieldChange}
           onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -117,7 +117,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 
   const handleFilterByColumn = () => {
     setShowColumnFilters(true);
-    queueMicrotask(() => filterInputRefs.current[`${column.id}-0`]?.focus());
+    queueMicrotask(() => filterInputRefs.current?.[`${column.id}-0`]?.focus());
     setAnchorEl(null);
   };
 
@@ -150,6 +150,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       ? [
           enableSortingRemoval !== false && (
             <MRT_ActionMenuItem
+              disabled={column.getIsSorted() === false}
               icon={<ClearAllIcon />}
               key={0}
               label={localization.clearSort}
@@ -277,7 +278,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     ...(enableColumnResizing && column.getCanResize()
       ? [
           <MRT_ActionMenuItem
-            disabled={!columnSizing[column.id]}
+            disabled={columnSizing[column.id] === undefined}
             icon={<RestartAltIcon />}
             key={10}
             label={localization.resetColumnSize}