# Infinite Table React DataGrid version 3.0.0 released

> InfiniteTable DataGrid for React version 3.0.0 brings many small fixes and enhancements, along with a major new feature: cell selection

Published: 2023-10-02  
Author: admin  
Tags: product, cell-selection

Canonical page: https://infinite-table.com/blog/2023/10/02/version-3-0-0

Version `3.0.0` is a release that brings a long awaited feature: cell selection. This allows the user to perform fined-grained cell selection, either via the [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) prop or via the [Cell Selection API](https://infinite-table.com/docs/reference/cell-selection-api/index.md).

1️⃣ [support for single and multiple cell selection](#1-support-for-single-and-multiple-cell-selection)
2️⃣ [cell selection using wildcards](#2-cell-selection-using-wildcards)
3️⃣ [cell selection API](#3-cell-selection-api)

## 1️⃣ Support for single and multiple cell selection

It's been a [long-requested feature to implement cell selection](https://github.com/infinite-table/infinite-react/issues/120).

We knew we needed to implement it, but we wanted to do it right while keeping it easy to understand.

In fact, we prepared some things in advance - namely [`selectionMode`](https://infinite-table.com/docs/reference/datasource-props/index.md#selectionMode) was there, it just needed to accept a new value: `"multi-cell"`.

```tsx title="Configuring multi-cell selection"
<DataSource<Developer>
  selectionMode="multi-cell" // <--- THIS
  primaryKey="id"
  data={[...]}
/>
```

The line above is all you need to do to enable cell selection. This allows the user to `Click` or `Cmd/Ctrl+Click` to select a specific cell and `Shift+Click` to select a range of cells. It's exactly the behavior you'd expect from a spreadsheet application.

Try `Cmd/Ctrl+Click`ing in the DataGrid cells below to see multiple cell selection in action.

[SelectionMode set to 'multi-cell' to allow cell selection](https://codesandbox.io/s/sorting-group-columns-forked-qnvwwh)

### Using a default selection

If you want to render the DataGrid with a default selection, you can use the [`defaultCellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection) prop.

```tsx
const defaultCellSelection = {
  defaultSelection: false,
  selectedCells: [
    [3, 'hobby'],
    [4, 'firstName'],
    [4, 'hobby'],
    [4, 'preferredLanguage'],
    [4, 'salary'],
  ],
};
```

The format for the uncontrolled [`defaultCellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection) (and also for the controlled [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection)) is an object with two properties:

- `defaultSelection` - `boolean` - whether or not cells are selected by default.
- and either
  - `selectedCells` - `[string|number, string][]` - only needed when `defaultSelection` is `false`
- or
  - `deselectedCells` - `[string|number, string][]` - only needed when `defaultSelection` is `true`

The value for `selectedCells` and `deselectedCells` should be an array 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).

This object shape for the [`defaultCellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#defaultCellSelection)/[`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) props allows you full flexibility in specifying the selection. You can specify a single cell, a range of cells, or even a non-contiguous selection. You can default to everything being selected, or everything being deselected and then enumerate your specific exceptions.

[Specifying a default cell selection in Infinite Table](https://codesandbox.io/s/cell-selection-with-default-value-in-infinite-table-fzdhwr)

## 2️⃣ Cell Selection using wildcards

The above examples show how to select specific cells, but what if you want to select all cells in a column, or all cells in a row?

Well, that turns out to be straightforward as well. You can use the `*` wildcard to select all cells in a column or all cells in a row.

```tsx title="All cells in row with id rowId3 and all cells in hobby column are selected"
const defaultCellSelection = {
  defaultSelection: false,
  selectedCells: [
    ['*', 'hobby'],
    ['rowId3', '*'],
  ],
}
<DataSource selectionMode="multi-cell" defaultCellSelection={defaultCellSelection} />
```

[Cell selection using wildcards](https://codesandbox.io/s/cell-selection-with-wildcards-in-infinite-table-48rs75)

Wildcard selection is really powerful and it allows you to select lots of cells without the need to enumerate them all.

For example, you can easily select all cells except a few.

### Listening to selection changes

You can listen to selection changes by using the [`onCellSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onCellSelectionChange) prop.

If you're using controlled cell selection, you have to update the [`cellSelection`](https://infinite-table.com/docs/reference/datasource-props/index.md#cellSelection) prop yourself in response to user interaction - so [`onCellSelectionChange`](https://infinite-table.com/docs/reference/datasource-props/index.md#onCellSelectionChange) will be your way of listening to selection changes.

## 3️⃣ Cell Selection API

In addition to managing cell selection declaratively, which we encourage, you can also use the [Cell Selection API](https://infinite-table.com/docs/reference/cell-selection-api/index.md) to imperatively update the current selection.

We offer the following methods:

- [`selectCell`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#selectCell) - selects a single cell, while allowing you to keep or to clear previous selection
- [`deselectCell`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#deselectCell) - deselects the specified cell
- [`selectColumn`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#selectColumn) - selects a whole column in the DataGrid
- [`deselectColumn`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#deselectColumn) - deselects the specified column
- [`selectRange`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#selectRange) - selects a range of cells
- [`deselectRange`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#deselectRange) - deselects the specified range of cells
- [`selectAll`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#selectAll) - selects all cells in the DataGrid
- [`clear`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#clear) - clears selection (deselects all cells in the DataGrid)
- [`isCellSelected`](https://infinite-table.com/docs/reference/cell-selection-api/index.md#isCellSelected) - checks if the specified cell is selected or not

## Conclusion

We'd love to hear your feedback - what do you think we've got right and what's missing. Please reach out to us via email at <a href="mailto:admin@infinite-table.com" className=" text-glow " > admin@infinite-table.com </a> or follow us [@get_infinite](https://twitter.com/get_infinite) to keep up-to-date with news about the product.

Talk soon 🙌