Tuesday, November 29, 2022

Reactjs ag-Grid Add New Row

Reactjs aggrid add new row

Hello to all, welcome to In this post, I will tell you, Reactjs ag-Grid Add New Row.

Reactjs ag-Grid

Post Working:

Friends in this post, I am implementing ag-Grid into my reactjs application and also I am also doing add new row functionality in it. For check the working, I am attaching video above.

Here you can check more posts related to reactjs:


Here is the working code snippet and please use carefully:

1. Firstly, we have to run below commands into our terminal to get fresh reactjs setup on our system also we should have latest nodejs version installed on our system:

npx create-react-app therichpost

cd therichpost

npm start

2. Now we need to run below commands into our terminal to get ag-Grid and bootstrap modules into our reactjs application. I use bootstrap because of website good looks:

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

npm install bootstrap --save

3. Now we need to add below code into src/App.js file or we can relplace scr/App.js code with below code. This code will do all the functionality:

import React from 'react';
import './App.css';
import { 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 'bootstrap/dist/css/bootstrap.min.css';

class App extends React.Component {
  //initialize array variable
  constructor(props) {

    //super is used to access the variables to parent classes

    //ag-Grid columns and rows defining
    this.state = {
      columnDefs: [{
        headerName: "Make", field: "make", sortable: true, filter: true
      }, {
        headerName: "Model", field: "model"
      }, {
        headerName: "Price", field: "price"
      rowData: [{
        make: "Toyota", model: "Celica", price: 35000
      }, {
        make: "Ford", model: "Mondeo", price: 32000
      }, {
        make: "Porsche", model: "Boxter", price: 72000

  //ag-Grid hook ready
  onGridReady = params => {
    this.gridApi = params.api;

  //ag-Grid add new row functions
  onAddRow = () => {
      add: [{ make: 'BMW', model: 'S2', price: '63000' }]
render() {

  //output for browser
  return (
    <div className="container">
      <h1 className="text-center mt-5 mb-5">Reactjs ag-Grid Add New Row</h1>
      <button className="btn btn-primary mb-3" onClick={this.onAddRow}>Add Row</button>
        height: '350px',
        width: '603px' }}

export default App;

This is friends and don’t forget to run npm start command again. If you have any kind of query then please do comment below.

In this post, I have done with many topics related to Reactjs and here are they:

  1. How to add bootstrap in Reactjs?
  2. Reactjs button click event working
  3. ag-Grid implementation in Reactjs application



the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 8, Angular 9, Angular 10, Angular 11, Angular12, Angular 13, Angular 14, Angular 15, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.