Toolbar

Usage#

import MaterialTable, { MTableToolbar } from "@material-table/core";

<MaterialTable
  // ...
  components={{
    Toolbar: (props) => (
      <div style={{ backgroundColor: "#e8eaf5" }}>
        <MTableToolbar {...props} />
      </div>
    ),
  }}
/>;

Live Demo#

In this demo we override the MTableToolbar component by injecting the background color into it's props.

note

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

Live Editor

function OverrideToolbar() {
  const [bgColor, setBgColor] = useState(RAND_COLOR);

  return (
    <div>
      <Button
        onClick={() => setBgColor(RAND_COLOR)}
        variant="contained"
        color="primary"
      >
        Change Background Color
      </Button>

      <MaterialTable
        data={DEMO_DATA}
        columns={DEMO_COLS}
        components={{
          Toolbar: (props) => {
            return (
              <div style={{ backgroundColor: bgColor }}>
                <MTableToolbar {...props} />
              </div>
            );
          },
        }}
      />
    </div>
  );
}

function OverrideToolbar() {
  const [bgColor, setBgColor] = useState(RAND_COLOR);

  return (
    <div>
      <Button
        onClick={() => setBgColor(RAND_COLOR)}
        variant="contained"
        color="primary"
      >
        Change Background Color
      </Button>

      <MaterialTable
        data={DEMO_DATA}
        columns={DEMO_COLS}
        components={{
          Toolbar: (props) => {
            return (
              <div style={{ backgroundColor: bgColor }}>
                <MTableToolbar {...props} />
              </div>
            );
          },
        }}
      />
    </div>
  );
}

Result