Basic Details Panel

Usage

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

<MaterialTable

// ... other props

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

Result