Basic Action

You can add buttons to rows or toolbar by using actions prop. Actions prop takes array of actions.

Usage#

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

<MaterialTable
  // ...
  actions={[
    {
      icon: () => <SaveIcon />,
      tooltip: "Save User",
      onClick: (event, rowData) => {
        const rowJson = JSON.stringify(rowData, null, 2);
        alert(`Do save operation : ${rowJson}`);
      },
    },
  ]}
/>;

Live Demo#

note

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

Action Rows#

Live Editor

function BasicActionsDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      actions={[
        {
          icon: () => <SaveIcon />,
          tooltip: "Save User",
          onClick: (event, rowData) => {
            const rowJson = JSON.stringify(rowData, null, 2);
            alert(`Do save operation : ${rowJson}`);
          },
        },
      ]}
    />
  );
}

function BasicActionsDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      actions={[
        {
          icon: () => <SaveIcon />,
          tooltip: "Save User",
          onClick: (event, rowData) => {
            const rowJson = JSON.stringify(rowData, null, 2);
            alert(`Do save operation : ${rowJson}`);
          },
        },
      ]}
    />
  );
}

Result

Free Actions#

Live Editor

function BasicActionsDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      actions={[
        {
          icon: () => <SaveIcon />,
          tooltip: "Save User",
          isFreeAction: true,
          onClick: (event) => {
            alert(`Icon clicked`);
          },
        },
      ]}
    />
  );
}

function BasicActionsDemo() {
  return (
    <MaterialTable
      data={DEMO_DATA}
      columns={DEMO_COLS}
      actions={[
        {
          icon: () => <SaveIcon />,
          tooltip: "Save User",
          isFreeAction: true,
          onClick: (event) => {
            alert(`Icon clicked`);
          },
        },
      ]}
    />
  );
}

Result