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