Row Selection

To enable rows selection, set the Grid Option rowSelection to either 'single' or 'multiple':

• 'single' will use single row selection, when you select a row, any previously selected row gets unselected.
• 'multiple' allows multiple rows to be selected. To select multiple rows, it is possible to:
  • Hold down <kbd>Ctrl<kbd> while clicking on the rows to select.
  • Hold down <kbd>Shift<kbd> while clicking a second row will select the range between the first and second row.

Moreover, it is also possible to use the following Grid Options to fine-tune the row selection behavior:

• rowMultiSelectWithClick: Set to True to allow multiple rows to be selected with clicks only. For example, if you
  click to select one row and then click to select another row, the first row will stay selected as well. Clicking a
  selected row in this mode will deselect the row. This is useful for touch devices where <kbd>Ctrl<kbd> and <kbd>
  Shift<kbd> clicking is not an option.
• suppressRowDeselection: By default, the grid allows deselection of rows holding <kbd>Ctrl<kbd> while clicking on
  the row. Set to True to prevent rows from being deselected if you hold down <kbd>Ctrl<kbd> and click the row. Once
  a row is selected, it remains selected until another row is selected in its place.
• suppressRowClickSelection: If True, rows won’t be selected when clicked. Use, for example, when you want checkbox
  selection, and don’t want to also select the row when the row is clicked.
  See Checkbox Selection Simple Example.

Row Selection Options Example

The following example shows the Grid behavior using the different Grid Options to select the rows.

Using rowSelection='single':

• Only a single row will be selected at a time.
• <kbd>Ctrl<kbd> can be used to deselect the selected row unless suppressRowDeselection is enabled.

Using rowSelection='multiple':

• Multiple rows can be selected holding <kbd>Ctrl<kbd> or <kbd>Shift<kbd>.
• Setting rowMultiSelectWithClick: True enables multiple row selection with clicks without needing to press <kbd>
  Ctrl<kbd> or <kbd>Shift<kbd>. Clicking a selected row will deselect that row.
• <kbd>Ctrl<kbd> can be used to deselect the selected row unless suppressRowDeselection is enabled.

Specify Selectable Rows

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

• isRowSelectable - Function to be used to determine which rows are selectable. By default, rows are selectable, so
  return false to make a row un-selectable.

For instance if we only wanted to allow rows where the ‘year’ field is more than 2007, we could implement the
following:

dashGridOptions = {
    'rowSelection': "multiple",
    'isRowSelectable': {"function": "params.data.year > 2007"}
}

Note that it can be a good idea to use checkbox selection to help to identify the selectable rows as the checkbox of the
non-selectable rows will be hidden, see
example Selectable Rows with Checkboxes.

The following example shows the result setting the above parameters, only rows having year > 2007 are selectable. The
multi-rows selection is enabled, try to select a range of rows using <kbd>Shift<kbd>, only the selectable rows will be
selected.

selectedRows Parameter

The Grid parameter selectedRows can be used to:

• Preselect rows when the Grid is initialized.
• As Input to trigger a Dash callback when a row is selected/deselected.
• As Output of a Dash callback to update the selected rows list.

The selectedRows parameter can be set 3 ways:

• Sending the rowData of the rows you want selected, for example: df.head(5).to_dict("records")
• Using row ids, for example: {"ids": ["1", "3", "5"]}
• Using a function, for example {"function": "params.data.total > 5"}

Note that selecting hundreds of rows using rowData of the rows to select can show lags, setting getRowId can improve
the performance. Using row ids or a function to select hundreds of rows generally provides even better performance.
See Improve Selection Performance.

Simple Example

In the following example selectedRows is used:

• At initialization: the 5 first rows are selected when the Grid is created.
• As callback Input: the text below the Grid is updated when a row is selected/deselected.
• As callback Output: when the button is clicked, only the rows with ‘Natalie Coughlin’ in the Athlete column are
  selected.

Popup On Row Selection Example

This second example shows how to generate a popup using Dash Bootstrap Components when a user selects a row in the
grid.

Improve Selection Performance

This example shows the selection performance selecting hundreds of rows when setting selectedRows with the following
options:

• Use rowData of the rows to select
• Use rowData of the rows to select and setting getRowId
• Use row ids
• Use a function

The button can be used to select/unselect the rows, and we can see the time to perform the selection.

Note that the function used in this example {'function': 'params.data.age == 23'} selects 691 rows. To compare the
results, the other options are also set to select 691 rows.

The first option can take a few seconds to perform the selection. The second greatly improves the performance.
The third and the final options provide even better performance.

Remove Selected Rows

Dash AG Grid provides the deleteSelectedRows parameter that can be used to easily remove the selected rows. When set to
True under the hood it will trigger
a transaction gridApi.applyTransaction({remove: selection})

In the following example, try to select a few rows and then click on the button to remove them.