Basic Details Panel

Usage

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

<MaterialTable
  // ... other props
  onDetailPanelChange={(row, state) => {...}}
  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}
      onDetailPanelChange={console.log}
      detailPanel={({ rowData }) => {
        return (
          <div
            style={{
              fontSize: 20,
              textAlign: "center",
              height: 100,
            }}
          >
            This is a detailed panel for {rowData.name}
          </div>
        );
      }}
    />
  );
}

Result

Loading...