React Data Grid - Record Grouping

To group data by columns, users can utilize the group panel. Enable the groupPanel.visible property to display the group panel area.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

TS JS

Backend API

import React, { useCallback, useState } from 'react'; import DataGrid, { Column, Grouping, GroupPanel, Paging, SearchPanel, Pager, } from 'devextreme-react/data-grid'; import CheckBox from 'devextreme-react/check-box'; import { customers } from './data.ts'; const App = () => { const [autoExpandAll, setAutoExpandAll] = useState(true); const onAutoExpandAllChanged = useCallback(() => { setAutoExpandAll((previousAutoExpandAll) => !previousAutoExpandAll); }, []); return ( <div> <DataGrid dataSource={customers} keyExpr="ID" allowColumnReordering={true} width="100%" showBorders={true} > <GroupPanel visible={true} /> <SearchPanel visible={true} /> <Grouping autoExpandAll={autoExpandAll} /> <Paging defaultPageSize={10} /> <Pager visible={true} /> <Column dataField="CompanyName" dataType="string" /> <Column dataField="Phone" dataType="string" /> <Column dataField="Fax" dataType="string" /> <Column dataField="City" dataType="string" /> <Column dataField="State" dataType="string" groupIndex={0} /> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox text="Expand All Groups" id="autoExpand" value={autoExpandAll} onValueChanged={onAutoExpandAllChanged} /> </div> </div> </div> ); }; export default App;

import React, { useCallback, useState } from 'react'; import DataGrid, { Column, Grouping, GroupPanel, Paging, SearchPanel, Pager, } from 'devextreme-react/data-grid'; import CheckBox from 'devextreme-react/check-box'; import { customers } from './data.js'; const App = () => { const [autoExpandAll, setAutoExpandAll] = useState(true); const onAutoExpandAllChanged = useCallback(() => { setAutoExpandAll((previousAutoExpandAll) => !previousAutoExpandAll); }, []); return ( <div> <DataGrid dataSource={customers} keyExpr="ID" allowColumnReordering={true} width="100%" showBorders={true} > <GroupPanel visible={true} /> <SearchPanel visible={true} /> <Grouping autoExpandAll={autoExpandAll} /> <Paging defaultPageSize={10} /> <Pager visible={true} /> <Column dataField="CompanyName" dataType="string" /> <Column dataField="Phone" dataType="string" /> <Column dataField="Fax" dataType="string" /> <Column dataField="City" dataType="string" /> <Column dataField="State" dataType="string" groupIndex={0} /> </DataGrid> <div className="options"> <div className="caption">Options</div> <div className="option"> <CheckBox text="Expand All Groups" id="autoExpand" value={autoExpandAll} onValueChanged={onAutoExpandAllChanged} /> </div> </div> </div> ); }; export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

export const customers = [{ ID: 1, CompanyName: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000', Fax: '(612) 291-2001', }, { ID: 2, CompanyName: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800', Fax: '(630) 438-7801', }, { ID: 3, CompanyName: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000', Fax: '(214) 854-3001', }, { ID: 4, CompanyName: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937', Fax: '(800) 445-6938', }, { ID: 5, CompanyName: 'Braeburn', Address: '1 Infinite Loop', City: 'Cupertino', State: 'California', Zipcode: 95014, Phone: '(408) 996-1010', Fax: '(408) 996-1012', }, { ID: 6, CompanyName: 'PriceCo', Address: '30 Hunter Lane', City: 'Camp Hill', State: 'Pennsylvania', Zipcode: 17011, Phone: '(717) 761-2633', Fax: '(717) 761-2334', }, { ID: 7, CompanyName: 'Ultimate Gadget', Address: '1557 Watson Blvd', City: 'Warner Robbins', State: 'Georgia', Zipcode: 31093, Phone: '(995) 623-6785', Fax: '(995) 623-6786', }, { ID: 8, CompanyName: 'EZ Stop', Address: '618 Michillinda Ave.', City: 'Arcadia', State: 'California', Zipcode: 91007, Phone: '(626) 265-8632', Fax: '(626) 265-8633', }, { ID: 9, CompanyName: 'Clicker', Address: '1100 W. Artesia Blvd.', City: 'Compton', State: 'California', Zipcode: 90220, Phone: '(310) 884-9000', Fax: '(310) 884-9001', }, { ID: 10, CompanyName: 'Store of America', Address: '2401 Utah Ave. South', City: 'Seattle', State: 'Washington', Zipcode: 98134, Phone: '(206) 447-1575', Fax: '(206) 447-1576', }, { ID: 11, CompanyName: 'Zone Toys', Address: '1945 S Cienega Boulevard', City: 'Los Angeles', State: 'California', Zipcode: 90034, Phone: '(310) 237-5642', Fax: '(310) 237-5643', }, { ID: 12, CompanyName: 'ACME', Address: '2525 E El Segundo Blvd', City: 'El Segundo', State: 'California', Zipcode: 90245, Phone: '(310) 536-0611', Fax: '(310) 536-0612', }, { ID: 13, CompanyName: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', }, { ID: 14, CompanyName: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', }, { ID: 15, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', }, { ID: 16, CompanyName: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', }, { ID: 17, CompanyName: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500', Fax: '(847) 286-2501', }, { ID: 18, CompanyName: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500', Fax: '(847) 940-2501', }, { ID: 19, CompanyName: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741', Fax: '(817) 820-0742', }, { ID: 20, CompanyName: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929', Fax: '(800) 955-9392', }];

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

