Basic Tree Data

You can add buttons to rows or toolbar by using actions prop. Actions prop takes array of actions.

Usage#

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

<MaterialTable
  // ...
  parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
/>;

Live Demo#

note

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

Live Editor

function BasicTreeData() {
  return (
    <MaterialTable
      data={TREE_DATA}
      columns={TREE_COLUMNS}
      parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
      options={{
        selection: true,
      }}
    />
  );
}

function BasicTreeData() {
  return (
    <MaterialTable
      data={TREE_DATA}
      columns={TREE_COLUMNS}
      parentChildData={(row, rows) => rows.find((a) => a.id === row.parentId)}
      options={{
        selection: true,
      }}
    />
  );
}

Result