[data grid][docs] Audit and revise the tree data doc #17650
Conversation
mapache-salvaje
added
docs
|
Deploy preview: https://deploy-preview-17650--material-ui-x.netlify.app/ Updated pages: |
|
|
||
| The behavior for automatic parent and child selection is the same as for row grouping—see [the relevant section](/x/react-data-grid/row-grouping/#automatic-parent-and-child-selection) in that feature's documentation for details. | ||
| For complete details on automatic parent and child selection, see [Row grouping—Automatic parent and child selection](/x/react-data-grid/row-grouping/#automatic-parent-and-child-selection). | ||
| The implementation and behavior are the same when working with tree data. | ||
|
|
||
| ## Gaps in the tree |
There was a problem hiding this comment.
I spent a fair amount of time poking around in this demo and I have to admit that I don't understand what this feature does exactly. 😅 I see that there are some entries missing in the dataset—Is this just pointing out that the Data Grid will render tree data without errors if there are entries missing?
There was a problem hiding this comment.
OK this section lacks a lot of content.
Imagine I give you the following rows:
[
{ path: ["A"] },
{ path: ["A", "B", "C"],
]
If you enable the tree data, in order to correctly render the dataset, we lack a { path: ["A", "B"] } row.
Instead of crashing, we create an internal row.
The classic use case is when you only have the leaves in your database (or if you have all the rows except for the root ones).
Here is AG Grid doc for reference.
There was a problem hiding this comment.
This demo is kind of boring 😅 and the data doesn't line up with the examples that come before it, which confused me on first read. I don't think it's really necessary.
| @@ -83,42 +110,40 @@ If you want to access the grouping column field, for instance, to use it with co | |||
| /> | |||
| ``` | |||
|
|
|||
| ## Group expansion | |||
| ## Group expansion with tree data | |||
There was a problem hiding this comment.
adding "with tree data" to these headers to ideally make them easier to locate when searching
| @@ -138,7 +138,7 @@ export default function TreeDataDisableChildrenFiltering() { | |||
| } | |||
| label={ | |||
| <Typography component="span"> | |||
| Enable <code>disableChildrenFiltering</code> | |||
| Apply <code>disableChildrenFiltering</code> | |||
There was a problem hiding this comment.
"Enable disable" was really confusing to me! 😂
| The Data Grid Pro can use tree data to render grouped rows with nested children. | ||
| The demo below illustrates this feature with a large and complex hierarchical dataset: | ||
|
|
||
| {{"demo": "TreeDataFullExample.js", "bg": "inline", "defaultCodeOpen": false}} |
There was a problem hiding this comment.
We tend to put full featured demos like this at the bottom of the doc, but I think they're much better positioned at the top to show off the features and let the most advanced users dig right into the code.
WIP
Part of the ongoing auditing/editing project, prioritizing Pro and Premium features.