Top
DataGrid - Grouping rows
DataGrid
It's possible to group several rows together by a common value they contain. This can be specified by using the controlled groupBy prop - or its uncontrolled version, defaultGroupBy.
It's easier to get started by using defaultGroupBy since you don't have to hook onGroupByChange callback prop and update the <DataGrid /> when there are changes. You can also use drag-and-drop to reorder group by columns. Or you can click the remove icon to inactivate grouping by a specific column.
In the example below, data is grouped by the column Permission to call. By dragging the column header on the upper area, you can group by others column as well.
Note that clicking the grouping toolbar buttons sorts the column just like clicking the normal column header would. In addition, you can un-group by clicking the remove icon or by dragging the toolbar item to the grid header area to a position in order to get the desired column order.
If you don't want a certain column to be draggable in the grouping toolbar, specify column.groupBy=false. In the previous example, notice that you cannot group by email.
Columns used in grouping are not displayed by default. This can be customized by specifying hideGroupByColumns=false.
If you want to enable grouping, but without a default group column, use defaultGroupBy=[].
In the previous example grouping was uncontrolled and defaultGroupBywas used.
In this section we're showing how you can use the controlled groupBy and onGroupByChange to achieve controlled behavior.
Whe using controlled groupBy you will need to update its value when onGroupByChange(newGroupBy) is called so the UI is updated accordingly.
Grouping can also be performed server-side, but for this you need to send from the server the records in the correct grouping order. See the example below for server-side grouping, pagination and sorting working together.