@mui/x-data-grid 7.0.0-alpha.8 → 7.0.0-beta.0

package/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './columnSelection';
 export * from '../material/icons';
 export * from './menu';
 export * from './panel';
+export * from './columnsManagement';
 export * from './toolbar';
 export * from './GridApiContext';
 export * from './GridFooter';

package/components/index.js

@@ -6,6 +6,7 @@ export * from './columnSelection';
 export * from '../material/icons';
 export * from './menu';
 export * from './panel';
+export * from './columnsManagement';
 export * from './toolbar';
 export * from './GridApiContext';
 export * from './GridFooter';

package/components/menu/columnMenu/menuItems/GridColumnMenuSortItem.js

@@ -31,7 +31,7 @@ function GridColumnMenuSortItem(props) {
     const direction = event.currentTarget.getAttribute('data-value') || null;
     apiRef.current.sortColumn(colDef.field, direction === sortDirection ? null : direction);
   }, [apiRef, colDef, onClick, sortDirection]);
-  if (!colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
+  if (rootProps.disableColumnSorting || !colDef || !colDef.sortable || !sortingOrder.some(item => !!item)) {
     return null;
   }
   const getLabel = key => {

package/components/panel/GridColumnsPanel.d.ts

@@ -1,34 +1,6 @@
 import * as React from 'react';
 import { GridPanelWrapperProps } from './GridPanelWrapper';
-import type { GridColDef } from '../../models/colDef/gridColDef';
 export interface GridColumnsPanelProps extends GridPanelWrapperProps {
-    sort?: 'asc' | 'desc';
-    searchPredicate?: (column: GridColDef, searchValue: string) => boolean;
-    /**
-     * If `true`, the column search field will be focused automatically.
-     * If `false`, the first column switch input will be focused automatically.
-     * This helps to avoid input keyboard panel to popup automatically on touch devices.
-     * @default true
-     */
-    autoFocusSearchField?: boolean;
-    /**
-     * If `true`, the `Hide all` button will not be displayed.
-     * @default false
-     */
-    disableHideAllButton?: boolean;
-    /**
-     * If `true`, the `Show all` button will be disabled
-     * @default false
-     */
-    disableShowAllButton?: boolean;
-    /**
-     * Returns the list of togglable columns.
-     * If used, only those columns will be displayed in the panel
-     * which are passed as the return value of the function.
-     * @param {GridColDef[]} columns The `ColDef` list of all columns.
-     * @returns {GridColDef['field'][]} The list of togglable columns' field names.
-     */
-    getTogglableColumns?: (columns: GridColDef[]) => GridColDef['field'][];
 }
 declare function GridColumnsPanel(props: GridColumnsPanelProps): React.JSX.Element;
 declare namespace GridColumnsPanel {

package/components/panel/GridColumnsPanel.js

@@ -1,196 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["sort", "searchPredicate", "autoFocusSearchField", "disableHideAllButton", "disableShowAllButton", "getTogglableColumns"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_composeClasses as composeClasses } from '@mui/utils';
-import IconButton from '@mui/material/IconButton';
-import { switchClasses } from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { styled } from '@mui/material/styles';
-import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../../hooks/features/columns/gridColumnsSelector';
-import { useGridSelector } from '../../hooks/utils/useGridSelector';
-import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
-import { GridPanelContent } from './GridPanelContent';
-import { GridPanelFooter } from './GridPanelFooter';
-import { GridPanelHeader } from './GridPanelHeader';
 import { GridPanelWrapper } from './GridPanelWrapper';
-import { GRID_EXPERIMENTAL_ENABLED } from '../../constants/envConstants';
+import { GridColumnsManagement } from '../columnsManagement';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const useUtilityClasses = ownerState => {
-  const {
-    classes
-  } = ownerState;
-  const slots = {
-    root: ['columnsPanel'],
-    columnsPanelRow: ['columnsPanelRow']
-  };
-  return composeClasses(slots, getDataGridUtilityClass, classes);
-};
-const GridColumnsPanelRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanel',
-  overridesResolver: (props, styles) => styles.columnsPanel
-})({
-  padding: '8px 0px 8px 8px'
-});
-const GridColumnsPanelRowRoot = styled('div', {
-  name: 'MuiDataGrid',
-  slot: 'ColumnsPanelRow',
-  overridesResolver: (props, styles) => styles.columnsPanelRow
-})(({
-  theme
-}) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '1px 8px 1px 7px',
-  [`& .${switchClasses.root}`]: {
-    marginRight: theme.spacing(0.5)
-  }
-}));
-const GridIconButtonRoot = styled(IconButton)({
-  justifyContent: 'flex-end'
-});
-const collator = new Intl.Collator();
-const defaultSearchPredicate = (column, searchValue) => {
-  return (column.headerName || column.field).toLowerCase().indexOf(searchValue) > -1;
-};
 function GridColumnsPanel(props) {
-  var _rootProps$slotProps, _rootProps$slotProps3, _rootProps$slotProps4;
-  const apiRef = useGridApiContext();
-  const searchInputRef = React.useRef(null);
-  const columns = useGridSelector(apiRef, gridColumnDefinitionsSelector);
-  const columnVisibilityModel = useGridSelector(apiRef, gridColumnVisibilityModelSelector);
+  var _rootProps$slotProps;
   const rootProps = useGridRootProps();
-  const [searchValue, setSearchValue] = React.useState('');
-  const classes = useUtilityClasses(rootProps);
-  const {
-      sort,
-      searchPredicate = defaultSearchPredicate,
-      autoFocusSearchField = true,
-      disableHideAllButton = false,
-      disableShowAllButton = false,
-      getTogglableColumns
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const sortedColumns = React.useMemo(() => {
-    switch (sort) {
-      case 'asc':
-        return [...columns].sort((a, b) => collator.compare(a.headerName || a.field, b.headerName || b.field));
-      case 'desc':
-        return [...columns].sort((a, b) => -collator.compare(a.headerName || a.field, b.headerName || b.field));
-      default:
-        return columns;
-    }
-  }, [columns, sort]);
-  const toggleColumn = event => {
-    const {
-      name: field
-    } = event.target;
-    apiRef.current.setColumnVisibility(field, columnVisibilityModel[field] === false);
-  };
-  const toggleAllColumns = React.useCallback(isVisible => {
-    const currentModel = gridColumnVisibilityModelSelector(apiRef);
-    const newModel = _extends({}, currentModel);
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(columns) : null;
-    columns.forEach(col => {
-      if (col.hideable && (togglableColumns == null || togglableColumns.includes(col.field))) {
-        if (isVisible) {
-          // delete the key from the model instead of setting it to `true`
-          delete newModel[col.field];
-        } else {
-          newModel[col.field] = false;
-        }
-      }
-    });
-    return apiRef.current.setColumnVisibilityModel(newModel);
-  }, [apiRef, columns, getTogglableColumns]);
-  const handleSearchValueChange = React.useCallback(event => {
-    setSearchValue(event.target.value);
-  }, []);
-  const currentColumns = React.useMemo(() => {
-    const togglableColumns = getTogglableColumns ? getTogglableColumns(sortedColumns) : null;
-    const togglableSortedColumns = togglableColumns ? sortedColumns.filter(({
-      field
-    }) => togglableColumns.includes(field)) : sortedColumns;
-    if (!searchValue) {
-      return togglableSortedColumns;
-    }
-    return togglableSortedColumns.filter(column => searchPredicate(column, searchValue.toLowerCase()));
-  }, [sortedColumns, searchValue, searchPredicate, getTogglableColumns]);
-  const firstSwitchRef = React.useRef(null);
-  React.useEffect(() => {
-    if (autoFocusSearchField) {
-      searchInputRef.current.focus();
-    } else if (firstSwitchRef.current && typeof firstSwitchRef.current.focus === 'function') {
-      firstSwitchRef.current.focus();
-    }
-  }, [autoFocusSearchField]);
-  let firstHideableColumnFound = false;
-  const isFirstHideableColumn = column => {
-    if (firstHideableColumnFound === false && column.hideable !== false) {
-      firstHideableColumnFound = true;
-      return true;
-    }
-    return false;
-  };
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelHeader, {
-      children: /*#__PURE__*/_jsx(rootProps.slots.baseTextField, _extends({
-        label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
-        placeholder: apiRef.current.getLocaleText('columnsPanelTextFieldPlaceholder'),
-        inputRef: searchInputRef,
-        value: searchValue,
-        onChange: handleSearchValueChange,
-        variant: "standard",
-        fullWidth: true
-      }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseTextField))
-    }), /*#__PURE__*/_jsx(GridPanelContent, {
-      children: /*#__PURE__*/_jsx(GridColumnsPanelRoot, {
-        className: classes.root,
-        ownerState: rootProps,
-        children: currentColumns.map(column => {
-          var _rootProps$slotProps2;
-          return /*#__PURE__*/_jsxs(GridColumnsPanelRowRoot, {
-            className: classes.columnsPanelRow,
-            ownerState: rootProps,
-            children: [/*#__PURE__*/_jsx(FormControlLabel, {
-              control: /*#__PURE__*/_jsx(rootProps.slots.baseSwitch, _extends({
-                disabled: column.hideable === false,
-                checked: columnVisibilityModel[column.field] !== false,
-                onClick: toggleColumn,
-                name: column.field,
-                size: "small",
-                inputRef: isFirstHideableColumn(column) ? firstSwitchRef : undefined
-              }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSwitch)),
-              label: column.headerName || column.field
-            }), !rootProps.disableColumnReorder && GRID_EXPERIMENTAL_ENABLED && /*#__PURE__*/_jsx(GridIconButtonRoot, {
-              draggable: true,
-              "aria-label": apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-              title: apiRef.current.getLocaleText('columnsPanelDragIconLabel'),
-              size: "small",
-              disabled: true,
-              children: /*#__PURE__*/_jsx(rootProps.slots.columnReorderIcon, {})
-            })]
-          }, column.field);
-        })
-      })
-    }), disableShowAllButton && disableHideAllButton ? null : /*#__PURE__*/_jsxs(GridPanelFooter, {
-      children: [!disableHideAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: () => toggleAllColumns(false)
-      }, (_rootProps$slotProps3 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps3.baseButton, {
-        disabled: disableHideAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelHideAllButton')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableShowAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
-        onClick: () => toggleAllColumns(true)
-      }, (_rootProps$slotProps4 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps4.baseButton, {
-        disabled: disableShowAllButton,
-        children: apiRef.current.getLocaleText('columnsPanelShowAllButton')
-      })) : null]
-    })]
+  return /*#__PURE__*/_jsx(GridPanelWrapper, _extends({}, props, {
+    children: /*#__PURE__*/_jsx(GridColumnsManagement, _extends({}, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.columnsManagement))
   }));
 }
 process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
