[figma] Add the "tree data" feature to the Data Grid

[olivier-g74]

Steps to reproduce

Link to live example: (required)

Steps:

1. Checked the TreeView as presented in https://mui.com/x/react-data-grid/tree-data/
2. Purchased the latest Design Kit for Figma 5.16.0 at https://mui.com/store/items/figma-react/
3. Looked for the component in the section Data Grid: rows

Current behavior

The component for TreeView is missing

Expected behavior

I would like to have, like it is available fro Row Grouping feature, a component for TreeView

Context

Leverage tree view without having to detach the instance of Row Grouping and change it to mimic Tree View

Your environment

npx @mui/envinfo

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

Search keywords: DataGrid, TreeView
Order ID: Our MUI PRO Project License is purchased by BRZ Austria

Search keywords:

[michelengelen]

@danilo-leal are you handling the design kits?

[michelengelen]

@olivier-g74 are you referring to the tree data feature?
Just asking because we also have a package called TreeView! :D

[olivier-g74]

Hi @michelengelen ,

My bad - I mentioned Tree view where I meant Tree data.

In the Data Grid feature presentation section Group & Pivot, sub-section Tree data (https://mui.com/x/react-data-grid/tree-data/) you can find a demo for a table with a hierarchy but this is missing from the Design kit, incl latest version 5.16.0
This Pro feature is similar to the Premium feature Row grouping but with a clear limitation for the former: Parents and children in the table share the exact same column headers.

Could you please release a dedicated component in the Design kit for the Tree data in Data Grid, not at all the Tree View (sorry for the confusion) in the name.

[danilo-leal]

Heya — thanks for the shoutout @michelengelen! I moved this issue over to the design-kits repo so we can better track it in the context of the Design Kits. We can try to push this one out for the next version.

[olivier-g74]

Can you please note that the Cell 1 that contains the chevron and the Goup name is currently "Align top left" and not "Align left" like the rest of the cells, so when you switch Density of lines from Standard to Compact or Comfortable, it creates an undesired padding.

[adrianmanea]

Noted! We'll do some tests for this case, but it's rather hard to maintain order with so many variables in place (especially undetached). What we recommend is to see these as starting points and undetach and manually adjust Cells.