Basic Grouping

Usage#

import MaterialTable from "@material-table/core";

<MaterialTable
  // ... other props
  options={{
    grouping: true,
  }}
/>;

Live Demo#

note

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

Live Editor

function BasicDetailsPanelDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      options={{
        // Enabling grouping
        grouping: true,
        // Show the child count in brackets
        showGroupingCount: true,
      }}
    />
  );
}

function BasicDetailsPanelDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      options={{
        // Enabling grouping
        grouping: true,
        // Show the child count in brackets
        showGroupingCount: true,
      }}
    />
  );
}

Result

Table Title

Drag headers here to group by

Id	Name
2	Joe
1	Mary