Today we’ll show you how to implement AG Grid in React. In this article, we will create a sample example to load static data in a grid.

In the previous articles, we had created several examples on DataTable in React.

• Implement DataTable in React
• Datatable with pagination in React
• Server side pagination with React DataTable

Demo Application

Steps to implement AG Grid in React

1. Create a react app and install npm dependencies
2. Create component to load data in grid
3. Output

1. Create a react app and install npm dependencies

Let’s create a react app using the create-react-app. Run the following command to create an application.

Here, we are loading the data in table using the React AG Grid npm package. Run the following command to install the react AG Grid.

2. Create component to load data in grid

Let’s import the AgGridColumn and AgGridReact from the ag-grid-react package. We have to import the ag-grid CSS along with the package.

Here, we have used static data to load into the grid and also used the cellClass & cellRendererFramework to render the image using avatar field.

Let’s apply the following CSS for the grid.

3. Output

Run the react application and check the output in the browser.

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code