---
title: "Row Selection API Reference"
framework: vue
version: "36.1.0"
---

# Row Selection API Reference

Selection API Reference for Single and Multi-Row Selection

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

## Configuration API

### Single Row Mode

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `mode` | `'singleRow'` |  |  | 'singleRow' |
| `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. |

### Multi-Row 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/vue-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. |

## Selection Events

There are two events with regards to selection, illustrated in the example below:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `rowSelected` | `RowSelectedEvent` |  |  | Row is selected or deselected. The event contains the node in question, so call the node's `isSelected()` method to see if it was just selected or deselected. |
| `selectionChanged` | `SelectionChangedEvent` |  |  | Row selection is changed. Use the `selectedNodes` field to get the list of selected nodes at the time of the event. When using the SSRM, `selectedNodes` will be `null` when selecting all nodes. Instead, refer to the `serverSideState` field. |

The example below has configured messages to be logged to the developer console on both these events firing. Click a row while the developer console is open to see an illustration of the events.

#### Selection Events

```ts
import {
  createApp,
  defineComponent,
  onBeforeMount,
  ref,
  shallowRef,
} from "vue";
import { AgGridVue } from "ag-grid-vue3";
import {
  ClientSideRowModelModule,
  ColDef,
  ColGroupDef,
  GridApi,
  GridOptions,
  GridReadyEvent,
  ModuleRegistry,
  RowSelectedEvent,
  RowSelectionModule,
  RowSelectionOptions,
  SelectionChangedEvent,
  enableDevValidations,
} from "ag-grid-community";
import { IOlympicData } from "./interfaces";
if (process.env.NODE_ENV !== "production") {
  enableDevValidations();
}

ModuleRegistry.registerModules([RowSelectionModule, ClientSideRowModelModule]);

const VueExample = defineComponent({
  template: `
        <div style="height: 100%">
                <ag-grid-vue
      style="width: 100%; height: 100%;"
      @grid-ready="onGridReady"
      :columnDefs="columnDefs"
      :defaultColDef="defaultColDef"
      :rowSelection="rowSelection"
      :rowData="rowData"
      @row-selected="onRowSelected"
      @selection-changed="onSelectionChanged"></ag-grid-vue>
        </div>
    `,
  components: {
    "ag-grid-vue": AgGridVue,
  },
  setup(props) {
    const gridApi = shallowRef<GridApi<IOlympicData> | null>(null);
    const columnDefs = ref<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" },
    ]);
    const defaultColDef = ref<ColDef>({
      flex: 1,
      minWidth: 100,
    });
    const rowSelection = ref<RowSelectionOptions | "single" | "multiple">({
      mode: "multiRow",
      headerCheckbox: false,
    });
    const rowData = ref<IOlympicData[]>(null);

    function onRowSelected(event: RowSelectedEvent) {
      console.log(
        "row " +
          event.node.data.athlete +
          " selected = " +
          event.node.isSelected(),
      );
    }
    function onSelectionChanged(event: SelectionChangedEvent) {
      const rowCount = event.selectedNodes?.length;
      console.log("selection changed, " + rowCount + " rows selected");
    }
    const onGridReady = (params: GridReadyEvent) => {
      gridApi.value = params.api;

      const updateData = (data) => (rowData.value = data);

      fetch("https://www.ag-grid.com/example-assets/olympic-winners.json")
        .then((resp) => resp.json())
        .then((data) => updateData(data));
    };

    return {
      gridApi,
      columnDefs,
      defaultColDef,
      rowSelection,
      rowData,
      onGridReady,
      onRowSelected,
      onSelectionChanged,
    };
  },
});

const app = createApp(VueExample);
app.mount("#app");
```

[Live example: Selection Events](https://www.ag-grid.com/examples/row-selection-api-reference/selection-events/vue3)

## Node Selection API

To select rows programmatically, use the `node.setSelected(params)` method.

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `setSelected` | `Function` |  |  | Select (or deselect) the node. `newValue` - `true` for selection, `false` for deselection.`clearSelection` - If selecting, then passing `true` will select the node exclusively (i.e. NOT do multi select). If doing deselection, `clearSelection` has no impact. |
| `isSelected` | `Function` |  |  | Returns: - `true` if node is selected. - `false` if the node isn't selected. - `undefined` if it's partially selected (a group where not all descendants are selected, and `groupSelects` is `'descendants'` or `'filteredDescendants'`). |

For example:

```ts
// set selected, keep any other selections
node.setSelected(true);

// set selected, exclusively, remove any other selections
node.setSelected(true, true);

// un-select
node.setSelected(false);

// check status of node selection
const selected = node.isSelected();
```

## Grid Selection API

The grid API has the following methods for selection:

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `selectAll` | `Function` |  |  | Select all rows. By default this ignores filtering, expansion and pagination settings. Pass the appropriate select all mode as an argument in order to select only rows that satisfy the filter, or those rows on the current page. Module: [`RowSelectionModule`](https://www.ag-grid.com/vue-data-grid/modules/). |
| `deselectAll` | `Function` |  |  | Clear all row selections. By default this ignores filtering, expansion and pagination settings. Pass the appropriate select all mode as an argument in order to select only rows that satisfy the filter, or those rows on the current page. Module: [`RowSelectionModule`](https://www.ag-grid.com/vue-data-grid/modules/). |
| `getSelectedNodes` | `Function` |  |  | Returns an unsorted list of selected nodes. Getting the underlying node (rather than the data) is useful when working with tree / aggregated data, as the node can be traversed. Module: [`RowSelectionModule`](https://www.ag-grid.com/vue-data-grid/modules/). |
| `getSelectedRows` | `Function` |  |  | Returns an unsorted list of selected rows (i.e. row data that you provided). Module: [`RowSelectionModule`](https://www.ag-grid.com/vue-data-grid/modules/). |
| `setNodesSelected` | `Function` |  |  | Set all of the provided nodes selection state to the provided value. Module: [`RowSelectionModule`](https://www.ag-grid.com/vue-data-grid/modules/). |

If you want to select only the filtered rows, you could do this using the following:

```js
// loop through each node after filter
const nodes = [];
api.forEachNodeAfterFilter(node => {
    nodes.push(node);
});
api.setNodesSelected({ nodes, newValue: true });
```