Row Selection and Callbacks

Select/deselect rows and remove selected rows using Callbacks.

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.