Is there a built-in feature in the GridToolbar that allows users to add a ‘Group’ dropdown and group data by their desired column?

[john1625b]

Order ID

61801

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

Currently the Gridtoolbar component only has "Columns", "Filters", "Density", and the search input by default.

However is there a way to add a fourth option called "Groups" that's a dropdown of the columns the user can select to group by?

Or is the only way to do this is to implement a custom toolbar? which then implies that I also have to implement from scratch the column visibility, filters, search and density :(?

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: macOS 13.5
  Binaries:
    Node: 18.16.1 - ~/.nvm/versions/node/v18.16.1/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.1/bin/npm
  Browsers:
    Chrome: 114.0.5735.248
    Edge: Not Found
    Safari: 16.6
  npmPackages:
    @emotion/react: ^11.10.4 => 11.11.1 
    @emotion/styled: ^11.10.4 => 11.11.0 
    @mui/base:  5.0.0-alpha.98 
    @mui/core-downloads-tracker:  5.14.1 
    @mui/icons-material: ^5.10.6 => 5.14.1 
    @mui/lab: 5.0.0-alpha.100 => 5.0.0-alpha.100 
    @mui/material: ^5.10.6 => 5.14.1 
    @mui/private-theming:  5.13.7 
    @mui/styled-engine:  5.13.2 
    @mui/system: ^5.10.6 => 5.14.1 
    @mui/types:  7.2.4 
    @mui/utils: ^5.10.6 => 5.14.1 
    @mui/x-data-grid:  6.10.1 
    @mui/x-data-grid-premium: ^6.10.1 => 6.10.1 
    @mui/x-data-grid-pro: ^6.10.0 => 6.10.1 
    @mui/x-license-pro:  6.10.0 
    @types/react: ^18.0.21 => 18.2.15 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.1.6 => 5.1.6 

[m4theushw]

In the 2nd demo of https://mui.com/x/react-data-grid/row-grouping/#custom-grouping-column there's a set of buttons to set which column to group by. You can take this demo as inspiration.

Or is the only way to do this is to implement a custom toolbar? which then implies that I also have to implement from scratch the column visibility, filters, search and density :(?

You won't need to implement it from scratch but you need to pass a custom toolbar. Each of these buttons is exported as a component which you can reuse to create the custom toolbar. See https://mui.com/x/react-data-grid/components/#toolbar

Does it help?

[github-actions]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.

[john1625b]

@m4theushw This does indeed address my issue. thanks!