reactjs - 如何在 mui-datatables 中默认取消选择 selectableRows 中的复选框（当没有数据行时）？

Question

如果有数据，它工作正常。但是，虽然没有数据，但默认情况下会被选中。

这是我的代码，用于选项。

 const options = {
  selectableRows: "multiple",
  //selectableRowsOnClick: true,
  rowsSelected: this.state.rowsSelected,
  onRowsSelect: (rowsSelected, allRows) => {
    this.setState({ rowsSelected: allRows.map(row => row.dataIndex) });
  },
  customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
    <div className="mailIconDiv">
      <IconButton
        color="primary"
        onClick={() => this.handleClick()}
      >
        <i className="zmdi zmdi-email"></i>
      </IconButton>
    </div>
  ),
};

如果我运行上面的代码，我会得到空表。

有人可以帮我解决如何删除它吗？

先感谢您。

Answer 1

嗨，在选项中使用 selectableRowsHeader，如下所示。这里的数据是填充到 mui-datatable 的集合。如果数据为空，则 selectableRowsHeader 将被隐藏。

const options = {
    selectableRows: "multiple",
    selectableRowsHeader: data.length > 0,
    //selectableRowsOnClick: true,
    rowsSelected: this.state.rowsSelected,
    onRowsSelect: (rowsSelected, allRows) => {
        this.setState({rowsSelected: allRows.map(row => row.dataIndex)});
    },
    customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
        <div className="mailIconDiv">
            <IconButton
                color="primary"
                onClick={() => this.handleClick()}
            >
                <i className="zmdi zmdi-email"></i>
            </IconButton>
        </div>
    ),
};