-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DataGrid] Allow to filter non-filterable columns programmatically #11538
Changes from 9 commits
f876266
0197ca8
73ec029
bd97d9b
02174e6
2fbdec1
c2f354c
1aeb33a
243ae70
fd6b776
19386b1
81497f6
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import * as React from 'react'; | ||
import { DataGrid, GridToolbar } from '@mui/x-data-grid'; | ||
import { useDemoData } from '@mui/x-data-grid-generator'; | ||
|
||
const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; | ||
|
||
export default function ReadOnlyFilters() { | ||
const { data } = useDemoData({ | ||
dataSet: 'Employee', | ||
visibleFields: VISIBLE_FIELDS, | ||
rowLength: 100, | ||
}); | ||
|
||
const columns = React.useMemo( | ||
() => | ||
data.columns.map((column) => ({ | ||
...column, | ||
filterable: column.field !== 'name', | ||
})), | ||
[data.columns], | ||
); | ||
|
||
const [filterModel, setFilterModel] = React.useState({ | ||
items: [ | ||
{ | ||
field: 'name', | ||
operator: 'contains', | ||
value: 'a', | ||
}, | ||
], | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGrid | ||
{...data} | ||
columns={columns} | ||
slots={{ | ||
toolbar: GridToolbar, | ||
}} | ||
filterModel={filterModel} | ||
onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)} | ||
/> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
import * as React from 'react'; | ||
import { DataGrid, GridFilterModel, GridToolbar } from '@mui/x-data-grid'; | ||
import { useDemoData } from '@mui/x-data-grid-generator'; | ||
|
||
const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin']; | ||
|
||
export default function ReadOnlyFilters() { | ||
const { data } = useDemoData({ | ||
dataSet: 'Employee', | ||
visibleFields: VISIBLE_FIELDS, | ||
rowLength: 100, | ||
}); | ||
|
||
const columns = React.useMemo( | ||
() => | ||
data.columns.map((column) => ({ | ||
...column, | ||
filterable: column.field !== 'name', | ||
})), | ||
[data.columns], | ||
); | ||
|
||
const [filterModel, setFilterModel] = React.useState<GridFilterModel>({ | ||
items: [ | ||
{ | ||
field: 'name', | ||
operator: 'contains', | ||
value: 'a', | ||
}, | ||
], | ||
}); | ||
|
||
return ( | ||
<div style={{ height: 400, width: '100%' }}> | ||
<DataGrid | ||
{...data} | ||
columns={columns} | ||
slots={{ | ||
toolbar: GridToolbar, | ||
}} | ||
filterModel={filterModel} | ||
onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)} | ||
/> | ||
</div> | ||
); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
<DataGrid | ||
{...data} | ||
columns={columns} | ||
slots={{ | ||
toolbar: GridToolbar, | ||
}} | ||
filterModel={filterModel} | ||
onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)} | ||
/> |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -127,6 +127,26 @@ In the example below, the _rating_ column can not be filtered. | |
|
||
{{"demo": "DisableFilteringGridSomeColumns.js", "bg": "inline", "defaultCodeOpen": false}} | ||
|
||
### Filter non-filterable columns programmatically | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Update in context of #11512 (comment) |
||
|
||
You can initialize the `filterModel`, set the `filterModel` prop, or use the API method `apiRef.current.setFilterModel` to set the filters for columns with non-filterable columns. These filters will be applied but will be read-only on the UI and the user won't be able to change them. | ||
MBilalShafi marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```jsx | ||
const columns = [ | ||
{ field: 'name', filterable: false }, | ||
...otherColumns, | ||
] | ||
|
||
<DataGrid | ||
filterModel={{ | ||
items: [{ field: 'name', operator: 'contains', value: 'a' }], | ||
}} | ||
columns={columns} | ||
/> | ||
``` | ||
|
||
{{"demo": "ReadOnlyFilters.js", "bg": "inline", "defaultCodeOpen": false}} | ||
|
||
## Ignore diacritics (accents) | ||
|
||
You can ignore diacritics (accents) when filtering the rows. See [Quick filter - Ignore diacritics (accents)](/x/react-data-grid/filtering/quick-filter/#ignore-diacritics-accents). | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -205,30 +205,6 @@ | |
"default": "ArrowDropDown", | ||
"class": null | ||
}, | ||
{ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @alexfauquette This seems to be a side-effect of #11303, some items are reordered for no reason after There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @michaldudak Should we sort them in a specific order? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. IMO slots order should reflect the source. Usually we want to have the root slot at the top. Or we could sort them alphabetically but place 'root' at the top. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. By the way it can be a configuration parameter: |
||
"name": "desktopPaper", | ||
"description": "Custom component for the paper rendered inside the desktop picker's Popper.", | ||
"default": "PickersPopperPaper", | ||
"class": null | ||
}, | ||
{ | ||
"name": "desktopTransition", | ||
"description": "Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).", | ||
"default": "Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.", | ||
"class": null | ||
}, | ||
{ | ||
"name": "desktopTrapFocus", | ||
"description": "Custom component for trapping the focus inside the views on desktop.", | ||
"default": "FocusTrap from '@mui/base'.", | ||
"class": null | ||
}, | ||
{ | ||
"name": "popper", | ||
"description": "Custom component for the popper inside which the views are rendered on desktop.", | ||
"default": "Popper from '@mui/material'.", | ||
"class": null | ||
}, | ||
{ | ||
"name": "actionBar", | ||
"description": "Custom component for the action bar, it is placed below the picker views.", | ||
|
@@ -274,6 +250,30 @@ | |
"default": "IconButton", | ||
"class": null | ||
}, | ||
{ | ||
"name": "desktopPaper", | ||
"description": "Custom component for the paper rendered inside the desktop picker's Popper.", | ||
"default": "PickersPopperPaper", | ||
"class": null | ||
}, | ||
{ | ||
"name": "desktopTransition", | ||
"description": "Custom component for the desktop popper [Transition](https://mui.com/material-ui/transitions/).", | ||
"default": "Grow or Fade from '@mui/material' when `reduceAnimations` is `true`.", | ||
"class": null | ||
}, | ||
{ | ||
"name": "desktopTrapFocus", | ||
"description": "Custom component for trapping the focus inside the views on desktop.", | ||
"default": "FocusTrap from '@mui/base'.", | ||
"class": null | ||
}, | ||
{ | ||
"name": "popper", | ||
"description": "Custom component for the popper inside which the views are rendered on desktop.", | ||
"default": "Popper from '@mui/material'.", | ||
"class": null | ||
}, | ||
{ "name": "field", "description": "", "class": null } | ||
], | ||
"classes": [], | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since the MIT Grid allows one filter at a max, I have allowed clearing the read-only filter by adding a filter on another column. Users can prevent this by controlling the filter and not updating the
filterModel
onfilterModelChange
.