📝This blog post was inspired by a popular Stack Overflow question.

ag-Grid offers a multitude of methods that can use 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 all currently selected data in ag-Grid.

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.

You can then use the grid API method getSelectedNodes() to return a list of all currently selected rows in ag-Grid. Extracting the data from each node is as simple as mapping over each node and returning its data property.

Here is the code when using a JavaScript framework:

getSelectedRowData() {
	let selectedNodes = this.gridApi.getSelectedNodes();
	let selectedData = selectedNodes.map(node => node.data);
	alert(`Selected Nodes:\n${JSON.stringify(selectedData)}`);
    return selectedData;
}

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

Angular

React

Vue.js

Vanilla JavaScript

Note: When using Vanilla JS, the gridApi and columnApi can be reached from thegridOptions Object.

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!