Single Details Panel

The default setting for detail panels is that multiple can be open.

By setting the option detailPanelType to single, only one panel will be open at any given time.

Usage

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

<MaterialTable
  // ... other props
  options={{ detailPanelType: "single" }}
  detailPanel={({ rowData }) => {
    return (
      <div
        style={{
          fontSize: 20,
          textAlign: "center",
          height: 100,
        }}
      >
        This is a detailed panel for {rowData.name}
      </div>
    );
  }}
/>;

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}
      title="Single Detail Panel"
      options={{ detailPanelType: "single" }}
      detailPanel={({ rowData }) => {
        return (
          <div
            style={{
              fontSize: 20,
              textAlign: "center",
              height: 100,
            }}
          >
            This is a detailed panel for {rowData.name}.
          </div>
        );
      }}
    />
  );
}

Result

Loading...