Vue Data GridSingle Row Selection

Enable users to select a single row within a grid.

Enabling Single Row Selection

To enable single row selection set rowSelection.mode to 'singleRow'.

<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = {
    mode: 'singleRow'
};

The example below uses this configuration to restrict selection to a single row

Deselect a row by clicking its checkbox. Alternatively, you can do this via the keyboard by focusing the row and pressing the ␣ Space key.

Removing Selection Checkboxes

To prevent any row selection checkboxes from being rendered, set rowSelection.checkboxes to false. You will also need to enable click selection by setting enableClickSelection: true.

<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = {
    mode: 'singleRow',
    checkboxes: false,
    enableClickSelection: true,
};

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:

<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = {
    mode: 'singleRow',
    isRowSelectable: (rowNode) => rowNode.data ? rowNode.data.year < 2007 : false,
    hideDisabledCheckboxes: true
};

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

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

Customising the Checkbox Column

The checkbox column may be customised in a similar way to any other column, by specifying its column definition in the selectionColumnDef grid option.

The SelectionColumnDef allows for a great deal of customisation, including custom renderers, sorting, tooltips and more. The example below demonstrates allowing sorting using the default sort order (selected first) via the header menu, changing the default width of the column, allowing resizing, and adding some header tooltip text.

<ag-grid-vue
    :selectionColumnDef="selectionColumnDef"
    /* other grid options ... */>
</ag-grid-vue>

this.selectionColumnDef = {
    sortable: true,
    resizable: true,
    width: 100,
    suppressHeaderMenuButton: false,
    headerTooltip: 'Checkboxes indicate selection',
};

Enable Click Selection & Deselection

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

This is typically used when Checkbox Selection 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'.

<ag-grid-vue
    :rowSelection="rowSelection"
    /* other grid options ... */>
</ag-grid-vue>

this.rowSelection = { 
    mode: 'singleRow',
    enableClickSelection: true,
};

The example below demonstrates the three possible configurations for this property, as well as the behaviour when it is disabled. Click a row to select it, or ^ Ctrl-click a row to deselect it. Use the select element to switch between modes.

API Reference

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

Next up

Row selection works with row grouping, tree data, and the server-side row model. See the relevant documentation sections:

• Row Group Selection
• Tree Data Selection
• Server-Side Row Model Selection

Continue to the next section to learn about Multi-Row Selection.