---
product: "AG Grid"
title: "Multi-Row Selection"
description: "Configure selection of multiple rows, checkbox selection, and group selection in the JavaScript Table."
framework: javascript
version: "36.3.0"
related:
    - title: "Single Row Selection"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-selection-single-row/"
    - title: "API Reference"
      url: "https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-selection-api-reference/"
llms: "https://www.ag-grid.com/archive/36.3.0/llms.txt"
---

# Multi-Row Selection

Enable users to select many rows at once within a grid.

## Enabling Multi-Row Selection

To enable multi-row selection set `rowSelection.mode` to `'multiRow'`:

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow'
    },

    // other grid options ...
}
```

The following example illustrates a basic multi-row selection configuration.

#### Enabling Row Selection

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: {
    mode: "multiRow",
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));
```

[Live example: Enabling Row Selection](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/enabling-row-selection/typescript/)

Click checkboxes to select or deselect a row. Alternatively, you can do this via the keyboard by focusing the row and pressing the `␣ Space` key. Users can hold `⇧ Shift` and then click a checkbox to add a range of adjacent rows to the selection.

Ranges of rows can be selected by holding down `⇧ Shift` while clicking on checkboxes. This behaviour also applies when [Click Selection](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-selection-multi-row/#enable-click-selection--deselection) is enabled, and in [Group Selection](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/grouping-row-selection/).

## Removing Selection Checkboxes

To prevent any row selection checkboxes from being rendered in rows, set `rowSelection.checkboxes` to `false`. To prevent the header checkbox from being rendered, set `rowSelection.headerCheckbox` to `false`. Setting both to `false` will disable the checkbox column. You will also need to enable click selection by setting `enableClickSelection: true`.

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxes: false,
        headerCheckbox: false,
        enableClickSelection: true,
    },

    // other grid options ...
}
```

#### Checkbox Selection

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete" },
    { field: "sport" },
    { field: "year", maxWidth: 120 },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: {
    mode: "multiRow",
    checkboxes: false,
    headerCheckbox: false,
    enableClickSelection: true,
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Checkbox Selection](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/checkbox-selection/typescript/)

> **Note**
>
> You may pass a function to `rowSelection.checkboxes` to dynamically enable or disable checkboxes for given rows. Unlike the boolean `false`, which removes the checkboxes entirely, a selectable row for which the function returns `false` shows a disabled checkbox rather than removing it.
>
> For rows where both `isRowSelectable` and `rowSelection.checkboxes` return `false`, checkboxes will be hidden, rather than disabled.

## Selection via Row Numbers

When [Row Numbers](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-numbers/) are enabled, clicking a Row Number selects the row, provided click selection is enabled. This gives users a dedicated click target for selecting rows when the checkbox column has been removed.

```js
const gridOptions = {
    rowNumbers: true,
    rowSelection: {
        mode: 'multiRow',
        checkboxes: false,
        headerCheckbox: false,
        enableClickSelection: true,
    },

    // other grid options ...
}
```

If [Cell Selection](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/cell-selection/) is also enabled, a Row Number click selects the row and the cells in it. To leave only the row selected, see [Suppressing Cell Selection Integration](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-numbers/#suppressing-cell-selection-integration).

## Configure Selectable Rows

It is possible to specify which rows can be selected via the `rowSelection.isRowSelectable` callback function.

For instance if we only wanted to allow selection for rows where the 'year' property is less than 2007, we could implement the following:

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        isRowSelectable: (rowNode) => rowNode.data ? rowNode.data.year < 2007 : false,
    },

    // other grid options ...
}
```

Rows for which `isRowSelectable` returns `false` cannot be selected at all, whether using the UI or the API.

#### Checkbox Selection: Hiding Disabled Checkboxes

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "year", maxWidth: 120 },
    { field: "athlete" },
    { field: "sport" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: {
    mode: "multiRow",
    hideDisabledCheckboxes: true,
    isRowSelectable: (node) => (node.data ? node.data.year < 2007 : false),
  },
};

