How to implement AG Grid in React

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

Output - How to implement AG Grid in React - Clue Mediator

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.

npx create-react-app react-ag-grid-example

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.

npm install --save ag-grid-community ag-grid-react

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.

App.js

import { AgGridColumn, AgGridReact } from 'ag-grid-react';

import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';

import './App.css';

const rowData = [
  {
    id: 1,
    email: "[email protected]",
    first_name: "George",
    last_name: "Bluth",
    avatar: "https://reqres.in/img/faces/1-image.jpg"
  },
  {
    id: 2,
    email: "[email protected]",
    first_name: "Janet",
    last_name: "Weaver",
    avatar: "https://reqres.in/img/faces/2-image.jpg"
  },
  {
    id: 3,
    email: "[email protected]",
    first_name: "Emma",
    last_name: "Wong",
    avatar: "https://reqres.in/img/faces/3-image.jpg"
  },
  {
    id: 4,
    email: "[email protected]",
    first_name: "Eve",
    last_name: "Holt",
    avatar: "https://reqres.in/img/faces/4-image.jpg"
  },
  {
    id: 5,
    email: "[email protected]",
    first_name: "Charles",
    last_name: "Morris",
    avatar: "https://reqres.in/img/faces/5-image.jpg"
  },
  {
    id: 6,
    email: "[email protected]",
    first_name: "Tracey",
    last_name: "Ramos",
    avatar: "https://reqres.in/img/faces/6-image.jpg"
  },
  {
    id: 7,
    email: "[email protected]",
    first_name: "Michael",
    last_name: "Lawson",
    avatar: "https://reqres.in/img/faces/7-image.jpg"
  },
  {
    id: 8,
    email: "[email protected]",
    first_name: "Lindsay",
    last_name: "Ferguson",
    avatar: "https://reqres.in/img/faces/8-image.jpg"
  },
  {
    id: 9,
    email: "[email protected]",
    first_name: "Tobias",
    last_name: "Funke",
    avatar: "https://reqres.in/img/faces/9-image.jpg"
  },
  {
    id: 10,
    email: "[email protected]",
    first_name: "Byron",
    last_name: "Fields",
    avatar: "https://reqres.in/img/faces/10-image.jpg"
  },
  {
    id: 11,
    email: "[email protected]",
    first_name: "George",
    last_name: "Edwards",
    avatar: "https://reqres.in/img/faces/11-image.jpg"
  },
  {
    id: 12,
    email: "[email protected]",
    first_name: "Rachel",
    last_name: "Howell",
    avatar: "https://reqres.in/img/faces/12-image.jpg"
  }
];

function App() {

  const avatarFormatter = ({ value }) => {
    return <img src={value} width="50px" height="50px">
  }

  return (
    <div class="App">
      <h2>Implement AG Grid in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h2>
      <div class="ag-theme-alpine ag-style">
        <aggridreact 1="" defaultcoldef={{ flex: }} rowheight={60} rowdata={rowData}>
          <aggridcolumn field="first_name" headername="First Name" sortable={true} filter={true} cellclass="vertical-middle">
          <aggridcolumn field="last_name" headername="Last Name" sortable={true} filter={true} cellclass="vertical-middle">
          <aggridcolumn field="email" headername="Email" sortable={true} filter={true} cellclass="vertical-middle">
          <aggridcolumn field="avatar" headername="Avatar" sortable={true} filter={true} cellrendererframework={avatarFormatter} cellclass="vertical-middle">
        </aggridcolumn></aggridcolumn></aggridcolumn></aggridcolumn></aggridreact>
      </div>
    </div>
  );
}

export default App;

Let’s apply the following CSS for the grid.

App.css

.ag-style {
  height: 500px;
  width: 100%;
}

.vertical-middle {
  display: flex;
  align-items: center;
}

.vertical-middle img {
  display: block;
  border: 1px solid #ddd;
  border-radius: 3px;
}

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

GitHub Repository StackBlitz Project