How to get Grid API and Column API in AG Grid
In this article, we will show you how to get Grid API and Column API in AG Grid. If you wish to integrate the AG Grid, you might need to perform additional actions using the Grid API or Column API. So here, we'll walk you through the process of getting the Grid Options.
Checkout more articles on ReactJS
- editor-and-syntax-highlighter-using-prismjs" title="React code editor and syntax highlighter using PrismJS">React code editor and syntax highlighter using PrismJS
- pagination-to-the-left-side" title="Set AG Grid pagination to the left side">Set AG Grid pagination to the left side
- Load data from the API in React AG Grid
- datatable" title="Conditionally change the row style in React DataTable">Conditionally change the row style in React DataTable
- How to implement a circular progress bar in React
Package Version
ag-grid-react
^25.2.0
ag-grid-community
^25.2.1
Steps to get Grid API and Column API
1. Add AG Grid in React Component
Let’s create a react application using the `create-react-app` and implement AG Grid in React. Check the following article for more information.
How to implement AG Grid in React
2. Add an event callback
Now, in order to obtain the grid options, we must add the `onGridReady()` event callback. Look at the following code.
// access API from event object
const onGridReady = e => {
console.log(‘Event Object:’, e);
}
//…
//…
<aggridreact ongridready={onGridReady} register="" event="" listener="" ...="">
</aggridreact>
3. Output
In the console window, you will find the grid API and the column API event object that help you to perform grid operations.
Output - How to get Grid API and Column API in AG Grid - Clue Mediator
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
