AG-Grid for Beginners: A Complete Step-by-Step Guide

If you are a web developer and looking to start working with AG-Grid, then you have come to the right place. In this AG-Grid for Beginners: A Complete Step-by-Step Guide, we will be demystifying the art of AG-Grid, a powerful library that can transform your web application.

Why AG-Grid?

Now you may be having a question: Why AG-Grid? So, first let’s clear the doubt.

Imagine this: You have got lots of data to showcase on your web application, which you want it to look impressive as well as be functionally good. Making our own grid from scratch is very difficult and not feasible many times. Enters AG-Grid, your tool to craft the data grids, which are not only beautiful, but robust as well.

But why should you care about it?

Whether you’re a beginner who wants to learn AG-Grid or an experienced one trying to level up your development skills or may be someone who is required to use the AG-Grid in their project, AG-Grid offers seamless solutions for everyone. In this step-by-step AG-Grid guide for beginners, we will be learning the features offered by this powerful JavaScript based grid library.

AG-Grid Community vs Enterprise editions:

There are two versions of the grid: Community and Enterprise. Let’s see what they both offer.

Community	Enterprise
Free to use.	Requires license.
Many advanced features aren’t available.	Comes with more advanced features.
Can be used without the Enterprise version.	Community version is needed along with this, as many features are bundled with the community version.

The community version provides the basic grid features needed for someone who is starting out with AG Grid. So, in this tutorial we will be working with the AG-Grid’s free Community version.

But before we start, let’s see what the AG-Grid offers:

1. Easy Integration: AG-Grid allows us to integrate the grid with our Angular application easily
2. Working with Data: Filtering, Sorting, Grouping – all the complex tasks are like piece of cake.
3. Control: The grid offers lots of customization options so that the grid matches out application’s requirements.

Now that we know about AG-Grid, its features and what it does, so let’s start with the tutorial.

AG-Grid Step by Step Tutorial:

1. Creating Angular application

We will create an Angular application “AgGridTutorials” using the following command. In the latest versions of Angular, the angular application is created as standalone by default. If you don’t want to use the standalone, then you can use –no-standalone along with the below command to generate the angular application.

ng new AgGridTutorials

2. Installing Ag-Grid using npm

After the project has been created, we then install the Ag-Grid using the below npm command.

npm install ag-grid-angular -g

3. Setting up AG-Grid for our Angular application

Now that we have installed the Ag-Grid, let’s begin setting up the grid in our project.

First, we need to import AgGridAngular into our project’s app.module.ts file.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridAngular } from 'ag-grid-angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, AgGridAngular],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Add the below import statements in the styles.scss

@import 'ag-grid-community/styles/ag-grid.css';

@import 'ag-grid-community/styles/ag-theme-quartz.css';

Now clear the angular-cli generated code from the app.component.html, so we can write our own html code. We are going to use the <ag-grid-angular></ag-grid-angular> for creating our grid.

Copy and paste the below code into your app.component.html

<h1>AG-Grid Table</h1>
<ag-grid-angular [rowData]="rowData" [columnDefs]="colDefs" class="ag-theme-quartz" style="height: 300px; width:800px">
</ag-grid-angular>

Ag Grid expects rowData and columnDefs, so that it can prepare the grid for us. The rowData are the data which we want to display in the table and the columnDefs are the column definitions, which will create the columns and arrange the data into their respective columns along with other features.

Inside app.component.ts file, add the following lines of code.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  title = 'AgGridTutorials';

  rowData = [
    { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
    { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
    { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
  ];

  colDefs: any = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' },
    { field: 'electric' },
  ];
}

In the above code, we have a rowData which needs to be mapped to the column definition fields. This is done so that the Ag-Grid picks up the correct value for the column from the rowData and displays them.

Now save the files and start the localhost server using the command.

ng serve

Our grid setup is done, and our Ag-Grid is ready to be used.

Conclusion:

AG-Grid is a very famous and powerful JavaScript based library and gives us lot many features to use. In this tutorial we have explained the what, why and how of Ag grid, also we have installed and implemented the basic Ag-Grid table which will help the beginners to understand the concepts. The advanced features will be explained in further tutorials.

If you liked this tutorial, then do subscribe to the newsletter and also please do share it with your friends. Any doubts or suggestions? Feel free to write it in the comments.