AG Grid (A powerful react grid library)

In the world of frontend development, displaying large amounts of data in a tabular format is quite challenging. Whether you are building the dashboard, admin panel, finance report, or any report. Displaying data in a more effective and interactive way is crucial for attracting user attention. AG Grid plays a major role in making data more attractive and provides many features similar to Excel.

What is AG Grid

AG Grid is a fully-featured and highly customizable data grid component for the web. It supports React, Angular, Vue, and plain JavaScript. It can handle everything from basic table layouts to advanced enterprise-level features like:

• Sorting and Filtering

• Pagination and Infinite Scrolling

• Row Grouping and Aggregation

• Master/Detail Views

• Custom Cell Renderers

• Excel Export

• Server-side Data Operations

In this blog i’m going to share the code and how to use in react with javascript

AG Grid comes in two versions

Community (free and open source)
Enterprise (paid, with additional advanced features)

Installation of AG Grid

installation of package with NPM.

npm install ag-grid-react

library need to be imported before using it.

import { AgGridReact } from 'ag-grid-react';
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 
ModuleRegistry.registerModules([ AllCommunityModule ]);

🔥 After installation of packages and importing the library we are ready to use the powerful Grid technique.

Below is the code how row and column should be there

const columns = [
    { field: 'id' , headerName:'ID' , width: 140},
    { field: 'fullName', width: 140},
    { field: 'email', width: 170},
    { field: 'phone', width: 130},
    { field: 'gender',  width: 140},
    { field: 'dob', headerName: 'DOB', width: 130},
    { field: 'qualification', width: 180 },
    { field: 'createdAt', headerName: 'Member Since', width: 170},
  ];

const rows= [
  {
    id: 1,
    fullName: "Ankit Kumar",
    email: "ankit@example.com",
    phone: "9876543210",
    gender: "Male",
    dob: "1998-07-15",
    qualification: "B.Tech CSE",
    createdAt: "2023-04-01",
  }];

Now we can use the above data on the webpage and make it into the excel like table.

< AgGridReact 
    rowData = {rows}   // the row which we have taken above 
    columnDefs = {columns}   // the column which we have made above
    pagination = true   //It will show the number of pages below the table
    paginationPageSize = 10   // it is for how many details in one page
    paginationPageSizeSelector = [10,20,50]  // This is for selecting the how many details you want to use in one page
 />

These are the basic yet powerful and useful tools. There are many more advanced options, but in this blog, I’m just showing how it looks and how it works.

There are many feature like CellRendrer Filter Sorting Theme Virtualization Enterprises Feature to be explored soon in next blog

For more information you can go to the documentation of the AG-Grid attached below

AG Grid Documentation

and if you want to learn more with real time project then head hover to my github profile attached below

Project link

Conclusion

AG Grid is a developer's dream when working with complex tabular data. It’s fast, scalable, and provides an unmatched level of flexibility. Whether you're building a simple table or a complex enterprise data dashboard, AG Grid has your back.

console.log("Happy Coading");

Connect with me at

Linkedin

Github