search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.91k stars 1.19k forks source link

[data grid] Performance issues when grouping rows in large datasets #9197

Closed evgeniiarts closed 1 year ago

evgeniiarts commented 1 year ago

Duplicates

Latest version

Steps to reproduce šŸ•¹

Link to live example: https://codesandbox.io/s/nifty-jennings-20q62b?file=/src/App.js:1223-1234

Example built on top of: https://mui.com/x/react-data-grid/performance/

Steps:

  1. Load 100.000 rows of demo data 'Commodities'
  2. Click on the column menu "Commodity" and select "Group by Commodity"
  3. Click on the column menu "Trader name" and select "Group by Trader name"

Current behavior šŸ˜Æ

When working with large datasets (>100.000 rows) the row grouping becomes very slow, especially when applying multiple grouping criterias.

In the example provided the second grouping takes above 5 seconds(3. step).

Expected behavior šŸ¤”

I expect the grouping to be as instant and performant as the filtering and sorting.

Context šŸ”¦

I am testing various datagrids for use in data heavy applications, where there can be more than 500.000 transaction datasets. To allow the user to narrow down specific rows, the grouping feature would be of great help. But the performance is a must at the same time.

Your environment šŸŒŽ

npx @mui/envinfo ``` System: OS: Windows 10 10.0.22621 Binaries: Node: 18.12.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Version 113.0.5672.127 (Official Build) (64-bit) Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.57) npmPackages: @emotion/react: ^11.10.6 => 11.11.0 @emotion/styled: ^11.10.6 => 11.11.0 @mui/base: 5.0.0-beta.0 @mui/core-downloads-tracker: 5.13.0 @mui/icons-material: ^5.11.11 => 5.11.16 @mui/material: ^5.11.13 => 5.13.0 @mui/private-theming: 5.12.3 @mui/styled-engine: 5.12.3 @mui/styles: ^5.11.16 => 5.12.3 @mui/system: ^5.4.1 => 5.12.3 @mui/types: 7.2.4 @mui/utils: 5.12.3 @mui/x-data-grid: 6.3.1 @mui/x-data-grid-generator: ^6.0.1 => 6.3.1 @mui/x-data-grid-premium: ^6.3.1 => 6.3.1 @mui/x-data-grid-pro: 6.3.1 @mui/x-date-pickers: ^6.0.2 => 6.3.1 @mui/x-license-pro: 6.0.4 @types/react: 18.2.6 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^4.9.5 => 4.9.5 ```

Order ID or Support key šŸ’³ (optional)

No response

romgrk commented 1 year ago

You can check the PR linked above, it should improve things.

Here is a codesandbox based on that PR that replicates your example: https://codesandbox.io/s/nervous-grothendieck-n1bwgf

evgeniiarts commented 1 year ago

Thank you so much. That is indeed an impressive improvement!