# How to use multiple cell selection in the DataGrid

Published: 2024-03-08  
Author: admin  
Tags: cell-selection

Canonical page: https://infinite-table.com/blog/2024/03/08/how-to-select-cells-and-use-cell-selection

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`](https://infinite-table.com/docs/reference/datasource-props/index.md#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`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection) prop - or the controlled alternative [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection), in which case also make sure you update the value when [`onCellSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onCellSelectionChange) is called.

```tsx
<DataSource selectionMode="multi-cell" />
```

[CodeSandbox demo](https://codesandbox.io/s/little-wood-55dysw)

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.

[CodeSandbox demo](https://codesandbox.io/s/funny-silence-2v9r2t)

In this example, to retrieve the values from the selected cells, we used the [`mapCellSelectionPositions`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#mapCellSelectionPositions) from the [cell selection API](https://infinite-table.com/docs/reference/cell-selection-api/index.md).

## Cell selection format

The [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#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`)

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](https://infinite-table.com/docs/reference/datasource-props/index.md#primaryKey)), and the `colId` is the `id` of the column (the identifier of the column in the [`columns`](https://infinite-table.com/docs/reference/infinite-table-props.md#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](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection).

In addition to listing or excluding specific cells from selection, you can use wildcards:

```tsx title="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'],
  ],
};
```

```tsx title="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'],
  ],
};
```

```tsx title="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](https://codesandbox.io/s/throbbing-platform-s9jtd4)

## Single cell selection

Single cell selection is not common - what you probably want to use in this case is the [`activeCellIndex`](https://infinite-table.com/docs/reference/infinite-table-props.md#activeCellIndex) prop to emulate single cell selection - but that's basically cell navigation.