Categories

Monday, November 28, 2022
+919814419350 therichposts@gmail.com
ag-gridReactjs

How to add new row at the top of ag-grid in reactjs?

How to add new row at the top of ag-grid in reactjs?
6.12K

Hello friends, welcome again on my blog. Today in this blog post, I will tell you, How to add new row at the top of ag-grid in reactjs?

Ag-grid add new row

For new comers, here you can check more posts related to reactjs:

Reactjs


Friends here is the working code snippet for “How to add new row at the top of ag-grid in reactjs?” and please use this code snippet carefully to avoid mistables:

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(optional) 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 //optional

 

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:

I just added “addIndex:0” onAddRow function:

import React from 'react';
import './App.css';
//ag-Grid
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';

//bootstrap
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
    super(props);

    //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 = () => {
    
    this.gridApi.updateRowData({
      add: [{ make: 'BMW', model: 'S2', price: '63000' }]
        , addIndex:0 });
}
 
  
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>
      <div
        className="ag-theme-alpine"
        style={{
        height: '350px',
        width: '603px' }}
      >
        <AgGridReact
          onGridReady={this.onGridReady}
          columnDefs={this.state.columnDefs}
          rowData={this.state.rowData}>
        </AgGridReact>
    </div>
  </div>
  );
  
}

}
export default App;

 

Now we are done friends. Don’t forget to run npm start command. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.
I will appreciate that if you will tell your views for this post.Nothing matters if your views will good or bad.

Jassa

Thanks

therichpost
the authortherichpost
Hello to all. Welcome to therichpost.com. 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.