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 }
  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",
  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. }
  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. </>
  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. }
  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 }
  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",
  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. }
  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. </>
  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.