Skip to content

[docs][data grid] Revise the Row Grouping doc (@mapache-salvaje) #17494

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: v7.x
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/.link-check-errors.txt
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
Broken links found by `docs:link-check` that exist:

- https://mui.com/x/react-data-grid/cells/
- https://mui.com/x/react-data-grid/row-grouping/#disable-the-row-grouping
- https://mui.com/x/react-tree-view/quickstart/#rich-tree-view
- https://mui.com/x/react-tree-view/quickstart/#simple-tree-view
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export default function RowGroupingPropagateSelection() {
}
/>
}
label="Auto select descendants"
label="Auto-select descendants"
/>
<FormControlLabel
control={
Expand All @@ -55,7 +55,7 @@ export default function RowGroupingPropagateSelection() {
}
/>
}
label="Auto select parents"
label="Auto-select parents"
/>
</Stack>
<div style={{ height: 400 }}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export default function RowGroupingPropagateSelection() {
}
/>
}
label="Auto select descendants"
label="Auto-select descendants"
/>
<FormControlLabel
control={
Expand All @@ -57,7 +57,7 @@ export default function RowGroupingPropagateSelection() {
}
/>
}
label="Auto select parents"
label="Auto-select parents"
/>
</Stack>
<div style={{ height: 400 }}>
Expand Down
238 changes: 123 additions & 115 deletions docs/data/data-grid/row-grouping/row-grouping.md

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions docs/data/data-grid/server-side-data/tree-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,8 @@ The demo below shows a toast apart from the default error message in the groupin

## Group expansion

The idea behind the group expansion is the same as explained in the [Row grouping](/x/react-data-grid/row-grouping/#group-expansion) section.
The difference is that the data is not initially available and is fetched automatically after the Data Grid is mounted based on the props `defaultGroupingExpansionDepth` and `isGroupExpandedByDefault` in a waterfall manner.
Group expansion of server-side tree data works similarly to how it's described in [Row grouping—Group expansion](/x/react-data-grid/row-grouping/#group-expansion).
The difference is that the data is not initially available and is fetched automatically after the Data Grid is mounted based on the props `defaultGroupingExpansionDepth` and `isGroupExpandedByDefault()` in a waterfall manner.

The following demo uses `defaultGroupingExpansionDepth={-1}` to expand all levels of the tree by default.

Expand Down
6 changes: 3 additions & 3 deletions docs/data/data-grid/tree-data/tree-data.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ If you want to access the grouping column field, for instance, to use it with co

## Group expansion

Same behavior as for the [Row grouping](/x/react-data-grid/row-grouping/#group-expansion).
Group expansion for tree data works similarly to how it's described in [Row grouping—Group expansion](/x/react-data-grid/row-grouping/#group-expansion).

## Automatic parents and children selection
## Automatic parent and child selection

Same behavior as for the [Row grouping](/x/react-data-grid/row-grouping/#automatic-parents-and-children-selection).
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.

## Gaps in the tree

Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/components/WhatsNewLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const entries = [
url: '/x/react-data-grid/row-spanning/',
},
{
title: 'Data Grid – Automatic parents and children selection',
url: '/x/react-data-grid/row-grouping/#automatic-parents-and-children-selection',
title: 'Data Grid – Automatic parent and child selection',
url: '/x/react-data-grid/row-grouping/#automatic-parent-and-child-selection',
},
{
title: 'Date and Time Pickers – Support date-fns v4',
Expand Down
Loading