How to get the data of selected rows in AG Grid

Getting the data from the selected rows in your AG Grid React Data Table is quick and easy. This post will show you how to retrieve the data using Grid API methods in React, with full downloadable code examples also in Angular, Vue, and JavaScript.

To skip straight to the AG Grid documentation on Row Selection, select your framework:

How to get the data from selected rows in your React Data Table

This guide assumes you're getting data from selected rows in an existing React data table. To set up a new grid, follow our Getting Started documentation.

Enable Row Selection

Enable row selection in AG Grid using the grid options. Add rowSelection='single' or rowSelection='multiple' to your grid options as below, depending on the selection behaviour you'd like to implement:

<AgGridReact
  // ... other grid options
  rowSelection="multiple"
/>

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.

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

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

You can see this illustrated in the React example below:

If you're using a different framework, you can view or download the code examples for React, Angular, Vue, or JavaScript Data Tables here:

If you would like to learn more about how to handle selection when using row grouping, pivoting, 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!