[DataGridPro] Allow to group rows based on column value

[flaviendelangle]

Closes #212

Docs preview

Feature summary

• Use props.experimentalFeatures.groupingColumns: true to unlock the feature

• Use props.groupingColumnsModel / props.onGroupingColumnsModelChange to control

• Use props.initialState.groupingColumns.model to init (I did not store the model directly in initialState.groupingColumns because I feel like we will have additional stuff in this sub-state one day)

• Use the column menu to group / ungroup columns

• Use props.groupingColumnMode?: 'single' | 'multiple' to create one grouping column with all the grouping criteria or one grouping column per grouping criteria (if you have an idea for a better name to avoid confusion with our xxxMode?: 'client' | 'server'. I don't want a boolean because AG-Grid has a 3rd mode with no grouping col and with a boolean we would be blocked)

• Use props.groupingColDef.leafField to render a column cell on the leafs of the grouping column

• Use props.disableGroupingColumns to fully disable the feature

• Use colDef.canBeGrouped: false to block grouping on some columns

• Use colDef.keyGetter to transform your cell value (post valueGetter) into a serializable value

Changelog

• 🚀 Introduce the grouping columns feature ([DataGridPro] Allow to group rows based on column value #3277) @flaviendelangle

  Add GIF

Extracted pull requests

• [core] Rework columns state management #3264
• [DataGrid] Deprecate the getValue param for the valueGetter callback #3314
• [core] Type the api param in callback interfaces #3315
• [DataGridPro] Pass a list of fields to the callback version of groupingColDef #3316
• [core] Use pre-processors for sorting and filtering #3318
• [core] Improve tests for Tree Data #3366
• [DataGridPro] Add new option hideDescendantCount to Tree Data #3368
• [DataGridPro] Do not expand row children when pressing Shift + Space #3380

Release note

• 🎁 Allow to group rows based on column values

  ⚠️ This feature is temporarily available on the Pro plan until the release of the Premium plan.

  To avoid future regression for users of the Pro plan, the feature needs to be explicitly activated using the rowGrouping experimental feature flag.

  // To fully control
  <DataGridPro
    rowGroupingModel={rowGroupingModel}
    onRowGroupingModel={newModel => setRowGroupingModel(newModel)}
    experimentalFeatures={{ rowGrouping: true }}
  />
  
  // To initialize without controlling
  <DataGridPro
    initialState={{
      rowGrouping: {
        model: rowGroupingModel,
      },
    }}
    experimentalFeatures={{ rowGrouping: true }}
  />

  See the documentation for more details.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	150.4	322.1	252.5	242.92	64.91
Sort 100k rows	ms	297.8	700.7	551.3	537.14	133.637
Select 100k rows	ms	188.7	302.6	201.5	221.78	41.82
Deselect 100k rows	ms	104.2	206.5	184.7	172.22	37.47

Generated by 🚫 dangerJS against ff53580

[joserodolfofreitas]

The docs are looking very solid.
I've noticed just a couple details and I'm suggesting a single column as the first example because:

1. it's a gentler introduction
2. It doesnt replace the headerName with "Group" in contrast with the next example that does it. The explanation for this difference comes then right on the next section "Grouping Columns", which feels like a good introduction sequence.

[mbrookes]

👏 👏 👏