Angular 13 Grid Pagination, Sorting and Searching Using ag-grid

ag-grid is a very powerful angular grid plugin for angular1.x/angular 2 and angular. This angular 13 tutorial help to create a listing, searching, sorting with pagination using ag-grid-angular.I have already shared Smart Table Listing with pagination, sorting and searching Using Angular 1.4 and CRUD Functionality AngularJS 1.4 and Smart Table.

We will create the following features into this ag-grid-angular tutorial,

• Integrate ag-grid-angular with angular 4.
• Fetch records from server using rest API and Angular 4 HTTP client.
• Listing data into HTML table using ag-grid-angular.
• Adding Pagination into table grid.
• Adding sorting into table grid.
• Adding searching into table grid.

I am using the following files and folder. We will create and modify changes into the below angularjs files.

• package.json : This file used to add third-party libs like we will add ag-grid package information.
• angular-cli.json : Will add ag-grid CSS and js files path here.
• src/index.html : This file is used for HTML table container wrapper.
• src/app/app.module.ts : We will use this file to import module.
• src/app/app.component.ts : We will used to define smart table components and their configuration of them.

I am assuming, You have created a sample app of angular 13, if not please create and get help from Getting started with angular 4 tutorial.

We will open package.json and add ag-grid package information into this file under ‘dependencies’ object.

"ag-grid": "^16.0.1",
"ag-grid-angular": "^16.0.0",

We will run the below command to install ag-grid and ag-grid-angular module into the application,
npm update

We will add ag-grid and theme CSS file into .angular-cli.json files,

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/ag-theme-blue.css"

I am using the blue theme of ag-grid, You can change it as per your need.

We will initialize some variables into a component file,

gridOptions: GridOptions;
  columnDefs: any[]
  rowData: any[];

gridOptions variable used to define options params for ag-grid, columnDefs is used to define table header column information and rowData use to hold record information.

We will inject ag-grid-angular and HTTP client module into app.module.ts file,

import {AgGridModule} from "ag-grid-angular/main";
import { HttpClientModule } from '@angular/common/http';
AgGridModule.withComponents([])

HttpClient is used to initiate Requests and handle responses in your application. AgGridModule is the main module of angular ag-grid package.

We will create an instance of HttpClient module and assign an angular HTTP variable in the constructor method, We will add the below code into app.componenet.ts file.

constructor(private https: HttpClient){
}

We will create HTTP get request and fetch all associate data into rowData variable, We will add the below code into app.componenet.ts file.

this.http.get('https://localhost/api/v1/employees').subscribe(
        data => {
          this.rowData = data;
      },
      (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
      });
  }

We will define column definition into app.componenet.ts file.

this.columnDefs = [
	{headerName: "Employee Name", field: "employee_name"},
	{headerName: "Employee Salary", field: "employee_salary"},
	{headerName: "Employee Age", field: "employee_age"}
];

We will add an ag-grid-angular component into into app.componenet.ts file.

@Component({
  selector: 'app-root',
  template: '',
  styleUrls: ['./app.component.css']
})

As you can see above code, we have passed rowData, columnDefs and gridOptions.

How to Add Pagination in ag-grid-angular Component

We will pass two parameters paginationAutoPageSize and pagination into ag-grid angular component to add pagination.

template: '<ag-grid-angular style="height: 515px;" class="ag-theme-blue" [rowdata]="rowData" [columndefs]="columnDefs" [pagination]="true" [paginationautopagesize]="true" [gridoptions]="gridOptions"></ag-grid-angular>'

How to Add Sorting in ag-grid-angular Component

We will add sorting parameter enableSorting into ag-grid-angular component to add sorting into grid column.

template: '<ag-grid-angular style="height: 515px;" class="ag-theme-blue" [rowdata]="rowData" [columndefs]="columnDefs" [pagination]="true" [paginationautopagesize]="true" [gridoptions]="gridOptions" enablesorting=""></ag-grid-angular>'

How to Add Searching in ag-grid-angular Component

We will add a Searching parameter enableFilter into ag-grid-angular component to add Searching into grid column.

template: '<ag-grid-angular style="height: 515px;" class="ag-theme-blue" [rowdata]="rowData" [columndefs]="columnDefs" [pagination]="true" [paginationautopagesize]="true" [gridoptions]="gridOptions" enablesorting="" enablefilter=""></ag-grid-angular>'

Conclusion:

We have added an angular version of ag-grid plugin with the angular 4 application, Also integrated pagination, sorting and searching with an HTML table grid.It’s very easy to integrate sorting pagination etc with angular grid, we just need to add a pre-defined directive with the ag-grid-angular component.