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 with defaultSelection: false)
  • or
    • deselectedCells: [rowId, colId][] - an array of cells that should be deselected (this is combined with defaultSelection: 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:

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'],
  ],
};
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'],
  ],
};
Exclude-list: selecting everything except a column
const defaultCellSelection = {
  defaultSelection: true, // all cells are selected by default
  deselectedCells: [['*', 'stack']],
};
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.

PreviousSetting up a master-detail DataGrid with Infinite Table for ReactNextThe best testing setup for frontends, with Playwright and NextJS