function toggleHideCheckbox() {
  gridApi.setGridOption("rowSelection", {
    mode: "multiRow",
    isRowSelectable: (node) => (node.data ? node.data.year < 2007 : false),
    hideDisabledCheckboxes: getCheckboxValue("#toggle-hide-checkbox"),
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));

function getCheckboxValue(id: string): boolean {
  return document.querySelector<HTMLInputElement>(id)?.checked ?? false;
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).toggleHideCheckbox = toggleHideCheckbox;
}
```

[Live example: Checkbox Selection: Hiding Disabled Checkboxes](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/checkbox-selection-disable-checkboxes/typescript/)

Note that this example uses `hideDisabledCheckboxes` to hide disabled checkboxes, which can be toggled on or off.

## Selecting All Rows

All rows may be selected at once by using the header checkbox, which is enabled by default in `'multiRow'` mode.

The three possible values of `rowSelection.selectAll` are:

- `'all'`: *(Default)* Selecting the header checkbox selects all [selectable](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-selection-multi-row/#configure-selectable-rows) rows in the grid.
- `'filtered'`: Selecting the header checkbox will select all rows that satisfy the currently active filter.
- `'currentPage'`: Selecting the header checkbox will select all rows that satisfy the currently active filter on the current page.

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        selectAll: 'filtered'
    },

    // other grid options ...
}
```

The example below demonstrates the three different modes available for `rowSelection.selectAll`. Change the mode, apply a filter, then click the header checkbox: the [Status Bar](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/status-bar/) reports how many rows each mode selected.

#### Header Checkbox Selection

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  PaginationModule,
  QuickFilterModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import { StatusBarModule } from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  PaginationModule,
  RowSelectionModule,
  QuickFilterModule,
  ClientSideRowModelModule,
  StatusBarModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { headerName: "Athlete", field: "athlete", minWidth: 180 },
    { field: "age" },
    { field: "country", minWidth: 150 },
    { field: "year" },
    { field: "date", minWidth: 150 },
    { field: "sport", minWidth: 150 },
    { field: "gold" },
    { field: "silver" },
    { field: "bronze" },
    { field: "total" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  pagination: true,
  // The default page size of 100 would fit the whole data set on one page, making 'currentPage'
  // indistinguishable from 'all'.
  paginationPageSize: 20,
  rowSelection: {
    mode: "multiRow",
    selectAll: "all",
  },
  statusBar: {
    statusPanels: [
      { statusPanel: "agSelectedRowCountComponent", align: "right" },
      { statusPanel: "agFilteredRowCountComponent", align: "right" },
      { statusPanel: "agTotalRowCountComponent", align: "right" },
    ],
  },
};

function onQuickFilterChanged() {
  gridApi!.setGridOption(
    "quickFilterText",
    document.querySelector<HTMLInputElement>("#quickFilter")?.value,
  );
}

