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"
.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" />
COPY
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
)
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.
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:
Include-list: selecting all cells in a column
const defaultCellSelection = {
defaultSelection: false, // all cells are deselected by default
selectedCells: [
// all cells in the stack column
['*', 'stack'],
// also this specific cell
['row2', 'firstName'],
],
};
COPY
Include-list: selecting all cells in a row
const defaultCellSelection = {
defaultSelection: false, // all cells are deselected by default
selectedCells: [
// all cells in the row
['row1', '*'],
// also this specific cell
['row2', 'firstName'],
],
};
COPY
Exclude-list: selecting everything except a column
const defaultCellSelection = {
defaultSelection: true, // all cells are selected by default
deselectedCells: [['*', 'stack']],
};
COPY
Using wildcard selection to select whole cell or row
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.