DataGrid - Cell selection

Cell selection

Besides row selection, the <ReactDataGrid /> also supports cell (single/multiple) selection + keyboard cell navigation. In order to enable cell selection, either specify the uncontrolled defaultCellSelection=[] prop or the controlled cellSelection=[] prop.
By default cell selection is multiple. If you want to enable single cell selection, specify multiSelect=false.
The cell selection value is an array of strings - each string representing a cell. The string for each cell is the value of the idProperty for that row, followed by a comma, followed by the name/id of corresponding column: <idProperty value>,<column id or name>.
Try and select a few cells in the grid above, then sort the grid by the age column and see selected cells remaining appropriately selected even after the sort. This is because the idProperty is used in the value for each selected cell.
You can use the little square at the bottom-right border of the active cell to drag and extend the current cell selection.
When selectOnDrag is enabled you can hold the mouse down on a cell and drag to another cell to create multiple cell selection.
Top