How to get the data of selected rows in AG Grid

There are many AG Grid methods to extract and manipulate your data, which are covered in our documentation under Grid API. In this post, we'll show you how to retrieve data from all the currently selected rows.

Enabling Selection

Firstly, row selection must be enabled by setting gridOptions.rowSelection to either "single" or "mulitple", depending on the selection behavior you'd like to implement.

Get Selected Rows

To get the currently selected rows you can then use the grid API method getSelectedRows() to return a list of all the currently selected row data.

getSelectedRowData() {
  const selectedData = this.gridApi.getSelectedRows();
  return selectedData;
}

Selection Changed Event

If you want to respond to changes in selection then listen to the onSelectionChanged event. The event itself does not contain the selected rows but that information can be obtained from the grid API.

onSelectionChanged(event: SelectionChangedEvent) {
  const selectedData = this.gridApi.getSelectedRows();
  console.log('Selection updated');
}

You can also see this illustrated in the Angular/React/Vue.js examples below:

Angular

React

Vue.js

Vanilla JavaScript

If you would like to learn more about how to handle selection when using row grouping, pivoting, master/detail please take a look at our documentation on Row Selection.

What's next?

I hope you find this article useful when getting selected data in AG Grid. Please check out our other blog posts and documentation for a great variety of scenarios you can implement with AG Grid.

If you would like to try out AG Grid check out our getting started guides (JS / React / Angular / Vue)

Happy coding!