Post
Ask Question

How To Use Ag-Grid In ReactJS

Introduction

 
In this article, we will learn how to use ag-grid in a React.js application. ag-Grid  is a component used for showing data in tabular format. By using ag-Grid, developers can easily extend functionality according to their requirements.
 
Prerequisites
  • Basic knowledge of React.js 
  • Visual Studio Code IDE should be installed on your system.
  • Basic knowledge of Bootstrap and HTML.

Create ReactJS project

 
First, let's create a React application with the following command.
  1. npx create-react-app reduxparttwo  
Open the newly created project in Visual Studio Code and install ag-Grid using the  following command.
  1. npm install --save ag-grid-community ag-grid-react  
Now install bootstrap in this project by using the following command.
  1. npm install --save bootstrap   
Now, open the index.js file and add import Bootstrap.
  1. import 'bootstrap/dist/css/bootstrap.min.css';    
Now go to the src folder and add a new component, named 'Aggriddemo.js'.  
 
Add ag grid and style reference in this component, add the following lines in this component.
  1. import { AgGridReact } from 'ag-grid-react';  
  2. import 'ag-grid-community/dist/styles/ag-grid.css';  
  3. import 'ag-grid-community/dist/styles/ag-theme-alpine.css';  
ag-Grid has differenct themes. We can customize these themes. Add the following code in this component:
  1. import React, { Component } from 'react'  
  2. import { AgGridReact } from 'ag-grid-react';  
  3. import 'ag-grid-community/dist/styles/ag-grid.css';  
  4. import 'ag-grid-community/dist/styles/ag-theme-alpine.css';  
  5. export class Aggriddemo extends Component {  
  6.     constructor(props) {  
  7.         super(props);  
  8.         this.state = {  
  9.             columnDefs: [  
  10.                 { headerName: "Id", field: "Id", sortable: true, filter: true },  
  11.                 { headerName: "Name", field: "Name", sortable: true, filter: true },  
  12.                 { headerName: "Age", field: "Age", sortable: true, filter: true },  
  13.                 { headerName: "Address", field: "Address", sortable: true, filter: true },  
  14.                 { headerName: "City", field: "City", sortable: true, filter: true },  
  15.                 { headerName: "Salary", field: "Salary", sortable: true, filter: true },  
  16.                 { headerName: "Department", field: "Department", sortable: true, filter: true }  
  17.                   
  18.   
  19.   
  20.             ],  
  21.             rowData: [  
  22.                 {  
  23.                     Id: "100",  
  24.                     Name: "Sanwar",  
  25.                     Age: "25",  
  26.                     Address: "Jaipur",  
  27.                     City: "Jaipur",  
  28.                     Salary: "500000",  
  29.                     Department: "IT",  
  30.                      
  31.                 },  
  32.                 {  
  33.                     Id: "2",  
  34.                     Name: "Nisha",  
  35.                     Age: "25",  
  36.                     Address: "C-Scheme",  
  37.                     City: "Jaipur",  
  38.                     Salary: "500000",  
  39.                     Department: "IT",  
  40.                 },  
  41.                 {  
  42.                     Id: "3",  
  43.                     Name: "David",  
  44.                     Age: "25",  
  45.                     Address: "C-Scheme",  
  46.                     City: "Jaipur",  
  47.                     Salary: "500000",  
  48.                     Department: "IT",  
  49.                 },  
  50.                 {  
  51.                     Id: "4",  
  52.                     Name: "Sam",  
  53.                     Age: "25",  
  54.                     Address: "C-Scheme",  
  55.                     City: "Jaipur",  
  56.                     Salary: "500000",  
  57.                     Department: "IT",  
  58.                 },  
  59.                 {  
  60.                     Id: "5",  
  61.                     Name: "Jyotsna",  
  62.                     Age: "25",  
  63.                     Address: "C-Scheme",  
  64.                     City: "Mumbai",  
  65.                     Salary: "500000",  
  66.                     Department: "IT",  
  67.                 },  
  68.                 {  
  69.                     Id: "6",  
  70.                     Name: "Sid",  
  71.                     Age: "25",  
  72.                     Address: "C-Scheme",  
  73.                     City: "Bangalore",  
  74.                     Salary: "500000",  
  75.                     Department: "IT",  
  76.                 },  
  77.                 {  
  78.                     Id: "7",  
  79.                     Name: "Chavi",  
  80.                     Age: "25",  
  81.                     Address: "C-Scheme",  
  82.                     City: "Noida",  
  83.                     Salary: "500000",  
  84.                     Department: "IT",  
  85.                 },  
  86.                 {  
  87.                     Id: "8",  
  88.                     Name: "Nisha",  
  89.                     Age: "25",  
  90.                     Address: "C-Scheme",  
  91.                     City: "Delhi",  
  92.                     Salary: "500000",  
  93.                     Department: "IT",  
  94.                 }  
  95.             ]  
  96.         }  
  97.     }  
  98.   
  99.     render() {  
  100.         return (  
  101.             <>  
  102.             <div class="row" style={{marginTop:"10px"}}>    
  103.     <div class="col-sm-12 btn btn-info">    
  104.     Add ag-Grid to ReactJS App  
  105.     </div>    
  106.   </div>   
  107.             <div class="row">  
  108.                 <div class="col-md-12">  
  109.                     <div class="card">  
  110.                         <div class="card-body position-relative">  
  111.                             <div className="ag-theme-alpine" style={{ height: "550px" }}>  
  112.                                 <AgGridReact  
  113.                                     columnDefs={this.state.columnDefs}  
  114.                                     rowData={this.state.rowData}     
  115.                                     >  
  116.                                 </AgGridReact>  
  117.                             </div>  
  118.                         </div>  
  119.                     </div>  
  120.                 </div>  
  121.             </div>  
  122.             </>  
  123.   
  124.         );  
  125.     }  
  126. }  
  127. export default Aggriddemo  
