[DataGridPremium] Automatic parents and children selection #13757
Conversation
MBilalShafi
added
component: data grid
|
Deploy preview: https://deploy-preview-13757--material-ui-x.netlify.app/ Updated pages: |
There was a problem hiding this comment.
This feature feels great! Congrats, @MBilalShafi!
I noticed it currently only works consistently with one level of hierarchy:
Screen.Recording.2024-07-10.at.11.51.39.mov
Which drives me to a second point, should devs have a way to fine-tune the propagation behavior? (e.g. how many levels should it select, should it also select all parents in the hierarchy)
What do you think, and how could that look like?
github-actions
bot
added
the
PR: out-of-date
This comment was marked as outdated.
This comment was marked as outdated.
github-actions
bot
removed
the
PR: out-of-date
Co-authored-by: José Rodolfo Freitas <[email protected]> Signed-off-by: Bilal Shafi <[email protected]>
MBilalShafi
changed the title
docs/data/data-grid/row-grouping/RowGroupingPropagateSelection.js
Outdated
Show resolved
Hide resolved
MBilalShafi
changed the title
packages/x-data-grid-pro/src/DataGridPro/useDataGridProProps.ts
Outdated
Show resolved
Hide resolved
packages/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
Outdated
Show resolved
Hide resolved
| const checkboxPropsSelector = getCheckboxPropsSelector( | ||
| id, | ||
| rootProps.rowSelectionPropagation?.parents ?? false, | ||
| ); | ||
| const { isIndeterminate, isChecked } = useGridSelector(apiRef, checkboxPropsSelector); |
There was a problem hiding this comment.
What is the benefit of using a selector here if it's recreated every time?
There was a problem hiding this comment.
The selector is created every time yes, but due to the underlying ref used in useGridSelector it will be initialized only once and provide proper reactivity for the isIndeterminate and isChecked props.
The need to recreate the selector should also be solved when we shift to selectors with arguments (in v8) as mentioned in #13757 (comment)
Does it make sense?
There was a problem hiding this comment.
Ah, so createSelector is only used to avoid direct state access (reusing selectors we already have), but we don't benefit from its memoization (because we recreate the selector on every render).
How about using the v8 selector here?
There was a problem hiding this comment.
How about using the v8 selector here?
Yes, that will be the end goal when we enter the v8 pre-release phase. Currently, it's not possible as the parameters' order of v7 selectors and v8 selectors is different.
If we use the v8 selector here, we have to convert the reused selectors to v8 ones for them to work properly.
There was a problem hiding this comment.
Ahh, you're right. The old selectors aren't compatible with v8 selectors 👍🏻
There was a problem hiding this comment.
Selectors are never reactively bound. There just wasn't any case where it made sense. For it to make sense we'd need a use-case like const x = useGridSelector(api, condition ? selectorA : selectorB), but I don't see any case where the type of x would make sense. And even if there was, selectors are so cheap that it's easier to select both slices and do the condition outside. It would have also prevented useGridSelector(api, state => state.x.y).
| const checkboxPropsSelector = getCheckboxPropsSelector( | ||
| id, | ||
| rootProps.rowSelectionPropagation?.parents ?? false, | ||
| ); | ||
| const { isIndeterminate, isChecked } = useGridSelector(apiRef, checkboxPropsSelector); |
There was a problem hiding this comment.
Ah, so createSelector is only used to avoid direct state access (reusing selectors we already have), but we don't benefit from its memoization (because we recreate the selector on every render).
How about using the v8 selector here?
Co-authored-by: Andrew Cherniavskii <[email protected]> Co-authored-by: José Rodolfo Freitas <[email protected]> Signed-off-by: Bilal Shafi <[email protected]>
Signed-off-by: Bilal Shafi <[email protected]>
https://deploy-preview-13757--material-ui-x.netlify.app/x/react-data-grid/row-grouping/#automatic-parents-and-children-selection
Resolves #4248
Resolves #6177
indeterminateCheckboxActionprop: [DataGrid] Allow to control the indeterminate checkbox behavior #14247checkboxSelectionVisibleOnlyreset the selection on filtering #14677Follow up
Stuff that will follow after the PR merge:
propagateRowSelectiondefault behavior to be{ parents: true, descendant: true }createSelectorV8for selectors with arguments at v8