[data grid] Implement Aggregation (not publicly released)

[flaviendelangle]

Closes #213

Doc preview

Extracted PRs

#4216
#4359
#4378
#4896

Works

• Model

  • Controlled model
  • Initialized model
  • Import / export model

• Rows

  • Add footer rows on each group when needed
  • Add top level footer row when needed
  • Do not count the footers in the total row displayed in the grid footer

• Columns

  • Wrap the column properties that need to behave differently on aggregated cells

• Rendering

  • Define custom valueFormatter on the aggregation function
  • Be able to render differently aggregated values with and without cell units

• Add one select per available position in the column menu

Aggregation in the row flow chart

The chart below shows that the aggregation is triggered between the sorting and the filtering.

graph TD
    PropsRows(Update props.rows) --no throttling--> GroupRows
    UpdateRows(Call apiRef.current.updateRows) --throttling--> GroupRows

    SetRowChildrenExpansion(Call apiRef.current.setRowChildrenExpansion) --> FilteringWithoutSorting

    GroupRows["Group rows<br />(tree data, row grouping or flat tree)"] --> HydrateRows
    HydrateRows[Hydrate rows<br />eg: add aggregation footer] --> FilteringWithSorting

    FilteringWithoutSorting[Apply filters] --> Rendering

    FilteringWithSorting[Apply filters] --> Sorting
    Sorting[Apply sorting] --> Rendering

    FilteringWithSorting -.-> Aggregation
    Aggregation[Apply aggregation] -.-> Sorting

    Rendering[Render new rows]

Loading

[mui-bot]

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	251.8	654.8	384.1	432.82	163.13
Sort 100k rows	ms	459.8	914.9	798.4	767.76	164.684
Select 100k rows	ms	189	338.2	285.7	279.7	49.731
Deselect 100k rows	ms	126.7	278.4	253.1	222.92	55.159

Generated by 🚫 dangerJS against cbbc54c

[flaviendelangle]

Following a discussion with @oliviertassinari
I prefixed all the aggregation apis (state / props / api method / column property) with private_ and I moved the doc to aggregation-next to keep it private for now.

That way, we can merge the feature in its current shape to ease the review of the row pinning when ready.

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

[gerdadesign]

Users can create there own. On the doc I gave an example with the first and last in the alphabetical order.
Not sure what's the maximum label size we should support correctly.
But probably more than 4-5 letters.

Seems like the label could be there, but truncate when resizing the column? In Figma, I had some exploration around the way the labels are displayed when sorting, filtering, etc is applied as well. There could be a benefit of a tidier header if we condense the visual indicators of applied actions, but we lose the clarity at a glance.

[kittyvandergijp]

We are looking to use this feature. When will this be publicly available?

[cherniavskii]

@kittyvandergijp after #5592 is merged, likely in the next release