Single 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'.

dashGridOptions = {
    'rowSelection': {
        'mode': 'singleRow',
    },
    # other grid options...
}

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 <kbd>␣ Space<kbd> key.

Enable Click Selection & Deselection

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

• enableClickSelection:”>https://www.ag-grid.com/archive/32.3.4/react-data-grid//row-selection-single-row/#reference-SingleRowSelectionOptions-enableClickSelection):
  Modifies the selection behavior when clicking a row, or pressing <kbd>␣ Space<kbd> while focusing a row.

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'.

dashGridOptions = {
    'rowSelection': {
        'mode': 'singleRow',
        'enableClickSelection': True,
    },
    # other grid options...
}

The example below demonstrates the three possible configurations for this property, as well as the behavior when it is
disabled. Click a row to select it, and <kbd>Ctrl<kbd>-click to deselect it.

Note that deselection is still possible using the <kbd>␣ Space<kbd> key or when checkboxes are enabled by clicking a
selected checkbox.

<br>

Removing Selection Checkboxes

To prevent any row selection checkboxes from being rendered, set rowSelection.checkboxes to False.

Selection is still possible using the <kbd>␣ Space<kbd> key, or setting enableClickSelection to select clicking on
the row.

dashGridOptions = {
    'rowSelection': {
        'mode': 'singleRow',
        'checkboxes': False,
        'enableClickSelection': True,
    },
    # other grid options...
}

You may also pass a function to rowSelection.checkboxes to dynamically enable or disable checkboxes for given rows.
For example, to enable checkboxes for rows where the ‘year’ property is less than 2007, we can set:

dashGridOptions = {
    'rowSelection': {
        'mode': 'singleRow',
        'checkboxes': {"function": "params.data.year < 2007"},
    },
    # other grid options...
}

Note that:

• It is possible to set rowSelection.hideDisabledCheckboxes to True to hide disabled checkboxes.
• The column Year is editable, changing the value below or above 2007 will enable/disable the checkbox of the row.

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:

dashGridOptions = {
    'rowSelection': {
        'mode': 'singleRow',
        'isRowSelectable': {"function": "params.data.year < 2007"},
    },
    # other grid options...
}

Rows for which isRowSelectable returns False cannot be selected at all, whether using the UI or the API.
Note that:

• It is possible to set rowSelection.hideDisabledCheckboxes to True to hide disabled checkboxes.
• The column Year is editable, changing the value below or above 2007 will enable/disable the selection of the row.

Customizing the Checkbox Column

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

• selectionColumnDef:”>https://www.ag-grid.com/archive/32.3.4/react-data-grid/row-selection-single-row/#reference-selection-selectionColumnDef):
  Configure the selection column, used for displaying checkboxes. Note that due to the nature of
  this column, this type is a subset of columnDefs, which does not support several normal column features such as
  editing, pivoting and grouping.

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

The checkbox column has a default maxWidth set. To make the column resizable (when setting resizable: True), or
to set a width/initialWidth, the max width must also be overridden.

<br>

dashGridOptions = {
    'selectionColumnDef': {
        'sortable': True,
        'width': 100,
        'maxWidth': 100,
        'resizable': True,
        'headerTooltip': 'Checkboxes indicate selection',
    },
    # other grid options...
}

API Reference

See AG Grid docs API Reference for the full
list of configuration options available in 'singleRow' mode.

<br>