Select a row by clicking on it. Selecting a row will remove any previous selection unless you
Ctrl while clicking. Selecting a row and holding down
while clicking a second row will select the range.
Configure row selection with the following properties:
rowSelection: Type of row selection, set to either
'multiple'to enable selection.
'single'will use single row selection, such that when you select a row, any previously selected row gets unselected.
'multiple'allows multiple rows to be selected.
rowMultiSelectWithClick: Set to
trueto allow multiple rows to be selected with clicks. 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
Shiftclicking is not an option.
rowDeselection: Set to
trueto allow rows to be deselected if you hold down
Ctrland click the row. By default the grid disallows deselection of rows (i.e. once a row is selected, it remains selected until another row is selected in its place).
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.
When you pass data to the grid, it wraps each data item in an node. This is explained in the section Client-side Row Model. When you query for the selected rows, there are two method types: ones that return nodes, and ones that return data items. To get the selected nodes / rows from the grid, use the following API methods:
api.getSelectedNodes(): Returns an array of the selected nodes.
api.getSelectedRows(): Returns an array of data from the selected rows.
Working with ag-Grid nodes is preferred over the row data as it provides you with more information and maps better to the internal representation of ag-Grid.
Example: Single Row Selection
The example below shows single row selection.
rowSelection='single'is set to enable single row selection. It is not possible to select multiple rows.
Example: Multiple Row Selection
The example below shows multi-row selection.
rowSelection='multiple'is set to enable multiple row selection. Selecting multiple rows can be achieved by holding down
Ctrland mouse clicking the rows. A range of rows can be selected by using
Example: Multi Select With Click
The example below shows multi select with click. Clicking multiple rows will
select a range of rows without the need for
keys. Clicking a selected row will deselect it. This is useful for touch devices where
Shift clicks are not available.
rowMultiSelectWithClick=trueis set to enable multiple row selection with clicks.
Checkbox selection can be used in two places: row selection and group selection.
To include checkbox selection for a column, set the attribute
on the column definition. You can set this attribute on as many columns as you like, however
it doesn't make sense to have it in more than one column in a table.
To enable checkbox selection for groups, set the attribute
true for the
group renderer. See the grouping section for details on the group renderer.
colDef.checkboxSelection can also be a function that returns
false - use this if
you want checkboxes on some rows but not others.
also be specified as a function - use this if you want, for example, the first column
to have checkbox selection regardless of which column it is (you would do this by looping the columns using the
column API, and check if the first column is the current one).
When doing grouping, you control what selecting a group means. This is controlled with
the two properties
true, selecting a group will have the impact of selecting all its children. The group will then display
'selected'when all children are selected,
'unselected'when none are selected and
'intermediate'when children have a mix of selected and unselected. When the node is selecting children, it will never appear in the selected set when calling
false, the group is selectable independently of the child nodes. When selecting the group node independently of the children, it will appear in the set when calling
groupSelectsFiltered: Used when
trueonly filtered children of the group will be selected / unselected. This means you can apply a filter, then try to select a group, and the group will end up in the intermediate state as only as subset of the children will be selected.
Example: Groups & Checkbox Selection
The example below shows checkbox selection with groups. Selecting the group has the
effect of selecting the children. Likewise selecting all the children automatically
selects the group. In this scenario the group itself will never appear in the
The example also shows a checkbox for selection on the age column. In practice, it is not normal to have more than one column for selection, the below is just for demonstration. Having a checkbox within a non-group row is best for grids that are not using grouping.
Example: Groups & Checkbox Selection With Unselectable Leaf Nodes
The example below is similar to the previous example except it does not put checkboxes
on the leaf level nodes, allowing only entire groups to be selected. This is achieved
by providing functions for
Example: Groups & Checkbox Selection With Only Filtered Children
Lastly we show an example using
groupSelectsFiltered=true. Here, when you filter
the grid and select a group, only the filtered children get selected.
To demonstrate, try this in the example:
- Filter on swimming
- Select a country
- Notice that all filtered rows get selected. If you remove the filter, the non-filtered rows are not selected.
- Notice that the group becomes intermediate while all its filtered children get selected. This is because the selected state of the group node is independent to the filter, so it becomes intermediate as not all of its children are selected.
Header Checkbox Selection
It is possible to have a checkbox in the header for selection. To configure the
column to have a checkbox, set
headerCheckboxSelection can also be a function, if you want the checkbox
to appear sometimes (e.g. if the column is ordered first in the grid).
headerCheckboxSelection is a function, the function will be called every
time there is a change to the displayed columns, to check for changes.
Select Everything or Just Filtered
The header checkbox has two modes of operation,
- colDef.headerCheckboxSelectionFilteredOnly=false: The checkbox will select all rows when checked, and un-select all rows when unchecked. The checkbox will update its state based on all rows.
- colDef.headerCheckboxSelectionFilteredOnly=true: The checkbox will select only filtered rows when checked and un-select only filtered rows when unchecked. The checkbox will update its state based only on filtered rows.
The examples below demonstrate both of these options.
Example: Just Filtered
This example has the following characteristics:
- The checkbox works on filtered rows only. That means if you filter first, then hit the checkbox to select or un-select, then only the filtered rows are affected.
- The checkbox is always on the athlete column, even if the athlete column is moved.
Example: Select Everything
The next example is similar to the one above with the following changes:
- The checkbox selects everything, not just filtered.
- The column that the selection checkbox appears in is always the first column. This can be observed by dragging the columns to reorder them.
Specify Selectable Rows
It is possible to specify which rows can be selected via the
For instance if we only wanted to allow rows where the 'year' property is less than 2007, we could implement the following:
Example: Selectable Rows with Header Checkbox
This example demonstrates the following:
isRowSelectable()callback only allows selections on rows where the year < 2007.
- The country column has
checkboxSelection: true, but only rows which are selectable will obtain a selectable checkbox. Similarly, the header checkbox will only select selectable rows.
Example: Specifying Selectable Rows with Groups
This example demonstrates the following:
isRowSelectable()callback allows rows with a year of 2004 or 2008 to be selectable.
gridOptions.groupSelectsChildren = trueselecting groups will also select 'selectable' children.
gridOptions.groupSelectsFiltered = trueselecting groups will only select 'selectable' children that pass the filter.
- To demonstrate, follow these steps:
- Click 'Filter by Year 2008 & 2012'.
- Select checkbox beside 'United States'.
- Click 'Clear Filter'.
- Notice that only 'United States' for 2008 is selected.
There are two events with regards to selection:
- rowSelected: Called when a row is selected or deselected.
The event contains the node in question, so call the node's
isSelected()method to see if it was just selected or deselected.
- selectionChanged: Called when one or more rows are selected or deselected. Use the grid API to get a list of selected nodes if you want them.
Node Selection API
To select rows programmatically, use the
node.setSelected() method. This method takes two
- selected: set to
- clearSelection (optional): for selection only. If
true, any other selected nodes will be deselected. Use this if you do not want multi-selection and want this node to be exclusively selected.
trueif the node is selected, or
falseif it is not selected. If the node is a group node and the group selection is set to
'children', this will return
trueif all child (and grandchild) nodes are selected,
falseif all unselected, or
undefinedif a mixture.
Grid Selection API
The grid API has the following methods for selection:
api.selectAll(): Select all rows in the grid, regardless of filtering.
api.deselectAll(): Un-select all rows, regardless of filtering.
api.selectAllFiltered(): Select all filtered rows in the grid.
api.deselectAllFiltered(): Un-select all filtered rows.
api.getSelectedNodes(): Returns a list of all the selected row nodes, regardless of filtering.
If you want to select only filtered-out row nodes, you could do this using the following:
There is an API function
forEachNode. This is useful for doing group selections
on a business key. The example below shows selecting all rows with country = 'United States'.
This method is also useful when you load data and need to know the node equivalent of the
data for selection purposes.
Example: Selection with Keyboard Arrow Keys
By default, you can select a row on mouse click, and navigate up and down the rows using your keyboard keys. However, the selection state does not correlate with the navigation keys, but we can add this behaviour using our own Custom Navigation.
First we need to provide a callback to the
navigateToNextCell property in
override the default arrow key navigation:
From the code below you can see that we iterate over each node and call the
method if it matches the current