[docs] Add recipe for save and manage filters from the panel #19361
Conversation
siriwatknp
added
docs
|
Deploy preview: https://deploy-preview-19361--material-ui-x.netlify.app/ Updated pages: Bundle size report
|
siriwatknp
changed the title
siriwatknp
force-pushed
the
docs/filter-recipe
branch
from
8327e04 to
59a9f7d
Compare
| if (!store.activePresetId) { | ||
| return; | ||
| } |
There was a problem hiding this comment.
Nit: This condition is unlikely to be met, since the button will be disabled on this condition anyways.
| if (!store.activePresetId) { | |
| return; | |
| } |
There was a problem hiding this comment.
I think the function should be independent from UI to avoid error when activePresetId is not present (somehow).
There was a problem hiding this comment.
But, better to remove it since without activePresetId, the code still function.
There was a problem hiding this comment.
This is kind of a nitpick anyways, feel free to chose whatever feels better. 👍
| const getCurrentFilterModel = () => apiRef.current.state.filter.filterModel; | ||
| const hasActiveFilters = () => getCurrentFilterModel().items.length > 0; |
There was a problem hiding this comment.
Since useGridSelector ensures reactive binding, the value of filterModel will always be latest.
| const getCurrentFilterModel = () => apiRef.current.state.filter.filterModel; | |
| const hasActiveFilters = () => getCurrentFilterModel().items.length > 0; | |
| const filterModel = useGridSelector(apiRef, gridFilterModelSelector); | |
| const hasActiveFilters = filterModel.items.length > 0; |
| </Typography> | ||
| <Stack direction="row" spacing={0.5}> | ||
| <Tooltip title="Create new filter"> | ||
| <IconButton |
There was a problem hiding this comment.
Optional improvment: Add button could be made disabled if the current filters are already saved to a Preset, to avoid having multiple presets for exact same filter.
Feel free to drop the suggestion.
| }} | ||
| > | ||
| <Typography variant="subtitle2" sx={{ fontWeight: 'bold' }}> | ||
| Saved Filters |
There was a problem hiding this comment.
This is clearer to me, wdyt?
| Saved Filters | |
| Saved Filter Presets |
|
|
||
| Create a custom filter panel by wrapping the `GridFilterPanel` component and pass it to the `slots.filterPanel` prop. | ||
|
|
||
| In the demo below, the custom component lets users save and manage filters that are persisted in the local storage. You can replace the local storage with a more scalable solution like a server-side database. |
There was a problem hiding this comment.
| In the demo below, the custom component lets users save and manage filters that are persisted in the local storage. You can replace the local storage with a more scalable solution like a server-side database. | |
| In the demo below, the custom component allows users to save and manage filters, which are stored in local storage. | |
| For a more scalable approach, you can replace local storage with a server-side database. |
…terial-ui-x into docs/filter-recipe
…o docs/filter-recipe
closes #13430
Preview: https://deploy-preview-19361--material-ui-x.netlify.app/x/react-data-grid/filtering-recipes/#save-and-manage-filters-from-the-panel