Skip to content
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.

Sign up for GitHub

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

[docs][data grid] Copyedit the Row Grouping doc #16217

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
+17 −13
Draft

[docs][data grid] Copyedit the Row Grouping doc #16217

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 17 additions & 13 deletions docs/data/data-grid/row-grouping/row-grouping.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@ In the following example, movies are grouped based on their production `company`
If you are looking for row grouping on the server-side, see [server-side row grouping](/x/react-data-grid/server-side-data/row-grouping/).
:::

## Grouping criteria
## Initializing row grouping

### Initialize the row grouping

The easiest way to get started with the feature is to provide its model to the `initialState` prop:
To initialize row grouping, provide the model to the `initialState` prop:

```ts
<DataGridPremium
Expand All @@ -36,7 +34,7 @@ This example groups all the movies matching the same company name, followed by a

{{"demo": "RowGroupingInitialState.js", "bg": "inline", "defaultCodeOpen": false}}

### Controlled row grouping
## Controlled row grouping

If you need to control the state of the criteria used for grouping, use the `rowGroupingModel` prop.
You can use the `onRowGroupingModelChange` prop to listen to changes to the grouping criteria and update the prop accordingly.
Expand Down Expand Up @@ -178,7 +176,7 @@ return (

{{"demo": "RowGroupingUseKeepGroupedColumnsHidden.js", "bg": "inline", "defaultCodeOpen": false}}

## Disable the row grouping
## Disable row grouping

### For all columns

Expand All @@ -188,14 +186,14 @@ It will disable all the features related to the row grouping, even if a model is

{{"demo": "RowGroupingDisabled.js", "bg": "inline", "defaultCodeOpen": false}}

### For some columns
### For specific columns

In case you need to disable grouping on specific column(s), set the `groupable` property on the respective column definition (`GridColDef`) to `false`.
In the example below, the `director` column cannot be grouped. In all examples, the `title` and `gross` columns cannot be grouped.

{{"demo": "RowGroupingColDefCanBeGrouped.js", "bg": "inline", "defaultCodeOpen": false}}

### Grouping non-groupable columns programmatically
### Grouping non-groupable columns

To apply row grouping programmatically on non-groupable columns (columns with `groupable: false` in the [column definition](/x/api/data-grid/grid-col-def/)), you can provide row grouping model in one of the following ways:

Expand All @@ -207,7 +205,7 @@ In the following example, the column `company` is not groupable from the UI but

{{"demo": "RowGroupingReadOnly.js", "bg": "inline", "defaultCodeOpen": false}}

## Using `groupingValueGetter` for complex grouping value
## Complex grouping values

The grouping value has to be either a `string`, a `number`, `null`, or `undefined`.
If your cell value is more complex, pass a `groupingValueGetter` property to the column definition to convert it into a valid value.
Expand Down Expand Up @@ -275,7 +273,7 @@ To change the default cell indent, you can use the `--DataGrid-cellOffsetMultipl

{{"demo": "RowGroupingCustomCellIndent.js", "bg": "inline", "defaultCodeOpen": false}}

## Sorting / Filtering
## Sorting and filtering

### Single grouping column

Expand Down Expand Up @@ -309,7 +307,7 @@ In the example below:
If you are dynamically switching the `leafField` or `mainGroupingCriteria`, the sorting and filtering models will not be cleaned up automatically, and the sorting/filtering will not be re-applied.
:::

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

By default, selecting a parent row selects all its descendants automatically.
You can customize this behavior by using the `rowSelectionPropagation` prop.
Expand Down Expand Up @@ -353,7 +351,7 @@ If `props.disableMultipleRowSelection` is set to `true`, the row selection propa
Row selection propagation is a client-side feature and is not supported with the [server-side data source](/x/react-data-grid/server-side-data/).
:::

## Get the rows in a group
## Get all rows in a group

You can use the `apiRef.current.getRowGroupChildren` method to get the id of all rows contained in a group.
It will not contain the autogenerated rows (that is the subgroup rows or the aggregation footers).
Expand Down Expand Up @@ -406,7 +404,13 @@ See [Row grouping recipes](/x/react-data-grid/recipes-row-grouping/) for more ad

## apiRef

The grid exposes a set of methods that enables all of these features using the imperative `apiRef`. To know more about how to use it, check the [API Object](/x/react-data-grid/api-object/) section.
The Data Grid exposes a set of methods via the `apiRef` object that are used in the implementation of the row grouping feature.
The reference below describes the relevant functions.
See [API object](/x/react-data-grid/api-object/) for more details.

:::warning
This API should only be used as a last resort—give preference to props for controlling the Data Grid.
:::

{{"demo": "RowGroupingApiNoSnap.js", "bg": "inline", "hideToolbar": true}}

Expand Down
Loading