row action based on row data in react material-table

user_13820612 0
Viewed 1525

I need to have a row action only in certain rows (with particular property values). For example, if I have a row that has the property "isDeletable" set to true, I would like to be able to delete it, i.e have a delete icon present in the actions column.

Thanks in advance!

material-table material-ui reactjs
1 Answers

In actions definitions of your MaterialTable component, you can access to rowData parameter which you can be used to conditionally calculate the disabled or hidden props of each action. Check the following example where the action enabled only when status ==='active'.

<MaterialTable
// ..other props
actions={[
          (rowData) => {
            return {
              icon: "bug_report",
              tooltip: "Report bug",
              disabled: rowData.status === "active",
              // hidden: rowData.status === "active",
              onClick: (event, rowData) =>
                alert("This client status is " + rowData.status)
            };
          }
        ]}
/>

Here is a sandbox whit a working example.

Let me know if that worked for you!

user_105692200
Related