How to disable checkbox for a row in rowselection in react-data-grid

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

@parashm were you able to find a proper method to achieve this ? I have a requirement where I want all the checkboxes disabled according to a condition. — Dante_97

Shivratna Kumar Shivratna Kumar · Accepted Answer · 2019-12-06T11:08:32

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.

How to disable checkbox for a row in rowselection in react-data-grid

1 Answers