[DataGrid] Customize FilterPanel with props

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

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

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

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

docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.js

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { DataGridPro, GridLinkOperator, GridToolbar } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+const initialState = {
+  filter: {
+    filterModel: {
+      items: [
+        {
+          id: 1,
+          columnField: 'name',
+          operatorValue: 'contains',
+          value: 'D',
+        },
+        {
+          id: 2,
+          columnField: 'name',
+          operatorValue: 'contains',
+          value: 'D',
+        },
+        {
+          id: 3,
+          columnField: 'rating',
+          operatorValue: '>',
+          value: '0',
+        },
+      ],
+    },
+  },
+};
+
+export default function CustomFilterPanelContent() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        components={{
+          Toolbar: GridToolbar,
+          // Use custom FilterPanel only for deep modification
+          // FilterPanel: MyCustomFilterPanel,
+        }}
+        componentsProps={{
+          filterPanel: {
+            // Force to use "And" operator
+            linkOperators: [GridLinkOperator.And],
+            // Display columns by ascending alphabetical order
+            columnsSort: 'asc',
+            filterFormProps: {
+              // Customize inputs by passing props
+              columnInputProps: {
+                variant: 'outlined',
+                size: 'small',
+                sx: { justifyContent: 'flex-end' },
+              },
+              operatorInputProps: {
+                variant: 'outlined',
+                size: 'small',
+                sx: { justifyContent: 'flex-end' },
+              },
+              valueInputProps: {
+                required: true,
+              },
+            },
+            sx: {
+              // Customize inputs using css selectors
+              '& .MuiDataGrid-filterForm': { p: 2 },
+              '& .MuiDataGrid-filterForm:nth-child(even)': {
+                backgroundColor: (theme) =>
+                  theme.palette.mode === 'dark' ? '#444' : '#ddd',
+              },
+              '& .MuiDataGrid-filterFormDeleteIcon': { display: 'none' },
+              '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 },
+              '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 },
+              '& .MuiDataGrid-filterFormOperatorInput': { mr: 5 },
+              '& .MuiDataGrid-filterFormValueInput': { width: 300 },
+            },
+          },
+        }}
+        initialState={initialState}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/filtering/CustomFilterPanelContent.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { DataGridPro, GridLinkOperator, GridToolbar } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
+
+const initialState = {
+  filter: {
+    filterModel: {
+      items: [
+        {
+          id: 1,
+          columnField: 'name',
+          operatorValue: 'contains',
+          value: 'D',
+        },
+        {
+          id: 2,
+          columnField: 'name',
+          operatorValue: 'contains',
+          value: 'D',
+        },
+        {
+          id: 3,
+          columnField: 'rating',
+          operatorValue: '>',
+          value: '0',
+        },
+      ],
+    },
+  },
+};
+
+export default function CustomFilterPanelContent() {
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    visibleFields: VISIBLE_FIELDS,
+    rowLength: 100,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        components={{
+          Toolbar: GridToolbar,
+          // Use custom FilterPanel only for deep modification
+          // FilterPanel: MyCustomFilterPanel,
+        }}
+        componentsProps={{
+          filterPanel: {
+            // Force to use "And" operator
+            linkOperators: [GridLinkOperator.And],
+            // Display columns by ascending alphabetical order
+            columnsSort: 'asc',
+            filterFormProps: {
+              // Customize inputs by passing props
+              columnInputProps: {
+                variant: 'outlined',
+                size: 'small',
+                sx: { justifyContent: 'flex-end' },
+              },
+              operatorInputProps: {
+                variant: 'outlined',
+                size: 'small',
+                sx: { justifyContent: 'flex-end' },
+              },
+              valueInputProps: {
+                required: true,
+              },
+            },
+            sx: {
+              // Customize inputs using css selectors
+              '& .MuiDataGrid-filterForm': { p: 2 },
+              '& .MuiDataGrid-filterForm:nth-child(even)': {
+                backgroundColor: (theme) =>
+                  theme.palette.mode === 'dark' ? '#444' : '#ddd',
+              },
+              '& .MuiDataGrid-filterFormDeleteIcon': { display: 'none' },
+              '& .MuiDataGrid-filterFormLinkOperatorInput': { mr: 2 },
+              '& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 200 },
+              '& .MuiDataGrid-filterFormOperatorInput': { mr: 5 },
+              '& .MuiDataGrid-filterFormValueInput': { width: 300 },
+            },
+          },
+        }}
+        initialState={initialState}
+      />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/filtering/CustomFilterPanel.js → docs/src/pages/components/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/src/pages/components/data-grid/filtering/CustomFilterPanel.tsx → docs/src/pages/components/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/src/pages/components/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 props available 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": "pages/components/data-grid/filtering/CustomFilterPanel.js", "bg": "inline", "defaultCodeOpen": false}}
+{{"demo": "pages/components/data-grid/filtering/CustomFilterPanelPosition.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ## Server-side filter
 

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

@@ -303,6 +303,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

@@ -303,6 +303,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

@@ -303,6 +303,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

@@ -274,6 +274,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"