How to use multiple cell selection in the DataGrid
By adminยท
The article will cover some popular cell-selection scenarios in Infinite React DataGrid.
Multiple cell selection
By far, the most common use-case for cell selection is multiple cell selection.
For this, you need to configure the selectionMode
prop on the <DataSource />
component to use "multi-cell"
.
Note
In addition, if you want to specify a default value for cell selection, you can use the defaultCellSelection
prop - or the controlled alternative cellSelection
, in which case also make sure you update the value when onCellSelectionChange
is called.
<DataSource selectionMode="multi-cell" />
When multiple cell selection is configured in the React DataGrid, the user can select cells by CMD
/CTRL
clicking to add a single cell to the selection or by SHIFT
clicking to select a range of cells.
Showing a chart based on selected cells
Let's implement a common use-case for multiple cell selection - showing charts based on the selected cells, for example, a bar chart, with names on the x axis and ages on the y axis.
In this example, to retrieve the values from the selected cells, we used the mapCellSelectionPositions
from the cell selection API.
Cell selection format
The cellSelection
prop is an object with the following shape:
defaultSelection
-boolean
- whether or not cells are selected by default.- either:
selectedCells
:[rowId, colId][]
- an array of cells that should be selected (this is combined withdefaultSelection: false
)
- or
deselectedCells
:[rowId, colId][]
- an array of cells that should be deselected (this is combined withdefaultSelection: true
)
Note
When defaultSelection
is true
, you will only need to specify the deselectedCells
prop.
And when defaultSelection
is false
, you will only need to specify the selectedCells
prop.
In this way, you can either specify which cells should be selected or which cells should be deselected - and have a default that matches the most common case.
Note
The selectedCells
/deselectedCells
are arrays of [rowId, colId]
tuples. The rowId
is the id
of the row (the primary key
), and the colId
is the id
of the column (the identifier of the column in the columns
prop).
Using include-lists and exclude-lists for specifying cell selection
As already demonstrated in the previous snippet, you can pass a default value for cell selection
.
In addition to listing or excluding specific cells from selection, you can use wildcards:
const defaultCellSelection = {
defaultSelection: false, // all cells are deselected by default
selectedCells: [
// all cells in the stack column
['*', 'stack'],
// also this specific cell
['row2', 'firstName'],
],
};
const defaultCellSelection = {
defaultSelection: false, // all cells are deselected by default
selectedCells: [
// all cells in the row
['row1', '*'],
// also this specific cell
['row2', 'firstName'],
],
};
const defaultCellSelection = {
defaultSelection: true, // all cells are selected by default
deselectedCells: [['*', 'stack']],
};
Single cell selection
Single cell selection is not common - what you probably want to use in this case is the activeCellIndex
prop to emulate single cell selection - but that's basically cell navigation.