React Data GridSingle Row Selection

Enable users to select a single row within a grid.

Enabling Single Row Selection

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

const selection = {
    mode: 'singleRow'
};

<AgGridReact selection={selection} />

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

Deselect a row by clicking its checkbox, or by holding ^ Ctrl and clicking the row directly. 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 selection.checkboxes to false.

const selection = {
    mode: 'singleRow',
    checkboxes: false,
};

<AgGridReact selection={selection} />

Configure Selectable Rows

It is possible to specify which rows can be selected via the selection.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:

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

<AgGridReact selection={selection} />

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 controlsColDef grid option.

The ControlsColDef 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, and adding some header tooltip text.

const controlsColDef = {
    sortable: true,
    width: 100,
    maxWidth: 100,
    suppressHeaderMenuButton: false,
    headerTooltip: 'Checkboxes indicate selection',
};

<AgGridReact controlsColDef={controlsColDef} />

Prevent Click Selection & Deselection

The selection.suppressClickSelection property configures whether a row's selection state will be impacted when the row is clicked, or when ␣ Space is pressed while the row is focused.

In some scenarios, such as when using checkbox selection, it can be preferable to disable other methods of selection, such as with the keyboard (via ␣ Space), selection via row click, and deselection via row click. Both selection and deselection can be disabled by setting suppressClickSelection to true, otherwise they may be disabled separately using the values 'suppressSelection' and 'suppressDeselection'.

const selection = { 
    mode: 'singleRow',
    suppressClickSelection: true,
};

<AgGridReact selection={selection} />

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.

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.