row action based on row data in react material-table

Question

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!

Answer 1

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!