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> ); }} /> ); }

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