Add  reference of this component in the app.js file, and add the following code in the app.js file.  
  1. import React from 'react';  
  2. import logo from './logo.svg';  
  3. import './App.css';  
  4. import Aggriddemo from './Aggriddemo'  
  5. function App() {  
  6.   return (  
  7.     <div className="App">  
  8.    <Aggriddemo/>  
  9.     </div>  
  10.   );  
  11. }  
  12.   
  13. export default App;  
Now, run the project by using 'npm start' command and check the result.
 
How To Use Ag-Grid In ReactJS
 
We can also add pagination, sorting and filtering  in ag-grid. To add filtering shorting and pagination add the following property in ag grid.
  1. pagination="true"  paginationPageSize="5" floatingFilter="true"  
 Add the following code in the component and check the result:
  1. import React, { Component } from 'react'  
  2. import { AgGridReact } from 'ag-grid-react';  
  3. import 'ag-grid-community/dist/styles/ag-grid.css';  
  4. import 'ag-grid-community/dist/styles/ag-theme-alpine.css';  
  5. export class Aggriddemo extends Component {  
  6.     constructor(props) {  
  7.         super(props);  
  8.         this.state = {  
  9.             columnDefs: [  
  10.                 { headerName: "Id", field: "Id", sortable: true, filter: true },  
  11.                 { headerName: "Name", field: "Name", sortable: true, filter: true },  
  12.                 { headerName: "Age", field: "Age", sortable: true, filter: true },  
  13.                 { headerName: "Address", field: "Address", sortable: true, filter: true },  
  14.                 { headerName: "City", field: "City", sortable: true, filter: true },  
  15.                 { headerName: "Salary", field: "Salary", sortable: true, filter: true },  
  16.                 { headerName: "Department", field: "Department", sortable: true, filter: true }  
  17.                   
  18.   
  19.   
  20.             ],  
  21.             rowData: [  
  22.                 {  
  23.                     Id: "100",  
  24.                     Name: "Sanwar",  
  25.                     Age: "25",  
  26.                     Address: "Jaipur",  
  27.                     City: "Jaipur",  
  28.                     Salary: "500000",  
  29.                     Department: "IT",  
  30.                      
  31.                 },  
  32.                 {  
  33.                     Id: "2",  
  34.                     Name: "Nisha",  
  35.                     Age: "25",  
  36.                     Address: "C-Scheme",  
  37.                     City: "Jaipur",  
  38.                     Salary: "500000",  
  39.                     Department: "IT",  
  40.                 },  
  41.                 {  
  42.                     Id: "3",  
  43.                     Name: "David",  
  44.                     Age: "25",  
  45.                     Address: "C-Scheme",  
  46.                     City: "Jaipur",  
  47.                     Salary: "500000",  
  48.                     Department: "IT",  
  49.                 },  
  50.                 {  
  51.                     Id: "4",  
  52.                     Name: "Sam",  
  53.                     Age: "25",  
  54.                     Address: "C-Scheme",  
  55.                     City: "Jaipur",  
  56.                     Salary: "500000",  
  57.                     Department: "IT",  
  58.                 },  
  59.                 {  
  60.                     Id: "5",  
  61.                     Name: "Jyotsna",  
  62.                     Age: "25",  
  63.                     Address: "C-Scheme",  
  64.                     City: "Mumbai",  
  65.                     Salary: "500000",  
  66.                     Department: "IT",  
  67.                 },  
  68.                 {  
  69.                     Id: "6",  
  70.                     Name: "Sid",  
  71.                     Age: "25",  
  72.                     Address: "C-Scheme",  
  73.                     City: "Bangalore",  
  74.                     Salary: "500000",  
  75.                     Department: "IT",  
  76.                 },  
  77.                 {  
  78.                     Id: "7",  
  79.                     Name: "Chavi",  
  80.                     Age: "25",  
  81.                     Address: "C-Scheme",  
  82.                     City: "Noida",  
  83.                     Salary: "500000",  
  84.                     Department: "IT",  
  85.                 },  
  86.                 {  
  87.                     Id: "8",  
  88.                     Name: "Nisha",  
  89.                     Age: "25",  
  90.                     Address: "C-Scheme",  
  91.                     City: "Delhi",  
  92.                     Salary: "500000",  
  93.                     Department: "IT",  
  94.                 }  
  95.             ]  
  96.         }  
  97.     }  
  98.   
  99.     render() {  
  100.         return (  
  101.             <>  
  102.             <div class="row" style={{marginTop:"10px"}}>    
  103.     <div class="col-sm-12 btn btn-info">    
  104.     Add ag-Grid to ReactJS App  
  105.     </div>    
  106.   </div>   
  107.             <div class="row">  
  108.                 <div class="col-md-12">  
  109.                     <div class="card">  
  110.                         <div class="card-body position-relative">  
  111.                             <div className="ag-theme-alpine" style={{ height: "550px" }}>  
  112.                                 <AgGridReact  
  113.                                     columnDefs={this.state.columnDefs}  
  114.                                     rowData={this.state.rowData}     
  115.                                     pagination="true"  paginationPageSize="5" floatingFilter="true" >  
  116.                                 </AgGridReact>  
  117.                             </div>  
  118.                         </div>  
  119.                     </div>  
  120.                 </div>  
  121.             </div>  
  122.             </>  
  123.   
  124.         );  
  125.     }  
  126. }  
  127. export default Aggriddemo  
How To Use Ag-Grid In ReactJS
 

Summary

 
In this article, we learned  how to use ag-grid in a React.js application. 


Similar Articles