[DataGrid] Customize FilterPanel with props

docs/data/data-grid/filtering/CustomFilterPanel.js → docs/data/data-grid/filtering/CustomFilterPanelPosition.js

@@ -19,7 +19,7 @@ CustomToolbar.propTypes = {
   setFilterButtonEl: PropTypes.func.isRequired,
 };
 
-export default function CustomFilterPanel() {
+export default function CustomFilterPanelPosition() {
   const { data } = useDemoData({
     dataSet: 'Employee',
     visibleFields: VISIBLE_FIELDS,

docs/data/data-grid/filtering/CustomFilterPanel.tsx → docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx

@@ -16,7 +16,7 @@ const CustomToolbar: React.FunctionComponent<{
   </GridToolbarContainer>
 );
 
-export default function CustomFilterPanel() {
+export default function CustomFilterPanelPosition() {
   const { data } = useDemoData({
     dataSet: 'Employee',
     visibleFields: VISIBLE_FIELDS,

docs/data/data-grid/filtering/filtering.md

@@ -235,7 +235,8 @@ In the demo below, the `rating` column only has the `<` and `>` operators.
 ### Edit an operator
 
 The value used by the operator to look for has to be entered by the user.
-On most column types, a text field is used. However, a custom component can be rendered instead.
+On most column types, a text field is used.
+However, a custom component can be rendered instead.
 
 In the demo below, the `rating` column reuses the numeric operators but the rating component is used to enter the value of the filter.
 
@@ -259,9 +260,34 @@ const ratingColumnType: GridColTypeDef = {
 
 You can customize the rendering of the filter panel as shown in [the component section](/components/data-grid/components/#overriding-components) of the documentation.
 
+### Customize the filter panel content
+
+The customization of the filter panel content can be performed by passing props to the default `<GridFilterPanel />` component.
+The available props allow to override:
+
+- The available `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)
+- The order of the column selector (can be `"asc"` or `"desc"`)
+- Any prop of the input components
+
+Input components can be [customized](/customization/how-to-customize/) by using two approaches.
+You can pass a `sx` prop to any input container or you can use css selectors on nested components of the filter panel.
+More details are available in the demo.
+
+| Props                    | Class                                     |
+| :----------------------- | :---------------------------------------- |
+| `deleteIconProps`        | `MuiDataGrid-filterFormDeleteIcon`        |
+| `linkOperatorInputProps` | `MuiDataGrid-filterFormLinkOperatorInput` |
+| `columnInputProps`       | `MuiDataGrid-filterFormColumnInput`       |
+| `operatorInputProps`     | `MuiDataGrid-filterFormOperatorInput`     |
+| `valueInputProps`        | `MuiDataGrid-filterFormValueInput`        |
+
+{{"demo": "pages/components/data-grid/filtering/CustomFilterPanelContent.js", "bg": "inline"}}
+
+### Customize the filter panel position
+
 The demo below shows how to anchor the filter panel to the toolbar button instead of the column header.
 
-{{"demo": "CustomFilterPanel.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"demo": "CustomFilterPanelPosition.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ## Server-side filter
 

docs/pages/api-docs/data-grid/data-grid-pro.json

@@ -332,6 +332,11 @@
       "paper",
       "editBooleanCell",
       "filterForm",
+      "filterFormDeleteIcon",
+      "filterFormLinkOperatorInput",
+      "filterFormColumnInput",
+      "filterFormOperatorInput",
+      "filterFormValueInput",
       "editInputCell",
       "filterIcon",
       "footerContainer",

docs/pages/api-docs/data-grid/data-grid.json

@@ -274,6 +274,11 @@
       "paper",
       "editBooleanCell",
       "filterForm",
+      "filterFormDeleteIcon",
+      "filterFormLinkOperatorInput",
+      "filterFormColumnInput",
+      "filterFormOperatorInput",
+      "filterFormValueInput",
       "editInputCell",
       "filterIcon",
       "footerContainer",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -332,6 +332,11 @@
       "paper",
       "editBooleanCell",
       "filterForm",
+      "filterFormDeleteIcon",
+      "filterFormLinkOperatorInput",
+      "filterFormColumnInput",
+      "filterFormOperatorInput",
+      "filterFormValueInput",
       "editInputCell",
       "filterIcon",
       "footerContainer",

docs/pages/x/api/data-grid/data-grid.json

@@ -274,6 +274,11 @@
       "paper",
       "editBooleanCell",
       "filterForm",
+      "filterFormDeleteIcon",
+      "filterFormLinkOperatorInput",
+      "filterFormColumnInput",
+      "filterFormOperatorInput",
+      "filterFormValueInput",
       "editInputCell",
       "filterIcon",
       "footerContainer",

docs/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -324,6 +324,26 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the filter form component"
     },
+    "filterFormDeleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the delete icon of the filter form component"
+    },
+    "filterFormLinkOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the link operator inout of the filter form component"
+    },
+    "filterFormColumnInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column input of the filter form component"
+    },
+    "filterFormOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the operator input of the filter form component"
+    },
+    "filterFormValueInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the value input of the filter form component"
+    },
     "editInputCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the input component"

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -324,6 +324,26 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the filter form component"
     },
+    "filterFormDeleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the delete icon of the filter form component"
+    },
+    "filterFormLinkOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the link operator inout of the filter form component"
+    },
+    "filterFormColumnInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column input of the filter form component"
+    },
+    "filterFormOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the operator input of the filter form component"
+    },
+    "filterFormValueInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the value input of the filter form component"
+    },
     "editInputCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the input component"

docs/translations/api-docs/data-grid/data-grid-pro.json

@@ -324,6 +324,26 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the filter form component"
     },
+    "filterFormDeleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the delete icon of the filter form component"
+    },
+    "filterFormLinkOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the link operator inout of the filter form component"
+    },
+    "filterFormColumnInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column input of the filter form component"
+    },
+    "filterFormOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the operator input of the filter form component"
+    },
+    "filterFormValueInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the value input of the filter form component"
+    },
     "editInputCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the input component"

docs/translations/api-docs/data-grid/data-grid-pt.json

@@ -293,6 +293,26 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the filter form component"
     },
+    "filterFormDeleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the delete icon of the filter form component"
+    },
+    "filterFormLinkOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the link operator inout of the filter form component"
+    },
+    "filterFormColumnInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column input of the filter form component"
+    },
+    "filterFormOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the operator input of the filter form component"
+    },
+    "filterFormValueInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the value input of the filter form component"
+    },
     "editInputCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the input component"

docs/translations/api-docs/data-grid/data-grid-zh.json

@@ -293,6 +293,26 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the filter form component"
     },
+    "filterFormDeleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the delete icon of the filter form component"
+    },
+    "filterFormLinkOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the link operator inout of the filter form component"
+    },
+    "filterFormColumnInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column input of the filter form component"
+    },
+    "filterFormOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the operator input of the filter form component"
+    },
+    "filterFormValueInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the value input of the filter form component"
+    },
     "editInputCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the input component"

docs/translations/api-docs/data-grid/data-grid.json

@@ -293,6 +293,26 @@
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the filter form component"
     },
+    "filterFormDeleteIcon": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the delete icon of the filter form component"
+    },
+    "filterFormLinkOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the link operator inout of the filter form component"
+    },
+    "filterFormColumnInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the column input of the filter form component"
+    },
+    "filterFormOperatorInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the operator input of the filter form component"
+    },
+    "filterFormValueInput": {
+      "description": "Styles applied to {{nodeName}}.",
+      "nodeName": "the value input of the filter form component"
+    },
     "editInputCell": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the root of the input component"

packages/grid/_modules_/grid/components/panel/GridPanelWrapper.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import TrapFocus from '@mui/material/Unstable_TrapFocus';
-import { styled } from '@mui/material/styles';
+import { styled, Theme } from '@mui/material/styles';
+import { MUIStyledCommonProps } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
@@ -34,9 +35,11 @@ const GridPanelWrapperRoot = styled('div', {
 
 const isEnabled = () => true;
 
-export function GridPanelWrapper(
-  props: React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
-) {
+interface GridPanelWrapperProps
+  extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>,
+    MUIStyledCommonProps<Theme> {}
+
+function GridPanelWrapper(props: GridPanelWrapperProps) {
   const { className, ...other } = props;
   const rootProps = useGridRootProps();
   const ownerState = { classes: rootProps.classes };
@@ -48,3 +51,5 @@ export function GridPanelWrapper(
     </TrapFocus>
   );
 }
+
+export { GridPanelWrapper };