@@ -198,33 +17,6 @@ process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
-  /**
-   * If `true`, the column search field will be focused automatically.
-   * If `false`, the first column switch input will be focused automatically.
-   * This helps to avoid input keyboard panel to popup automatically on touch devices.
-   * @default true
-   */
-  autoFocusSearchField: PropTypes.bool,
-  /**
-   * If `true`, the `Hide all` button will not be displayed.
-   * @default false
-   */
-  disableHideAllButton: PropTypes.bool,
-  /**
-   * If `true`, the `Show all` button will be disabled
-   * @default false
-   */
-  disableShowAllButton: PropTypes.bool,
-  /**
-   * Returns the list of togglable columns.
-   * If used, only those columns will be displayed in the panel
-   * which are passed as the return value of the function.
-   * @param {GridColDef[]} columns The `ColDef` list of all columns.
-   * @returns {GridColDef['field'][]} The list of togglable columns' field names.
-   */
-  getTogglableColumns: PropTypes.func,
-  searchPredicate: PropTypes.func,
-  slotProps: PropTypes.object,
-  sort: PropTypes.oneOf(['asc', 'desc'])
+  slotProps: PropTypes.object
 } : void 0;
 export { GridColumnsPanel };

package/components/panel/GridPanel.js

@@ -11,7 +11,6 @@ import Paper from '@mui/material/Paper';
 import Popper from '@mui/material/Popper';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { isEscapeKey } from '../../utils/keyboardUtils';
