javascript - Material 表:如果我的 rowdata.status = canceled，如何更改禁用操作按钮

Question

如何禁用基于行数据的操作按钮？？？

我正在使用具有远程数据功能的material-table。

我必须禁用图标:当 rowdata.status 被取消时构建。

我试图查看文档，但没有帮助。我也试过检查 StackOverflow 的答案，但没有成功

这是我的代码。请帮助修复它。

提前致谢

<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

它在文档中。您可以在这里查看:https://material-table.com/#/docs/features/actions条件 Action 示例

假设您想禁用您的第一个操作，代码将类似于:

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