Disable row selection for some rows

[chirayuchiripal]

Use case

We want to disable selection of certain rows so that they cannot be selected while others can be.

Proposed solution

This was easily doable up until this commit removed isRowSelected and onRowSelectionChange, by providing our own column with formatter using SelectCellFormatter. However, because the formatter props no longer provide these two properties, we no longer have that row selection context. I was able to do something like this before to achieve this:

formatter: (props) => {
      return SelectCellFormatter({
        "aria-label": "Select",
        tabIndex: -1,
        isCellSelected: props.isCellSelected,
        value: props.isRowSelected, // This property is no longer available.
        onChange: props.onRowSelectionChange, // This property is no longer available.
        disabled: isItemDisabled && isItemDisabled(props.row), // This is my custom function that decides if row can be disabled
      });
},

[nstepien]

You can use

const [isRowSelected, onRowSelectionChange] = useRowSelection();

within the formatter

[chirayuchiripal]

Oh! Didn't notice that useRowSelection is exported for use. Thanks!

[chirayuchiripal]

useRowSelection definitely allows to achieve the intended behavior but I'd like to keep this open for native support because it required a lot of code duplication around selection logic especially with header renderer required to be overwritten as well to support allRowsSelected based on the rows that are enabled for selection vs. all rows.

Here is the proposal:

1. Add isRowDisabled: (row: TRow) => boolean prop to the DataGrid.

User can provide this function to data grid and row selection logic can take care of disabled rows when select all checkbox is used.