选择数据表中的行（mui-datatable）答案

【问题标题】：选择数据表中的行（mui-datatable）
【发布时间】：2023-03-20 09:12:01
【问题描述】：

我正在尝试使用 mui-datatable 中的表格。它工作正常，但是当我尝试选择 de 复选框之外的行时，它不起作用。我需要它像材料设计中的表格一样工作。

我看到他们有一个选择行的功能，它在控制台模式下工作，所以...我需要将代码放入其中并将行添加到所选行。

const columns = ["Id","Description"];
const options = {
  filterType: 'checkbox',
  responsive: 'scroll',
  onRowClick: (rowData, rowState) => {

    //What can I add here?
    console.log(rowData, rowState);
  },
};

class PersonList extends React.Component{
    state = {
        persons: [],
        data: [],
    }; 
    componentDidMount() {

        axios.get(`my url`)
          .then(res => {
            const persons = res.data;
            const data = [];
            persons.map(x => data.push({ 'Id': x.id, 'Description' : x.Description}));           
            this.setState({ data });

          })
      }
render(){
    return(
        <Container>
            <Page pagetitle="Exemplo" history={this.props.history}>

            <MUIDataTable
                title={"My Table"}
                data={this.state.data}
                columns={columns}
                options={options}
            />
            </Page>
        </Container>
    )
}}
export default(PersonList);

【问题讨论】：

标签： reactjs material-design mui-datatable

【解决方案1】：

selectableRows:true 已弃用。请使用 selectableRows: multiple |单身 |没有

const options = {
  selectableRows:'multiple',
  selectableRowsOnClick: true
};

【讨论】：

【解决方案2】：

现在可以使用版本 2.4.0 中的主表选项。

const options = {
  selectableRows: true,
  selectableRowsOnClick: true
};

将selectableRowsOnClick: true 添加到表格选项将允许单击行上的任意位置以注册为选择操作，就像选中复选框一样。

【讨论】：