Material-table: How to change disable action button if my rowdata.status = cancelled

Question

How to disable the action button based on rowdata.???

I am using material-table with remote data features.

I have to disable icon: build when rowdata.status is canceled.

I tried to look at the documentation but it didn't help. I also tried checking StackOverflow answers but no luck

Here is my code. Please help in fixing it.

Thanks in advance

<MaterialTable
  icons={tableIcons}
  tableRef={this.tableRef}
  title="Your Rollouts"
  options={{
    actionsColumnIndex: -1,
    search: true
    // pageSize: 10,
    //  pageSizeOptions: [10, 20, 50]
  }}
  columns={[
    {
      title: "Rollout ID",
      field: "_id"
    },
    { title: "Status", field: "rolloutStatus" },
    { title: "Created By", field: "createdby" },
    { title: "Created Date", field: "CreatedDate", type: "datetime" },
    { title: "Updated Date", field: "updateddate", type: "datetime" },
    { title: "CRQ Number", field: "crqnumber" }
  ]}
  actions={[
    {
      icon: () => <Refresh />,
      tooltip: "Refresh Data",
      isFreeAction: true,
      onClick: () => this.tableRef.current.onQueryChange()
    },

    {
      icon: () => <Build />,
      tooltip: "Perform action",
      onClick: (event, rowData) => {
        this.setState({ visible: true });
      }
    },

    {
      icon: () => <Visibility />,
      tooltip: "View Rollout",
      onClick: (event, rowData) => {
        alert(rowData.xml);
      }
    }
  ]}
  data={query =>
    new Promise((resolve, reject) => {
      let url = "http://localhost:5000/getRollout?";
      if (query.search) {
        url += "querysearch=" + query.search;
        url += "&per_page=" + query.pageSize;
        url += "&page=" + (query.page + 1);
        fetch(url)
          .then(response => response.json())
          .then(result => {
            console.log(result.data);
            resolve({
              data: result.data.filter(pub => pub._id.includes(query.search)),
              page: result.page - 1,
              totalCount: result.total
            });
          });
      } else {
        url += "per_page=" + query.pageSize;
        url += "&page=" + (query.page + 1);
        if (query.orderBy) {
          let sortOrder = query.orderDirection;
          url += "&sort=" + query.orderBy.field + "&sortOrder=" + sortOrder;
        }

        console.log(url);

        fetch(url)
          .then(response => response.json())
          .then(result => {
            console.log(result);
            resolve({
              data: result.data.filter(pub => pub._id.includes(query.search)),
              page: result.page - 1,
              totalCount: result.total
            });
          });
      }

      console.log(url);
      console.log(query.orderBy);
      console.log(query.orderDirection);
    })
  }
/>;

Answer 1

add condition like this :

         editable={{
              onRowAdd: condition ? (newData => new Promise((resolve) => {
                // add measurement unit action
                addCommercialOperationStatus(newData);
                this.editingPromiseResolve = resolve;
              }).then((result) => {
                if (isString(result)) {
                  // Fetch data
                  getAllCommercialOperationStatus();
                  notification('success', result);
                } else {
                  notification('danger', result);
                }
              })) : null,
              ...

Answer 2

It's on the documentation. You can check here: https://material-table.com/#/docs/features/actions the Conditionals Actions Example

Assuming you want to disable your first action the code would be something like:

rowData => ({
  disabled: rowData.status === 'canceled',
  icon: () => <Refresh />,
  tooltip: "Refresh Data",
  isFreeAction: true,
  onClick: () => this.tableRef.current.onQueryChange()
})