export const customers = [ { ID: 1, CompanyName: 'Premier Buy', Address: '7601 Penn Avenue South', City: 'Richfield', State: 'Minnesota', Zipcode: 55423, Phone: '(612) 291-1000', Fax: '(612) 291-2001', }, { ID: 2, CompanyName: 'ElectrixMax', Address: '263 Shuman Blvd', City: 'Naperville', State: 'Illinois', Zipcode: 60563, Phone: '(630) 438-7800', Fax: '(630) 438-7801', }, { ID: 3, CompanyName: 'Video Emporium', Address: '1201 Elm Street', City: 'Dallas', State: 'Texas', Zipcode: 75270, Phone: '(214) 854-3000', Fax: '(214) 854-3001', }, { ID: 4, CompanyName: 'Screen Shop', Address: '1000 Lowes Blvd', City: 'Mooresville', State: 'North Carolina', Zipcode: 28117, Phone: '(800) 445-6937', Fax: '(800) 445-6938', }, { ID: 5, CompanyName: 'Braeburn', Address: '1 Infinite Loop', City: 'Cupertino', State: 'California', Zipcode: 95014, Phone: '(408) 996-1010', Fax: '(408) 996-1012', }, { ID: 6, CompanyName: 'PriceCo', Address: '30 Hunter Lane', City: 'Camp Hill', State: 'Pennsylvania', Zipcode: 17011, Phone: '(717) 761-2633', Fax: '(717) 761-2334', }, { ID: 7, CompanyName: 'Ultimate Gadget', Address: '1557 Watson Blvd', City: 'Warner Robbins', State: 'Georgia', Zipcode: 31093, Phone: '(995) 623-6785', Fax: '(995) 623-6786', }, { ID: 8, CompanyName: 'EZ Stop', Address: '618 Michillinda Ave.', City: 'Arcadia', State: 'California', Zipcode: 91007, Phone: '(626) 265-8632', Fax: '(626) 265-8633', }, { ID: 9, CompanyName: 'Clicker', Address: '1100 W. Artesia Blvd.', City: 'Compton', State: 'California', Zipcode: 90220, Phone: '(310) 884-9000', Fax: '(310) 884-9001', }, { ID: 10, CompanyName: 'Store of America', Address: '2401 Utah Ave. South', City: 'Seattle', State: 'Washington', Zipcode: 98134, Phone: '(206) 447-1575', Fax: '(206) 447-1576', }, { ID: 11, CompanyName: 'Zone Toys', Address: '1945 S Cienega Boulevard', City: 'Los Angeles', State: 'California', Zipcode: 90034, Phone: '(310) 237-5642', Fax: '(310) 237-5643', }, { ID: 12, CompanyName: 'ACME', Address: '2525 E El Segundo Blvd', City: 'El Segundo', State: 'California', Zipcode: 90245, Phone: '(310) 536-0611', Fax: '(310) 536-0612', }, { ID: 13, CompanyName: 'Super Mart of the West', Address: '702 SW 8th Street', City: 'Bentonville', State: 'Arkansas', Zipcode: 72716, Phone: '(800) 555-2797', Fax: '(800) 555-2171', }, { ID: 14, CompanyName: 'Electronics Depot', Address: '2455 Paces Ferry Road NW', City: 'Atlanta', State: 'Georgia', Zipcode: 30339, Phone: '(800) 595-3232', Fax: '(800) 595-3231', }, { ID: 15, CompanyName: 'K&S Music', Address: '1000 Nicllet Mall', City: 'Minneapolis', State: 'Minnesota', Zipcode: 55403, Phone: '(612) 304-6073', Fax: '(612) 304-6074', }, { ID: 16, CompanyName: "Tom's Club", Address: '999 Lake Drive', City: 'Issaquah', State: 'Washington', Zipcode: 98027, Phone: '(800) 955-2292', Fax: '(800) 955-2293', }, { ID: 17, CompanyName: 'E-Mart', Address: '3333 Beverly Rd', City: 'Hoffman Estates', State: 'Illinois', Zipcode: 60179, Phone: '(847) 286-2500', Fax: '(847) 286-2501', }, { ID: 18, CompanyName: 'Walters', Address: '200 Wilmot Rd', City: 'Deerfield', State: 'Illinois', Zipcode: 60015, Phone: '(847) 940-2500', Fax: '(847) 940-2501', }, { ID: 19, CompanyName: 'StereoShack', Address: '400 Commerce S', City: 'Fort Worth', State: 'Texas', Zipcode: 76102, Phone: '(817) 820-0741', Fax: '(817) 820-0742', }, { ID: 20, CompanyName: 'Circuit Town', Address: '2200 Kensington Court', City: 'Oak Brook', State: 'Illinois', Zipcode: 60523, Phone: '(800) 955-2929', Fax: '(800) 955-9392', }, ];

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

.options { padding: 20px; margin-top: 20px; background-color: rgba(191, 191, 191, 0.15); } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; }

To group data, users can drag and drop column headers onto and from the group panel. DataGrid also supports keyboard shortcuts to perform grouping actions:

Ctrl+G
Move the focused column header to the group panel.
Backspace, Delete, and Ctrl+Shift+G
Remove the focused column header from the group panel. This shortcut is available for items in:
- The group panel.
- The column header if showWhenGrouped is enabled.
Shift+Alt+G
Ungroup all items from the group panel.

To allow users to reorder headers within the group panel, assign true to the allowColumnReordering property. Reordering headers in the group panel changes the component's group hierarchy. Users can reorder headers with mouse drag-and-drop operations or keyboard shortcuts:

Ctrl/Cmd+Left Arrow
Move the focused header to the left.
Ctrl/Cmd+Right Arrow
Move the focused header to the right.

Grouping and reordering operations are also available in the component's context menu.

To group data against a single column, apply the groupIndex property to it. This property accepts a zero-based index number that controls the column order. In this example, the data is grouped against the State column.

You can also use the grouping object to specify user interaction settings related to grouping. This demo illustrates the autoExpandAll property that specifies whether the groups appear expanded.