Skip to main content

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}`);
          },
        },
      ]}
    />
  );
}
Result
Loading...

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`);
          },
        },
      ]}
    />
  );
}
Result
Loading...