function updateSelectAllMode() {
  const selectAll =
    document.querySelector<HTMLSelectElement>("#select-all-mode")?.value ??
    "all";

  // Clear the existing selection so the new mode's behaviour is seen from a clean state,
  // rather than the counts still reflecting rows selected under the previous mode.
  gridApi.deselectAll();

  gridApi.setGridOption("rowSelection", {
    mode: "multiRow",
    selectAll: selectAll as "all" | "filtered" | "currentPage",
  });
}

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onQuickFilterChanged = onQuickFilterChanged;
  (<any>window).updateSelectAllMode = updateSelectAllMode;
}
```

[Live example: Header Checkbox Selection](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/header-checkbox/typescript/)

Note that when `rowSelection.isRowSelectable` is defined, the header checkbox will only select selectable rows.

> **Note**
>
> The value of `rowSelection.selectAll` does not affect group selection behaviour, which is controlled by `rowSelection.groupSelects`. See [Row Grouping - Selecting Groups](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/grouping-row-selection/) for more on this.

## Customising the Checkbox Column

The checkbox column may be customised in a similar way to any other column, including custom renderers and tooltips, by specifying its column definition in the `selectionColumnDef` grid option.

By default, the checkbox column:

- is locked to the left edge of the grid (the right edge with [RTL](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/rtl/)), and cannot be moved by users (`lockPosition`, `suppressMovable`)
- is 50px wide, and cannot be resized (`initialWidth`, `resizable`)
- cannot be sorted (`sortable`)
- has no header menu button (`suppressHeaderMenuButton`)
- is not editable, has no fill handle, and is not offered as chart data in [Integrated Charts](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/integrated-charts/)

Override the properties in brackets in `selectionColumnDef`. For example, set both `suppressMovable` and `lockPosition` to `false` to let users drag the column to reorder, pin or unpin it.

Updating `selectionColumnDef` updates the column as [Updating Column Definitions](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/column-updating-definitions/) does for any column: an attribute the update leaves out, such as `width`, `pinned` or `flex`, keeps its current state, `null` clears `pinned` or `flex`, and a `width` applies on every update that sets it unless the column is flexing. To give the column a starting width that the user's resizing keeps, set `initialWidth` instead of `width`. Setting an equal `selectionColumnDef` again changes nothing, as setting the same object does.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `selectionColumnDef` | `SelectionColumnDef` |  |  | Configure the selection column, used for displaying checkboxes. Note that due to the nature of this column, this type is a subset of `ColDef`, which does not support several normal column features such as editing, pivoting and grouping. |

The example below demonstrates the following configuration:

- allowing sorting using the default sort order (selected first) via the header
- changing the default width of the column
- allowing resizing
- pinning it to the left

```js
const gridOptions = {
    selectionColumnDef: {
        sortable: true,
        resizable: true,
        width: 120,
        suppressHeaderMenuButton: false,
        pinned: 'left',
    },

    // other grid options ...
}
```

#### Customising Checkbox Column

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IRowNode,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  RowApiModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete", minWidth: 300 },
    { field: "country", minWidth: 200 },
    { field: "sport", minWidth: 200 },
    { field: "year" },
    { field: "date", minWidth: 200 },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: { mode: "multiRow" },
  selectionColumnDef: {
    sortable: true,
    resizable: true,
    width: 120,
    suppressHeaderMenuButton: false,
    pinned: "left",
  },
  onFirstDataRendered: (params) => {
    const nodesToSelect: IRowNode[] = [];
    params.api.forEachNode((node) => {
      if (node.rowIndex && node.rowIndex >= 3 && node.rowIndex <= 8) {
        nodesToSelect.push(node);
      }
    });
    params.api.setNodesSelected({ nodes: nodesToSelect, newValue: true });
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));
```

[Live example: Customising Checkbox Column](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/customise-checkbox-column/typescript/)

