What is a Grid and Why Ag-Grid?

A grid is one of the best methods to present data in a structured and understandable way. At a glance, grids help extract concise information efficiently. When working with complex data tables in Angular applications, AG Grid Angular is an excellent choice for developers.AG-Grid is a popular package that simplifies grid implementation while offering extended functionalities such as sorting, filtering, editing, pagination, custom themes, and much more. 

The enterprise version even includes advanced features like charts, Excel exporting, and row grouping, making it a robust solution for enterprise-grade applications. 

Community vs Enterprise 

Community is the free version of ag-grid which has ag-grid-community package.  

• Basic grid including sorting, filtering, and pagination 

• Inbuilt themes and custom styling 

• Custom cell rendering 

Enterprise consists of a paid version of ag-grid which has ag-grid-enterprise package. 

• Supports server-side rendering (SSR) 

• Advanced features such as Excel export, enhanced security, and more 

• Requires a valid license key 

Installation in ag grid angular 

1. Install the ag-grid-angular package from npm
   This installs the community version (free version)
   

   npm install ag-grid-angular

2. Install the ag-grid-enterprise package from npm
   This installs the enterprise version (paid version)
   

   npm install ag-grid-enterprise

    

Registering  Modules 

AG-Grid uses modular architecture. To use the community features, import and register the community modules like this: 

import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community'; 

// Register all community modules  
ModuleRegistry.registerModules([AllCommunityModule])

Build an AI-First Enterprise

From early pilots to enterprise-wide deployment, our award-winning AI consulting and technical services help you build the right foundation, scale responsibly, and deliver meaningful business outcomes.

Learn More

For enterprise features, you first need to register the enterprise modules.For enterprise features, you need to first register the enterprise modules. In addition, you must set your license key to activate these features properly. Moreover, it is essential to ensure both steps are completed to achieve full functionality. Therefore, following these steps carefully will help avoid any issues.

import { LicenseManager } from 'ag-grid-enterprise';  
import { AllEnterpriseModule } from 'ag-grid-enterprise';  

//add license key
LicenseManager.setLicenseKey('your-ag-grid-license-key');  

// Register all enterprise modules  
ModuleRegistry.registerModules([AllEnterpriseModule]);

Note: Register the modules in the main.ts  file (the file where bootstrap is defined). 

Creating Basic Grid 

In your app.module.ts file, import AgGridModule from the @ag-grid-community/angular package. This module enables the use of AG Grid components in your Angular application. Once imported, you can easily configure and use AG Grid features throughout your app module.

import { NgModule } from '@angular/core';  
import { BrowserModule } from '@angular/platform-browser';  
import { AppComponent } from './app.component';  
import { AgGridModule } from '@ag-grid-community/angular';  

@NgModule({  
  imports: [  
    BrowserModule,  
    AgGridModule,  
  ],  
  declarations: [AppComponent],  
  bootstrap: [AppComponent],  
})  

export class AppModule {}

In app.component.html, add ag-grid-angular tag with required parameters 

<ag-grid-angular 
  #agGrid 
  class="ag-theme-balham"
  style="width: 615px; height: 165px;" 
  [rowData]="rowData" 
  [columnDefs]="columnDefs"
></ag-grid-angular>

In app.component.ts file, define the parameters for ag grid 

import { Component } from '@angular/core'; 
import { AgGridAngular } from '@ag-grid-community/angular'; 

@Component({ 
  selector: 'my-app', 
  templateUrl: './app.component.html', 
  styleUrls: ['./app.component.css'], 
}) 

export class AppComponent { 
  columnDefs = [ 
    { 
      headerName: 'Employee ID', 
      field: 'emp_id', 
      sortable: true, 
      filter: true, 
    }, 
    { 
      headerName: 'Designation', 
      field: 'designation', 
    }, 
    { 
      headerName: 'Joining Year', 
      field: 'joining_year', 
    }, 
  ]; 
 
  rowData = [ 
      { 
        emp_id: 'EMP01', 
        designation: 'STC', 
        joining_year: 2020, 
      }, 
      { 
        emp_id: 'EMP02', 
        designation: 'TC', 
        joining_year: 2022, 
      }, 
      { 
        emp_id: 'EMP03', 
        designation: 'TC', 
        joining_year: 2022, 
      }, 
    ]; 
}

Make sure to register ag-grid module in main.ts. 

import { bootstrapApplication } from '@angular/platform-browser'; 
import { appConfig } from './app/app.config'; 
import { App } from './app/app'; 
import { AllCommunityModule, ModuleRegistry } from 'ag-grid-community';  
 
// Register all community modules     
ModuleRegistry.registerModules([AllCommunityModule]); 

bootstrapApplication(App, appConfig) 
  .catch((err) => console.error(err));

Add theme in style.css(global css file) 
import it from ag-grid-community package

/* Add application styles & imports to this file! */
@import "~@ag-grid-community/all-modules/dist/styles/ag-grid.css";
@import "~@ag-grid-community/all-modules/dist/styles/ag-theme-balham.css";

ag-grid view

The output of the above screen would show the grid. You can also try adding features and themes provided by ag-grid.

Reference:Ag Grid Angular