How To Use Ag-Grid In Angular 8 With Sorting And Floating Filter

Introduction

In this article, we are going to see ag-Grid for Angular applications. ag-Grid provides a feature to display the data in proper grid format with filtering and sorting features already included in it and many more. Ag-grid is a fully-featured and highly customizable javascript data grid.

Prerequisites

Basic knowledge of Angular
Visual Studio Code must be installed
Angular CLI must be installed
Node JS must be installed

Step 1

Create a new Angular project using the following NPM command:

ng new ag-gridExample

Step 2

Now let's add the ag-Grid NPM packages. run the following command

npm install --save ag-grid-community ag-grid-angular

Step 3

The next step is to add ag-Grid styles in style.css, just import the following below command in style.css

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

Step 4

Create a new ag-Grid Component using the following NPM command,

ng g c ag-grid

After installing the package, we just need to import it in our module, so open app.module.ts file and import the following code:

import { AgGridModule } from 'ag-grid-angular';

Step 5

Open the file app.module.ts and paste the below code,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AgGridComponent } from './ag-grid/ag-grid.component';
import { AgGridModule } from 'ag-grid-angular';
@NgModule({
declarations: [
AppComponent,
AgGridComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AgGridModule.withComponents([]),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

How To Use Ag-Grid In Angular 8 With Sorting And Floating Filter

Step 6

Now, open the app.component.ts file and add the following code in this file,

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ColumnDefs;
RowData: any;
AgLoad: boolean;
constructor() { }
ngOnInit() {
this.GetAgColumns();
this.GetGiftVoucherList();
}
GetAgColumns() {
this.ColumnDefs = [
{ headerName: 'ArtNo', field: 'ArtNo', sortable: true, filter: true },
{ headerName: 'Provider', field: 'Provider', sortable: true, filter: true },
{ headerName: 'ProviderArtNo', field: 'ProviderArtNo', sortable: true, filter: true },
{ headerName: 'Brand', field: 'Brand', sortable: true, filter: true },
{ headerName: 'Price', field: 'Price', sortable: true, filter: true },
{ headerName: 'BuyAccount', field: 'BuyAccount', sortable: true, filter: true }
];
}
GetGiftVoucherList() {
this.AgLoad = true;
this.RowData = [
{
ArtNo: "100",
Provider: "IPhone 11",
ProviderArtNo: "1Yu",
Brand: "Apple",
Price: 7810.23,
BuyAccount: "123",
},
{
ArtNo: "101",
Provider: "Samsung galaxy",
ProviderArtNo: "1Yu",
Brand: "Samsung",
Price: 2310.23,
BuyAccount: "123",
},
{
ArtNo: "102",
Provider: "Iphone 11 Pro",
ProviderArtNo: "1Yu",
Brand: "Apple",
Price: 7810.23,
BuyAccount: "123",
},
{
ArtNo: "103",
Provider: "Intex",
ProviderArtNo: "1Yu",
Brand: "Intex",
Price: 5810.23,
BuyAccount: "123",
},
{
ArtNo: "100",
Provider: "IPhone 11",
ProviderArtNo: "1Yu",
Brand: "Apple",
Price: 7810.23,
BuyAccount: "123",
},
{
ArtNo: "101",
Provider: "Samsung galaxy",
ProviderArtNo: "1Yu",
Brand: "Samsung",
Price: 2310.23,
BuyAccount: "123",
},
{
ArtNo: "102",
Provider: "Iphone 11 Pro",
ProviderArtNo: "1Yu",
Brand: "Apple",
Price: 7810.23,
BuyAccount: "123",
},
{
ArtNo: "103",
Provider: "Intex",
ProviderArtNo: "1Yu",
Brand: "Intex",
Price: 5810.23,
BuyAccount: "123",
}
];
}
}

Here column and row data are its properties where column contains the header, and field is the value which is we are storing inside Row.

Row data can be dynamically loaded

On the below Image we are using sortable and filter to enable it in our application/ It will give the feature to sorting as well as filter

Step 7

The next step is to open the app.component.html file and paste the below code,

<h1>Mobile Company Data</h1>
<div class="card">
<div class="card-body pb-0">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header">
Mobile Company Data
</div>
<div class="card-body position-relative">
<div class="ag-theme-balham" style="height:550px;">
<app-ag-grid *ngIf="AgLoad" [ColumnDefs]="this.ColumnDefs" [RowData]="this.RowData"
[IsColumnsToFit]="true">
</app-ag-grid>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Step 8

The next step is to open the ag-grid.component.html file and paste the below code,

<div style="width:100%; height: 100%;">
<table id="dynamic-table" class="table table-stripedtable-hover" style="width:100%; height: 100%;">
<ag-grid-angular style="width:100%; height:85%;" class="ag-theme-balham" [columnDefs]="ColumnDefs"
[enableSorting]="true" [animateRows]="true" [pagination]="true" [paginationPageSize]="10" [floatingFilter]="true"
[animateRows]="true" (gridReady)="BindData($event)">
</ag-grid-angular>
</table>
</div>

Step 9

The next step is to open the ag-grid.component.ts file and paste the below code:

import { Component, Input} from '@angular/core';
@Component({
selector: 'app-ag-grid',
templateUrl: './ag-grid.component.html',
styleUrls: ['./ag-grid.component.css']
})
export class AgGridComponent {
@Input() ColumnDefs: any;
@Input() RowData: any;
@Input() IsColumnsToFit: boolean;
gridApi: any;
gridColumnApi: any;
BindData(params) {
this.gridApi = params.api;
this.gridColumnApi = params.columnApi;
params.api.setRowData(this.RowData);
if (this.IsColumnsToFit) {
this.gridApi.sizeColumnsToFit();
}
}
}

Now with this step, our coding part is done and it's time for the Output,

Type the below code to build and run the application:

ng serve -o

You can see it shows the following image when the connection is there. Once we disconnect, the internet automatically detects it and the page will change.

The above image is showing data in ag-grid with ag-theme-balham

The above image is showing ag-grid with a blue theme.There are many themes available in ag-grid, we have to just take its path and import it in style.css.

The above image is showing ag-grid with floating filter .

Ag-grid also supports searching and sorting .

Ag-gid also gives the feature to paginate our data as in the above image we can see how pagination is working .

Conclusion

In this article, we have seen how to use the Ag-Grid feature in Angular 8 with filter and sorting.

Please give your valuable feedback/comments/questions about this article.

3 Comments

Join the conversation! Your thoughts help the community grow.

Matheus3y ago
The jspreadsheet library is also very good for working with grids. I liked it because it is very light.
Pramod Thakur4y ago
How to call on button grid. on page load, it's working fine. I just want to display on button click instead of page load.
vipin kumar4y ago
Thanks for explaining. How we can place button inside cell for a column