如何在反应数据网格中的行选择中禁用一行的复选框

Question

 <ReactDataGrid
    columns={[
        { key: 'time', name: 'time', width: 140, formatter: (props) => (<span>{props.value}</span>), sortable: true },
        { key: 'Size', name: 'Size', width: 80, formatter: (props) => (<span>{props.value}</span>) },
        { key: 'qaw', name: 'dash Value', width: 350 },
    ]}
    rowGetter={this.rowGetter}
    rowsCount={list.length}
    emptyRowsView={() => (<div />)}
    rowSelection={{
        showCheckbox: true,
        onRowsSelected: this.onVersionRowsSelect,
        onRowsDeselected: this.onVersionRowsDeselect,
        selectBy: {
            indexes: this.state.selectedIndexes
        }
    }}
/>

Above is my code of react-data-grid. I want to disable row selection for particular row on some condition or want to disable checkbox for that specific row.

Please let me know how it can be achieved. Thanks

Answer 1

You can disable the selection of the row by doing the following:-

onVersionRowsSelect(rows) {
    rows = rows.filter(item => !item.row.isSnapshotQuarantined)
    this.setState({
        selectedIndexes: this.state.selectedIndexes.concat(rows.map(r => r.rowIdx))
    });
}

I am not sure if you can change the visual effect of disabling the checkbox as the checkbox html's control is not exposed by react-data-grid (as per my knowledge).

Hope this helps.