-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
/
CustomFilterPanelContent.js
102 lines (99 loc) · 3.11 KB
/
CustomFilterPanelContent.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import * as React from 'react';
import { DataGridPro, GridLogicOperator, GridToolbar } from '@mui/x-data-grid-pro';
import { useDemoData } from '@mui/x-data-grid-generator';
const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
export default function CustomFilterPanelContent() {
const { data } = useDemoData({
dataSet: 'Employee',
visibleFields: VISIBLE_FIELDS,
rowLength: 100,
});
return (
<div style={{ height: 400, width: '100%' }}>
<DataGridPro
{...data}
slots={{
toolbar: GridToolbar,
// Use custom FilterPanel only for deep modification
// FilterPanel: MyCustomFilterPanel,
}}
slotProps={{
filterPanel: {
// Force usage of "And" operator
logicOperators: [GridLogicOperator.And],
// Display columns by ascending alphabetical order
columnsSort: 'asc',
filterFormProps: {
// Customize inputs by passing props
logicOperatorInputProps: {
variant: 'outlined',
size: 'small',
},
columnInputProps: {
variant: 'outlined',
size: 'small',
sx: { mt: 'auto' },
},
operatorInputProps: {
variant: 'outlined',
size: 'small',
sx: { mt: 'auto' },
},
valueInputProps: {
InputComponentProps: {
variant: 'outlined',
size: 'small',
},
},
deleteIconProps: {
sx: {
'& .MuiSvgIcon-root': { color: '#d32f2f' },
},
},
},
sx: {
// Customize inputs using css selectors
'& .MuiDataGrid-filterForm': { p: 2 },
'& .MuiDataGrid-filterForm:nth-child(even)': {
backgroundColor: (theme) =>
theme.palette.mode === 'dark' ? '#444' : '#f5f5f5',
},
'& .MuiDataGrid-filterFormLogicOperatorInput': { mr: 2 },
'& .MuiDataGrid-filterFormColumnInput': { mr: 2, width: 150 },
'& .MuiDataGrid-filterFormOperatorInput': { mr: 2 },
'& .MuiDataGrid-filterFormValueInput': { width: 200 },
},
},
}}
initialState={{
...data.initialState,
filter: {
...data.initialState?.filter,
filterModel: {
items: [
{
id: 1,
field: 'name',
operator: 'contains',
value: 'D',
},
{
id: 2,
field: 'name',
operator: 'contains',
value: 'D',
},
{
id: 3,
field: 'rating',
operator: '>',
value: '0',
},
],
},
},
}}
/>
</div>
);
}