[DataGridPro] Style rows based on the tree depth / grouping field

[lincolnmqs]

Order ID 💳

35305

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I'm using Tree Data to display data with parent/child relationships. I would like to know if it is possible to change the background color of the child row.

The problem in depth 🔍

In the image is the table, with the information in the parent and child row. Is it possible to change the background color of these markings to red?

Tree Data: https://mui.com/pt/components/data-grid/group-pivot/#tree-data

Context 🔦

I'm using Tree Data to display data with parent/child relationships. I would like to know if it is possible to change the background color of the child row. I would like this functionality to better visually differentiate the parent and child row.

Your environment 🌎

`npx @mui/envinfo`

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

[flaviendelangle]

Hi

At some point we should probably add classes or data attributes with the depth and the grouping field. But for now, the only way I am seeing it to wrap the GridRow component to retrieve the depth manually and set some styles based on it:

https://codesandbox.io/s/datagrid-v5-quick-start-forked-4541l?file=/src/App.tsx

You can find all the informations about the node here: https://github.com/mui-org/material-ui-x/blob/master/packages/grid/_modules_/grid/models/gridRows.ts#L21

---

I am adding the enhancement label and renaming the issue to propose new classes to avoid using component override :+1:

[lincolnmqs]

@flaviendelangle Thanks a lot for the help!

[flaviendelangle]

I'm reopining it to keep the track of the "easier" solution to implement on our side :+1:

[ckunderd]

+1 on this if it's possible!