[data grid] How to programmatically expand rows

[shoxter]

The problem in depth

There is currently an example for master detail that shows how to expand/collapse all in a custom header component (here). I want to do the same but for row groupings (expand/collapse all the groupings) but I can't find any selectors that would allow for this or any functions in the API itself as all of the expansion state functions are concerned with master/detail from what I can tell. How can I achieve what I'm looking to do?

Your environment

`npx @mui/envinfo`

``` Don't forget to mention which browser you used. Output from `npx @mui/envinfo` goes here. ```

Search keywords: row grouping selector api Order ID: 96266

[michelengelen]

You can use the setRowChildrenExpansion on the apiRef for that.

[shoxter]

You can use the setRowChildrenExpansion on the apiRef for that.

For clarity, I think what I was looking for is something similar to the behavior of the recipe for the master/detail expand/collapse all. That being, a way to know what rows are currently collapsed/expanded so I know what type of button I need to display (collapse all vs expand all).

[michelengelen]

you can get the current grouping rows with this:

// on the root level
const groups = apiRef.current.getRowNode<GridGroupNode>(GRID_ROOT_GROUP_ID)!.children;

if you want deeper levels you would need to run this for the respective parent rows.

With this you get the groupIds (rowIds from the grouping rows), with which you can check the current expansion state:

const areSomeRowsExpanded = groups.some((groupId) => apiRef.current.getRowNode<GridGroupNode>(groupId)!.childrenExpanded);