[docs] Add styling row group recipe #19349
Conversation
siriwatknp
added
docs
|
Deploy preview: https://deploy-preview-19349--material-ui-x.netlify.app/ Updated pages: Bundle size report
|
| if (childNode && childNode.type === 'leaf') { | ||
| const childRow = apiRef.current?.getRow<Movie>(childId); | ||
| if (childRow?.gross && childRow.gross > EXPECTED_GROSS) { | ||
| hasExpectedGross = true; |
There was a problem hiding this comment.
Would directly returning from here also work?
| hasExpectedGross = true; | |
| return 'highlighted-group'; |
| let hasExpectedGross = false; | ||
|
|
||
| for (const childId of childIds) { | ||
| const childNode = apiRef.current?.getRowNode(childId); |
There was a problem hiding this comment.
The recommended approach to get row node would be the gridRowNodeSelector() which is a selector with arguments. getRowNode() is a deprecated method and should not be around by v9.
| const childNode = apiRef.current?.getRowNode(childId); | |
| const childNode = gridRowNodeSelector(apiRef, childId); |
| const data = useMovieData(); | ||
|
|
||
| const getRowClassName = (params: GridRowClassNameParams<Movie>) => { | ||
| const node = apiRef.current?.getRowNode(params.id); |
There was a problem hiding this comment.
| const node = apiRef.current?.getRowNode(params.id); | |
| const node = gridRowNodeSelector(apiRef, params.id); |
| import { | ||
| DataGridPremium, | ||
| useGridApiRef, | ||
| useKeepGroupedColumnsHidden, |
There was a problem hiding this comment.
| useKeepGroupedColumnsHidden, | |
| useKeepGroupedColumnsHidden, | |
| gridRowNodeSelector, |
| position: 'absolute', | ||
| left: 0, | ||
| width: 4, | ||
| height: 'calc(var(--height) * 0.8)', |
There was a problem hiding this comment.
While using CSS variable (--height) definitely adds value, it's not a public API, how about using a local variable to avoid confusion? (same with marginTop)
| height: 'calc(var(--height) * 0.8)', | |
| height: 'calc(rowHeight * 0.8)', |
| let hasExpectedGross = false; | ||
|
|
||
| for (const childId of childIds) { | ||
| const childNode = apiRef.current?.getRowNode(childId); |
There was a problem hiding this comment.
Even better, we could make rowNode a part of GridRowClassNameParams, following the same of GridCellParams so that it's already readily available:
mui-x/packages/x-data-grid/src/models/params/gridCellParams.ts
Lines 44 to 47 in b5026f1
There was a problem hiding this comment.
Do you mean updating the implementation?
There was a problem hiding this comment.
Yes, it should be a minimal and non breaking change.
There was a problem hiding this comment.
Doesn't necessarily need to be done in the same PR though. Keeping the scope relevant should also be fine.
| @@ -37,3 +37,17 @@ By default, the row count in the footer is the number of top level rows that are | |||
| In the demo below, a `CustomFooterRowCount` component is added to the `footerRowCount` slot. This component uses the `gridFilteredDescendantRowCountSelector` to get the number of child rows and display it alongside the number of groups. | |||
|
|
|||
| {{"demo": "RowGroupingChildRowCount.js", "bg": "inline", "defaultCodeOpen": false}} | |||
|
|
|||
| ## Styling row groups based on child conditions | |||
There was a problem hiding this comment.
I'm wondering if we make this recipe an extension of https://mui.com/x/react-data-grid/style/#styling-rows instead, as that one also leverages getRowClassName(). (We can also add a backlink here if necessary)
Wdyt?
There was a problem hiding this comment.
Make sense, it's better to be in that page.
|
|
||
| Use `getRowClassName` to add a custom class to the row group and then write CSS to style it. | ||
|
|
||
| To write a condition, use [`apiRef.current.getRowNode`](/x/api/data-grid/grid-api/#grid-api-prop-getRowNode) to check for the targeted row type and use [`apiRef.current.getRow`](/x/api/data-grid/grid-api/#grid-api-prop-getRow) to get the row data. |
There was a problem hiding this comment.
Sidenote: Due to the imperative nature of apiRef, it's recommended to use selectors instead of apiRef where possible.
There was a problem hiding this comment.
what's about apiRef.current.getRow? I don't see a selector I could use.
There was a problem hiding this comment.
There isn't any, we could create a selector with arguments though on top of gridRowsLookupSelector
We could also possibly do in another PR.
closes #16172
Preview: https://deploy-preview-19349--material-ui-x.netlify.app/x/react-data-grid/recipes-row-grouping/#styling-row-groups-based-on-child-conditions