search

mui / mui-design-kits

The public feature and bug tracker for the MUI Design kits and Connect Figma plugin.
https://mui.com/design-kits/
106 stars 15 forks source link

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

Open olivier-g74 opened 3 months ago

olivier-g74 commented 3 months ago

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 commented 3 months ago

@danilo-leal are you handling the design kits?

michelengelen commented 3 months ago

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

olivier-g74 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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. image image image

adrianmanea commented 3 months ago

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.