Override Grouping


To override the grouping text within the group row, use the column.groupRender callback function. It returns the grouped string for each group row for the given column and expects a renderable react node.

Additionally, the options.showGroupingCount (boolean) can be used to display the amount of items that are grouped under each group.

import MaterialTable from "@material-table/core";
// ... other props
columns={[field: "test", renderGroup: () => "Test"]}
showGroupingCount: true,

Live Demo#


See here for more on the GLOBAL_VARS we use in our demos

Live Editor