CODEWITHSUNDEEP
reactjsmaterial-uimaterial-table
GrimReverb
GrimReverb

Reputation: 37

row action based on row data in react material-table

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!

Upvotes: 2

Views: 3516

Answers (1)

NicoE
NicoE

Reputation: 4853

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!

Upvotes: 4

Related Questions