> **Note**
>
> When sorting by the checkbox column, selecting a new row will not automatically update the row order, see [Change Detection](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/change-detection/#change-detection-and-sorting-filtering-grouping) for more information.

> **Note**
>
> The checkbox column is sized statically, and is therefore not affected by [Auto-Sizing](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/column-sizing/#auto-sizing-columns).

## Enable Click Selection & Deselection

The `rowSelection.enableClickSelection` property configures whether a row's selection state will be impacted when the row is clicked.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `enableClickSelection` | `boolean \| 'enableDeselection' \| 'enableSelection'` |  | `false` | Modifies the selection behaviour when clicking a row. Choosing `'enableSelection'` allows selection of a row by clicking the row itself. Choosing `'enableDeselection'` allows deselection of a row by CTRL-clicking the row itself. Choosing `true` allows both selection of a row by clicking and deselection of a row by CTRL-clicking. Choosing `false` prevents rows from being selected or deselected by clicking. |

This is typically used when [Checkbox Selection](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/row-selection-multi-row/#removing-selection-checkboxes) is disabled, though both can be enabled simultaneously if desired. Click-selection and deselection can be enabled by setting `enableClickSelection` to `true`, otherwise they may be enabled separately using the values `'enableSelection'` and `'enableDeselection'`.

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        enableClickSelection: true,
    },

    // other grid options ...
}
```

The example below demonstrates the three possible configurations for this property, as well as the behaviour when it is disabled. Use the select element to switch between modes.

#### Disable Click Selection

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { 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: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: { mode: "multiRow", enableClickSelection: true },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));

function onEnableClickSelection() {
  const value =
    document.querySelector<HTMLSelectElement>("#select-enable")?.value;

  gridApi.setGridOption("rowSelection", {
    mode: "multiRow",
    enableClickSelection:
      value === "true" ? true : value === "false" ? false : (value as any),
  });
}

if (typeof window !== "undefined") {
  // Attach external event handlers to window so they can be called from index.html
  (<any>window).onEnableClickSelection = onEnableClickSelection;
}
```

[Live example: Disable Click Selection](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/suppress-click-selection/typescript/)

> **Note**
>
> Note that deselection is still possible when checkboxes are enabled by clicking a selected checkbox.

## Force Checkboxes to be Selected

It is possible to select a row via the Grid API and disable its checkbox to prevent users from deselecting it. This can be achieved by providing a function to `rowSelection.checkboxes`.

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxes: (params) => params.data && params.data.year === 2012,
    },
    onFirstDataRendered: (params) => {
        const nodesToSelect = [];
        params.api.forEachNode((node) => {
            if (node.data && node.data.year <= 2008 && node.data.year >= 2004) {
                nodesToSelect.push(node);
            }
        });
        params.api.setNodesSelected({ nodes: nodesToSelect, newValue: true });
    },

    // other grid options ...
}
```

In the example below only rows with Year equal to 2012 can be selected or deselected by the user. Clicking the header checkbox, however, will select all rows even if their checkboxes are disabled.

#### Force Checkboxes to be Selected

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  IRowNode,
  ModuleRegistry,
  RowApiModule,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  RowApiModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "year", maxWidth: 120 },
    { field: "athlete" },
    { field: "sport" },
  ],
  defaultColDef: {
    flex: 1,
    minWidth: 100,
  },
  rowSelection: {
    mode: "multiRow",
    checkboxes: (params) => params.data?.year === 2012,
  },
  onFirstDataRendered: (params) => {
    const nodesToSelect: IRowNode[] = [];
    params.api.forEachNode((node) => {
      if (node.data && node.data.year <= 2008 && node.data.year >= 2004) {
        nodesToSelect.push(node);
      }
    });
    params.api.setNodesSelected({ nodes: nodesToSelect, newValue: true });
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data));
```

[Live example: Force Checkboxes to be Selected](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/force-enable-checkboxes/typescript/)

## Selecting Multiple Rows without Ctrl key

In certain circumstances, especially in the context of touchscreen devices, users may want to select multiple rows without having to use the `^ Ctrl` key.

This can be accomplished by setting the `rowSelection.enableSelectionWithoutKeys` flag to `true`. You will also need to set `enableClickSelection` to `true`.

```js
const gridOptions = {
    rowSelection: {
        mode: 'multiRow',
        checkboxes: false,
        headerCheckbox: false,
        enableSelectionWithoutKeys: true,
        enableClickSelection: true,
    },

    // other grid options ...
}
```

Click multiple rows in the example below without pressing any keyboard keys to explore this behaviour.

#### Multi-select without Keyboard modifiers

