---
title: "Cell Selection"
enterprise: true
framework: angular
version: "36.1.0"
---

# Cell Selection

Cell selection allows Excel-like selection of ranges of cells. Cell selections are useful for visually highlighting data, copying data to the [Clipboard](https://www.ag-grid.com/angular-data-grid/clipboard/), or for doing aggregations using the [Status Bar](https://www.ag-grid.com/angular-data-grid/status-bar/).

## Enabling Cell Selection

Cell Selection is enabled by setting the `gridOptions.cellSelection` to `true`, or to a configuration object.

```ts
<ag-grid-angular
    [cellSelection]="cellSelection"
    /* other grid options ... */ />

this.cellSelection = true;
```

When enabled, ranges can be selected in the following ways:

- **Mouse Drag:** Click the mouse down on a cell and drag and release the mouse over another cell. A range will be created between the two cells and clear any existing ranges.
- **Ctrl & Mouse Drag:** Holding `^ Ctrl` key while creating a range using mouse drag **outside an existing range** will create a new cell range selection and keep any existing ranges.
- **Shift & Click:** Clicking on one cell to focus that cell, then holding down `⇧ Shift` while clicking another cell, will create a range between both cells.
- **Shift & Arrow Keys:** Focusing a cell and then holding down `⇧ Shift` and using the arrow keys will create a range starting from the focused cell.
- **Ctrl & Shift & Arrow Keys:** Focusing a cell and then holding down `^ Ctrl` + `⇧ Shift` and using the arrow keys will create a range starting from the focused cell to the last cell in the direction of the Arrow pressed.

### Cell Range Deselection

It is possible to deselect part of existing ranges in the following ways:

- **Ctrl & Mouse Drag:** Holding `^ Ctrl` and dragging a range starting **within an existing range** will cause any cells covered by the new range to be deselected.
- **Ctrl & Click:** Holding `^ Ctrl` and clicking a cell will deselect just that cell.

Note that deselecting part of a range can split the range into multiple ranges, since individual ranges have the limitation of being rectangular.

The example below demonstrates simple cell selection. Cell ranges can be selected in all the ways described above.

#### Cell Range Selection and Deselection

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="true"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "age", maxWidth: 90 },
    { field: "country", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Cell Range Selection and Deselection](https://www.ag-grid.com/examples/cell-selection/range-selection/angular)

## Prevent Selection of Multiple Ranges

By default multiple ranges can be selected. To restrict cell selection to a single range, even if the `^ Ctrl` key is held down, set `cellSelection.suppressMultiRanges` to `true`.

```ts
<ag-grid-angular
    [cellSelection]="cellSelection"
    /* other grid options ... */ />

this.cellSelection = {
    suppressMultiRanges: true,
};
```

The following example demonstrates single range cell selection:

#### Cell Range Selection Suppress Multi

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  NumberEditorModule,
  TextEditorModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  NumberEditorModule,
  TextEditorModule,
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="cellSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "age", maxWidth: 90 },
    { field: "country", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
    editable: true,
  };
  cellSelection: boolean | CellSelectionOptions = { suppressMultiRanges: true };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Cell Range Selection Suppress Multi](https://www.ag-grid.com/examples/cell-selection/range-selection-suppress-multi/angular)

## Selecting Cells via Column Headers

Users can select all visible cells in a column by setting `cellSelection.enableColumnSelection` to `true` and either clicking a column header, or pressing the `↵ Enter` key when the column header is focused.

- By default, when selecting a column, all other ranges are cleared. If you wish to keep existing selections, hold `^ Ctrl` and then select a column header.
- Cells that have been selected via column selection may be de-selected by holding `^ Ctrl` and then clicking the column header.
- Users can extend the range of a column selection by holding `⇧ Shift` and then clicking on another column header.
- When interacting via the keyboard, users may press `↵ Enter` while a column header is focussed instead of clicking a column header.

This feature is illustrated in the example below, which uses the following configuration:

```ts
<ag-grid-angular
    [cellSelection]="cellSelection"
    /* other grid options ... */ />

this.cellSelection = {
    enableColumnSelection: true,
};
```

#### Cell Selection via Column Headers

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import "./styles.css";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="cellSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: (ColDef | ColGroupDef)[] = [
    { field: "athlete", minWidth: 150 },
    {
      headerName: "Category A1",
      children: [
        { field: "age", maxWidth: 90 },
        { field: "country", minWidth: 150 },
      ],
    },
    {
      headerName: "Category B1",
      children: [
        {
          headerName: "Category B2",
          children: [
            { field: "year", maxWidth: 90 },
            { field: "date", minWidth: 150 },
            { field: "sport", minWidth: 150 },
            { field: "gold" },
            { field: "silver" },
            { field: "bronze" },
            { field: "total" },
          ],
        },
      ],
    },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  cellSelection: boolean | CellSelectionOptions = {
    enableColumnSelection: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Cell Selection via Column Headers](https://www.ag-grid.com/examples/cell-selection/column-header-cell-selection/angular)

> **Note**
>
> When column selection is enabled, [Row Sorting](https://www.ag-grid.com/angular-data-grid/row-sorting/) requires holding down the `⌥ Alt` key in addition to the normal interaction (i.e. clicking or pressing `↵ Enter`).
>
> Similarly [Column Group Expansion](https://www.ag-grid.com/angular-data-grid/column-groups/) via keyboard requires holding down the `⌥ Alt` key in addition to pressing `↵ Enter`.

## Ranges with Pinned Columns and Rows

It is possible to select a cell range that spans pinned and non-pinned sections of the grid. If you do this, the selected range will not have any gaps with regards to the column or row order.

For example, if you start the drag on the left pinned area and drag to the right pinned area, then all of the columns in the centre area will also be part of the range. Likewise with pinned rows, no row gaps will occur if a cell range spans into pinned rows. A range will be continuous between the rows pinned to the top, the centre, and the rows pinned to the bottom.

This can be thought of as follows: if you have a grid with pinned rows and / or columns, then 'flatten out' the grid in your head so that all rows and columns are visible, then the cell selection will work as you would expect in the flattened out version where only full rectangles can be selectable.

#### Cell Range Selection and Pinned Areas

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  IsRowPinned,
  ModuleRegistry,
  PinnedRowModule,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
  PinnedRowModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="true"
    [enableRowPinning]="true"
    [isRowPinned]="isRowPinned"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150, pinned: "left" },
    { field: "age", maxWidth: 90 },
    { field: "country", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total", pinned: "right" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  isRowPinned: IsRowPinned = (node) => {
    const country = node.data?.country;
    return country == "Norway" ? "top" : null;
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Cell Range Selection and Pinned Areas](https://www.ag-grid.com/examples/cell-selection/range-selection-pinned-areas/angular)

## Highlight Headers

It is possible to highlight the Grid Headers that are part of a range by setting the `cellSelection.enableHeaderHighlight` to `true`.

```ts
<ag-grid-angular
    [cellSelection]="cellSelection"
    /* other grid options ... */ />

this.cellSelection = {
    enableHeaderHighlight: true,
};
```

#### Cell Range Selection Header Highlight

```ts
import { Component } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { AgGridAngular } from "ag-grid-angular";
import {
  CellSelectionOptions,
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  enableDevValidations,
} from "ag-grid-community";
import {
  CellSelectionModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
} from "ag-grid-enterprise";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([
  ClientSideRowModelModule,
  ClipboardModule,
  ColumnMenuModule,
  ContextMenuModule,
  CellSelectionModule,
]);
import { IOlympicData } from "./interfaces";

@Component({
  selector: "my-app",
  standalone: true,
  imports: [AgGridAngular],
  template: `<ag-grid-angular
    style="width: 100%; height: 100%;"
    [columnDefs]="columnDefs"
    [defaultColDef]="defaultColDef"
    [cellSelection]="cellSelection"
    [rowData]="rowData"
    (gridReady)="onGridReady($event)"
  /> `,
})
export class AppComponent {
  columnDefs: ColDef[] = [
    { field: "athlete", minWidth: 150 },
    { field: "age", maxWidth: 90 },
    { field: "country", minWidth: 150 },
    { field: "year", maxWidth: 90 },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ];
  defaultColDef: ColDef = {
    flex: 1,
    minWidth: 100,
  };
  cellSelection: boolean | CellSelectionOptions = {
    enableHeaderHighlight: true,
  };
  rowData!: IOlympicData[];

  constructor(private http: HttpClient) {}

  onGridReady(params: GridReadyEvent<IOlympicData>) {
    this.http
      .get<
        IOlympicData[]
      >("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
      .subscribe((data) => (this.rowData = data));
  }
}
```

[Live example: Cell Range Selection Header Highlight](https://www.ag-grid.com/examples/cell-selection/range-selection-highlight-headers/angular)

## Copy Cell Range Down

When you have more than one row selected in a range, pressing keys `^ Ctrl`+`D` will copy the top row values to all other rows in the selected range.

By default, the Value Formatter and Value Parser will be used whilst copying the range via the [Use Value Formatter For Export](https://www.ag-grid.com/angular-data-grid/value-formatters/#formatting-for-export) and [Use Value Parser for Import](https://www.ag-grid.com/angular-data-grid/value-parsers/#use-value-parser-for-import) features.

## Bulk Cell Edit

When [Cell Editing](https://www.ag-grid.com/angular-data-grid/cell-editing/) is enabled, and a cell range is selected, typing to enter a new value and pressing the `^ Ctrl`+`↵ Enter` keys will set the newly provided cell value to all the editable cells in the selected cell range.

## Delete Cell Range

When [Cell Editing](https://www.ag-grid.com/angular-data-grid/cell-editing/) is enabled, pressing the `Delete` key will clear all of the cells in the range (by setting the cell values to `null`). If your column uses a `valueParser`, it will receive an empty string (`''`) as the new value.

This will also emit the following events:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `cellSelectionDeleteStart` | `CellSelectionDeleteStartEvent` |  |  | Cell selection delete operation (cell clear) has started. |
| `cellSelectionDeleteEnd` | `CellSelectionDeleteEndEvent` |  |  | Cell selection delete operation (cell clear) has ended. |

## API Reference

> **Note**
>
> The cell selection state can be saved and restored as part of [Grid State](https://www.ag-grid.com/angular-data-grid/grid-state/).

Here you can find a full list of configuration options for `cellSelection`.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `suppressMultiRanges` | `boolean` |  | `false` | If `true`, only a single range can be selected |
| `enableHeaderHighlight` | `boolean` |  | `false;` | If `true` the header of cells containing ranges will be highlighted. |
| `enableColumnSelection` | `boolean` |  | `false` | If `true`, allows selection of a column of cells when clicking the column header. |
| `handle` | `RangeHandleOptions \| FillHandleOptions` |  |  | Determine the selection handle behaviour. Can be used to configure the range handle and the fill handle. |