Add event listener for internal grid selection state

[pwang347]

Use case

We would like to consume the grid selection state (i.e. selected cell column and row) to update styling in custom renderers (more complicated styling than CSS), as well as to use as state for certain operations.

See #2881

Specifically, the proposed change should handle all selection state events, e.g. clicking, keyboard navigation, programmatic and so forth.

Proposed solution

Add API onSelectionChange on the DataGridProps interface exposing the selectedPosition state (and possibly prevSelectedPosition).

[adityatoshniwal]

@pwang347 I achieved this by using onRowClick prop

  const onRowClick = useCallback((row, column)=>{
      onSelectedCellChange && onSelectedCellChange([row, column]);
  }, []);

[pwang347]

@adityatoshniwal Hey, thanks for the response! The main concern I had was actually for keyboard navigation and programmatic selection events (I should update the description to be a bit more clear on this). Are you aware of any workarounds for these aside from manual handling?

[adityatoshniwal]

@pwang347 Even I'm looking for keyboard navigation selection. Thanks for raising this.

[adityatoshniwal]

I found a way. I created an external context to wrap DataGrid, with a CustomRow.

import ReactDataGrid, {Row, useRowSelection} from 'react-data-grid';

const DataGridExtrasContext = React.createContext();
<DataGridExtrasContext.Provider value={{onSelectedCellChange}}>
  <ReactDataGrid
    components={{
      rowRenderer: CustomRow,
    }}
    {...props}
  />
<DataGridExtrasContext.Provider />

and the CustomRow would be:

function CustomRow(props) {
  const rowRef = useRef();
  const dataGridExtras = useContext(DataGridExtrasContext);
  if(props.selectedCellIdx >= 0) {
    dataGridExtras.onSelectedCellChange?.([props.row, props.viewportColumns[props.selectedCellIdx]]);
  }
  return (
      <Row ref={rowRef} {...props} />
  );
}

[pwang347]

@adityatoshniwal this is a great find! Thanks for figuring this out. For some reason I didn't notice that the selected cell index was a prop.