```ts
import {
  ClientSideRowModelModule,
  GridApi,
  GridOptions,
  ModuleRegistry,
  RowSelectionModule,
  createGrid,
  enableDevValidations,
} from "ag-grid-community";
import {
  ColumnMenuModule,
  ColumnsToolPanelModule,
  ContextMenuModule,
  RowGroupingModule,
} from "ag-grid-enterprise";
import { IOlympicData } from "./interfaces";

if (process.env.NODE_ENV !== "production") {
  // Enable extended validations only for development
  enableDevValidations();
}

ModuleRegistry.registerModules([
  RowSelectionModule,
  ClientSideRowModelModule,
  ColumnsToolPanelModule,
  ColumnMenuModule,
  ContextMenuModule,
  RowGroupingModule,
]);

let gridApi: GridApi<IOlympicData>;

const gridOptions: GridOptions<IOlympicData> = {
  columnDefs: [
    { field: "athlete" },
    { field: "sport" },
    { field: "year", maxWidth: 120 },
  ],
  defaultColDef: { flex: 1, minWidth: 100 },
  rowSelection: {
    mode: "multiRow",
    enableSelectionWithoutKeys: true,
    enableClickSelection: true,
    checkboxes: false,
    headerCheckbox: false,
  },
};

const gridDiv = document.querySelector<HTMLElement>("#myGrid")!;
gridApi = createGrid(gridDiv, gridOptions);

fetch("https://www.ag-grid.com/example-assets/small-olympic-winners.json")
  .then((response) => response.json())
  .then((data: IOlympicData[]) => gridApi.setGridOption("rowData", data));
```

[Live example: Multi-select without Keyboard modifiers](https://www.ag-grid.com/archive/36.3.0/examples/row-selection-multi-row/multi-select-with-click/typescript/)

## API Reference

See the full list of configuration options available in `'multiRow'` mode.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `mode` | `'multiRow'` |  |  | 'multiRow' |
| `groupSelects` | `GroupSelectionMode` |  | `'self'` | Determine group selection behaviour |
| `selectAll` | `SelectAllMode` |  | `'all'` | Determines how "select all" behaviour works. This controls header checkbox selection. |
| `headerCheckbox` | `boolean` |  | `true` | If `true` a 'select all' checkbox will be put into the header. |
| `ctrlASelectsRows` | `boolean` |  | `false` | If `true`, using CTRL+A will select all rows when [Cell Selection](https://www.ag-grid.com/archive/36.3.0/javascript-data-grid/cell-selection/) is enabled |
| `enableClickSelection` | `boolean \| 'enableDeselection' \| 'enableSelection'` |  | `false` | Modifies the selection behaviour when clicking a row. Choosing `'enableSelection'` allows selection of a row by clicking the row itself. Choosing `'enableDeselection'` allows deselection of a row by CTRL-clicking the row itself. Choosing `true` allows both selection of a row by clicking and deselection of a row by CTRL-clicking. Choosing `false` prevents rows from being selected or deselected by clicking. |
| `checkboxes` | `boolean \| CheckboxSelectionCallback` |  | `true` | Set to `true` or return `true` from the callback to render a selection checkbox. |
| `checkboxLocation` | `CheckboxLocation` |  | `'selectionColumn'` | Configure where checkboxes are displayed. Choosing `'selectionColumn'` displays checkboxes in a dedicated selection column. Choosing `'autoGroupColumn'` displays checkboxes in the autoGroupColumn. This applies to row checkboxes and header checkboxes. |
| `hideDisabledCheckboxes` | `boolean` |  | `false` | Set to `true` to hide a disabled checkbox when row is not selectable and checkboxes are enabled. |
| `isRowSelectable` | `IsRowSelectable` |  |  | Callback to be used to determine which rows are selectable. By default rows are selectable, so return `false` to make a row non-selectable. |
| `copySelectedRows` | `boolean` |  | `false` | When enabled and a row is selected, the copy action should copy the entire row, rather than just the focused cell |
| `enableSelectionWithoutKeys` | `boolean` |  | `false` | Set to `true` to allow (possibly multiple) rows to be selected and deselected using single click or touch. |
| `masterSelects` | `'self' \| 'detail'` |  | `'self'` | Determines the selection behaviour of master rows with respect to their detail cells. When set to `'self'`, selecting the master row has no effect on the selection state of the detail row. When set to `'detail'`, selecting the master row behaves the same as the header checkbox of the detail grid. |