-import { gridClasses } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const gridPanelClasses = generateUtilityClasses('MuiDataGrid', ['panel', 'paper']);
@@ -71,9 +70,9 @@ const GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const [anchorEl, setAnchorEl] = React.useState(null);
   React.useEffect(() => {
     var _apiRef$current$rootE;
-    const columnHeadersElement = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector(`.${gridClasses.columnHeaders}`);
-    if (columnHeadersElement) {
-      setAnchorEl(columnHeadersElement);
+    const panelAnchor = (_apiRef$current$rootE = apiRef.current.rootElementRef) == null || (_apiRef$current$rootE = _apiRef$current$rootE.current) == null ? void 0 : _apiRef$current$rootE.querySelector('[data-id="gridPanelAnchor"]');
+    if (panelAnchor) {
+      setAnchorEl(panelAnchor);
     }
   }, [apiRef]);
   if (!anchorEl) {

package/components/panel/filterPanel/GridFilterForm.d.ts

@@ -20,10 +20,6 @@ export interface GridFilterFormProps {
      * If `true`, the logic operator field is visible.
      */
     showMultiFilterOperators?: boolean;
-    /**
-     * The current logic operator applied.
-     */
-    multiFilterOperator?: GridLogicOperator;
     /**
      * If `true`, disables the logic operator field but still renders it.
      */
@@ -84,6 +80,12 @@ export interface GridFilterFormProps {
      * @default {}
      */
     columnInputProps?: any;
+    /**
+     * `true` if the filter is disabled/read only.
+     * i.e. `colDef.fiterable = false` but passed in `filterModel`
+     * @default false
+     */
+    readOnly?: boolean;
     /**
      * Props passed to the value input component.
      * @default {}

package/components/panel/filterPanel/GridFilterForm.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "multiFilterOperator", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "children"],
+const _excluded = ["item", "hasMultipleFilters", "deleteFilter", "applyFilterChanges", "showMultiFilterOperators", "disableMultiFilterOperator", "applyMultiFilterOperatorChanges", "focusElementRef", "logicOperators", "columnsSort", "filterColumns", "deleteIconProps", "logicOperatorInputProps", "operatorInputProps", "columnInputProps", "valueInputProps", "readOnly", "children"],
   _excluded2 = ["InputComponentProps"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId, unstable_capitalize as capitalize } from '@mui/utils';
 import { styled } from '@mui/material/styles';
 import clsx from 'clsx';
-import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterableColumnDefinitionsSelector, gridColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { GridLogicOperator } from '../../../models/gridFilterItem';
@@ -97,13 +97,12 @@ const getLogicOperatorLocaleKey = logicOperator => {
 const getColumnLabel = col => col.headerName || col.field;
 const collator = new Intl.Collator();
 const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(props, ref) {
-  var _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
+  var _filterModel$logicOpe, _rootProps$slotProps, _rootProps$slotProps2, _baseSelectProps$nati, _rootProps$slotProps3, _rootProps$slotProps4, _rootProps$slotProps5, _rootProps$slotProps6, _rootProps$slotProps7, _rootProps$slotProps8, _currentColumn$filter2;
   const {
       item,
       hasMultipleFilters,
       deleteFilter,
       applyFilterChanges,
-      multiFilterOperator,
       showMultiFilterOperators,
       disableMultiFilterOperator,
       applyMultiFilterOperatorChanges,
@@ -115,10 +114,12 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       logicOperatorInputProps = {},
       operatorInputProps = {},
       columnInputProps = {},
-      valueInputProps = {}
+      valueInputProps = {},
+      readOnly
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const apiRef = useGridApiContext();
+  const columnLookup = useGridSelector(apiRef, gridColumnLookupSelector);
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const columnSelectId = useId();
@@ -129,6 +130,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
   const classes = useUtilityClasses(rootProps);
   const valueRef = React.useRef(null);
   const filterSelectorRef = React.useRef(null);
+  const multiFilterOperator = (_filterModel$logicOpe = filterModel.logicOperator) != null ? _filterModel$logicOpe : GridLogicOperator.And;
   const hasLogicOperatorColumn = hasMultipleFilters && logicOperators.length > 0;
   const baseFormControlProps = ((_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseFormControl) || {};
   const baseSelectProps = ((_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseSelect) || {};
@@ -144,6 +146,15 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
     selectedField
   } = React.useMemo(() => {
     let itemField = item.field;
+
+    // Yields a valid value if the current filter belongs to a column that is not filterable
+    const selectedNonFilterableColumn = columnLookup[item.field].filterable === false ? columnLookup[item.field] : null;
+    if (selectedNonFilterableColumn) {
+      return {
+        filteredColumns: [selectedNonFilterableColumn],
+        selectedField: itemField
+      };
+    }
     if (filterColumns === undefined || typeof filterColumns !== 'function') {
       return {
         filteredColumns: filterableColumns,
@@ -165,7 +176,7 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
       }),
       selectedField: itemField
     };
-  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field]);
+  }, [filterColumns, filterModel == null ? void 0 : filterModel.items, filterableColumns, item.field, columnLookup]);
   const sortedFilteredColumns = React.useMemo(() => {
     switch (columnsSort) {
       case 'asc':
@@ -274,7 +285,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         "aria-label": apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         title: apiRef.current.getLocaleText('filterPanelDeleteIconLabel'),
         onClick: handleDeleteFilter,
-        size: "small"
+        size: "small",
+        disabled: readOnly
       }, (_rootProps$slotProps5 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps5.baseIconButton, {
         children: /*#__PURE__*/_jsx(rootProps.slots.filterPanelDeleteIcon, {
           fontSize: "small"
@@ -321,7 +333,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         label: apiRef.current.getLocaleText('filterPanelColumns'),
         value: selectedField != null ? selectedField : '',
         onChange: changeColumn,
-        native: isBaseSelectNative
+        native: isBaseSelectNative,
+        disabled: readOnly
       }, (_rootProps$slotProps7 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps7.baseSelect, {
         children: sortedFilteredColumns.map(col => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
@@ -346,7 +359,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         value: item.operator,
         onChange: changeOperator,
         native: isBaseSelectNative,
-        inputRef: filterSelectorRef
+        inputRef: filterSelectorRef,
+        disabled: readOnly
       }, (_rootProps$slotProps8 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps8.baseSelect, {
         children: currentColumn == null || (_currentColumn$filter2 = currentColumn.filterOperators) == null ? void 0 : _currentColumn$filter2.map(operator => /*#__PURE__*/_createElement(rootProps.slots.baseSelectOption, _extends({}, baseSelectOptionProps, {
           native: isBaseSelectNative,
@@ -364,7 +378,8 @@ const GridFilterForm = /*#__PURE__*/React.forwardRef(function GridFilterForm(pro
         apiRef: apiRef,
         item: item,
         applyValue: applyFilterChanges,
-        focusElementRef: valueRef
+        focusElementRef: valueRef,
+        disabled: readOnly
       }, currentOperator.InputComponentProps, InputComponentProps), item.field) : null
     }))]
   }));
@@ -447,15 +462,17 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    * @default [GridLogicOperator.And, GridLogicOperator.Or]
    */
   logicOperators: PropTypes.arrayOf(PropTypes.oneOf(['and', 'or']).isRequired),
-  /**
-   * The current logic operator applied.
-   */
-  multiFilterOperator: PropTypes.oneOf(['and', 'or']),
   /**
    * Props passed to the operator input component.
    * @default {}
    */
   operatorInputProps: PropTypes.any,
+  /**
+   * `true` if the filter is disabled/read only.
+   * i.e. `colDef.fiterable = false` but passed in `filterModel`
+   * @default false
+   */
+  readOnly: PropTypes.bool,
   /**
    * If `true`, the logic operator field is visible.
    */

package/components/panel/filterPanel/GridFilterPanel.js

@@ -12,7 +12,7 @@ import { GridFilterForm } from './GridFilterForm';
 import { useGridRootProps } from '../../../hooks/utils/useGridRootProps';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { gridFilterModelSelector } from '../../../hooks/features/filter/gridFilterSelector';
-import { gridFilterableColumnDefinitionsSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { gridFilterableColumnDefinitionsSelector, gridFilterableColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getGridFilter = col => ({
@@ -26,6 +26,7 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
   const rootProps = useGridRootProps();
   const filterModel = useGridSelector(apiRef, gridFilterModelSelector);
   const filterableColumns = useGridSelector(apiRef, gridFilterableColumnDefinitionsSelector);
+  const filterableColumnsLookup = useGridSelector(apiRef, gridFilterableColumnLookupSelector);
   const lastFilterRef = React.useRef(null);
   const placeholderFilter = React.useRef(null);
   const {
@@ -98,63 +99,88 @@ const GridFilterPanel = /*#__PURE__*/React.forwardRef(function GridFilterPanel(p
     return placeholderFilter.current ? [placeholderFilter.current] : [];
   }, [filterModel.items, getDefaultFilter]);
   const hasMultipleFilters = items.length > 1;
-  const addNewFilter = () => {
+  const {
+    readOnlyFilters,
+    validFilters
+  } = React.useMemo(() => items.reduce((acc, item) => {
+    if (filterableColumnsLookup[item.field]) {
+      acc.validFilters.push(item);
+    } else {
+      acc.readOnlyFilters.push(item);
+    }
+    return acc;
+  }, {
+    readOnlyFilters: [],
+    validFilters: []
+  }), [items, filterableColumnsLookup]);
+  const addNewFilter = React.useCallback(() => {
     const newFilter = getNewFilter();
     if (!newFilter) {
       return;
     }
     apiRef.current.upsertFilterItems([...items, newFilter]);
-  };
+  }, [apiRef, getNewFilter, items]);
   const deleteFilter = React.useCallback(item => {
-    const shouldCloseFilterPanel = items.length === 1;
+    const shouldCloseFilterPanel = validFilters.length === 1;
     apiRef.current.deleteFilterItem(item);
     if (shouldCloseFilterPanel) {
       apiRef.current.hideFilterPanel();
     }
-  }, [apiRef, items.length]);
-  const handleRemoveAll = () => {
-    if (items.length === 1 && items[0].value === undefined) {
-      apiRef.current.deleteFilterItem(items[0]);
-      apiRef.current.hideFilterPanel();
+  }, [apiRef, validFilters.length]);
+  const handleRemoveAll = React.useCallback(() => {
+    if (validFilters.length === 1 && validFilters[0].value === undefined) {
+      apiRef.current.deleteFilterItem(validFilters[0]);
+      return apiRef.current.hideFilterPanel();
     }
-    apiRef.current.setFilterModel(_extends({}, filterModel, {
-      items: []
+    return apiRef.current.setFilterModel(_extends({}, filterModel, {
+      items: readOnlyFilters
     }));
-  };
+  }, [apiRef, readOnlyFilters, filterModel, validFilters]);
   React.useEffect(() => {
     if (logicOperators.length > 0 && filterModel.logicOperator && !logicOperators.includes(filterModel.logicOperator)) {
       applyFilterLogicOperator(logicOperators[0]);
     }
   }, [logicOperators, applyFilterLogicOperator, filterModel.logicOperator]);
   React.useEffect(() => {
-    if (items.length > 0) {
+    if (validFilters.length > 0) {
       lastFilterRef.current.focus();
     }
-  }, [items.length]);
+  }, [validFilters.length]);
   return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/_jsx(GridPanelContent, {
-      children: items.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
+    children: [/*#__PURE__*/_jsxs(GridPanelContent, {
+      children: [readOnlyFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
         item: item,
         applyFilterChanges: applyFilter,
         deleteFilter: deleteFilter,
         hasMultipleFilters: hasMultipleFilters,
         showMultiFilterOperators: index > 0,
-        multiFilterOperator: filterModel.logicOperator,
         disableMultiFilterOperator: index !== 1,
         applyMultiFilterOperatorChanges: applyFilterLogicOperator,
-        focusElementRef: index === items.length - 1 ? lastFilterRef : null,
+        focusElementRef: null,
+        readOnly: true,
+        logicOperators: logicOperators,
+        columnsSort: columnsSort
+      }, filterFormProps), item.id == null ? index : item.id)), validFilters.map((item, index) => /*#__PURE__*/_jsx(GridFilterForm, _extends({
+        item: item,
+        applyFilterChanges: applyFilter,
+        deleteFilter: deleteFilter,
+        hasMultipleFilters: hasMultipleFilters,
+        showMultiFilterOperators: readOnlyFilters.length + index > 0,
+        disableMultiFilterOperator: readOnlyFilters.length + index !== 1,
+        applyMultiFilterOperatorChanges: applyFilterLogicOperator,
+        focusElementRef: index === validFilters.length - 1 ? lastFilterRef : null,
         logicOperators: logicOperators,
         columnsSort: columnsSort
-      }, filterFormProps), item.id == null ? index : item.id))
+      }, filterFormProps), item.id == null ? index + readOnlyFilters.length : item.id))]
     }), !rootProps.disableMultipleColumnsFiltering && !(disableAddFilterButton && disableRemoveAllButton) ? /*#__PURE__*/_jsxs(GridPanelFooter, {
       children: [!disableAddFilterButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: addNewFilter,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelAddIcon, {})
       }, (_rootProps$slotProps = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps.baseButton, {
         children: apiRef.current.getLocaleText('filterPanelAddFilter')
-      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
+      })) : /*#__PURE__*/_jsx("span", {}), !disableRemoveAllButton && validFilters.length > 0 ? /*#__PURE__*/_jsx(rootProps.slots.baseButton, _extends({
         onClick: handleRemoveAll,
         startIcon: /*#__PURE__*/_jsx(rootProps.slots.filterPanelRemoveAllIcon, {})
       }, (_rootProps$slotProps2 = rootProps.slotProps) == null ? void 0 : _rootProps$slotProps2.baseButton, {

package/components/toolbar/GridToolbarColumnsButton.d.ts

@@ -1,3 +1,15 @@
 import * as React from 'react';
 import { ButtonProps } from '@mui/material/Button';
-export declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { TooltipProps } from '@mui/material/Tooltip';
+interface GridToolbarColumnsButtonProps {
+    /**
+     * The props used for each slot inside.
+     * @default {}
+     */
+    slotProps?: {
+        button?: Partial<ButtonProps>;
+        tooltip?: Partial<TooltipProps>;
+    };
+}
+declare const GridToolbarColumnsButton: React.ForwardRefExoticComponent<GridToolbarColumnsButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { GridToolbarColumnsButton };