Adding Ag-Grid and Enable Sorting and Filtering

Introduction 

 

In this article, I will explain about adding Ag-Grid to the Angular project and enabling sorting and filtering. Before getting started we can take an overview about what is an ag-Grid and the uses of it. The ag-Grid stands for “agnostic”, and ag-Grid is a DataGrid feature used for the JavaScript framework with zero dependencies. Ag-Grid supports all major frameworks such as Angular, Vue, React and Vanilla JS. But in this article, we will be using ag-Grid with an Angular framework.

 

You can find more information about ag-Grid from the following link. The ag-Grid also comes in both open-source and well as in the commercial licensed category. The ag-Grid community is open-source, whereas ag-Grid Enterprise is based on commercial licensing. So, as I said, we will be adding ag-Grid to the application and we are going to enable both sorting and well as filtering.

 

Setting up

 

Before adding ag-Grid to the project, create a new Angular application. You can use the following command for creating a new Angular project.

 

ng new ProjectName --style CSS --routing false

 

 

 

So, we have created a new Angular project, now we are going to add ag-Grid to our application, for that use the following command. This is a simple project so we didn’t use routing.

 

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

 

 

              

As I said before, ag-Grid is categorized into community and as well as enterprise, we can use community edition in this project and we can think whether we can use ag-Grid to our existing project. The answer is “YES;” we don’t need to worry because internal ag-grid engine is implemented in Typescript with zero dependencies so it will support Angular through a wrapper component. After adding ag-Grid to application we need to import AgGridModule in app.module.ts

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

 

 

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";

The ag-theme-balham.css is one of the available themes and we can use different themes according to our need and the next step is to declare grid configuration. Open app.component.ts file and replace the code as mentioned below.

import {
 Component
} from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'agGrid';
 columnDefs = [{
  headerName: 'Software',
  field: 'name'
 }, {
  headerName: 'Use',
  field: 'usage'
 }];
 rowData = [{
  name: 'Disk Drill',
  usage: 'Files recovery'
 }, {
  name: 'VScode',
  usage: 'IDE developed by Microsoft'
 }];
}

 

 

The further step is to add component definition, open app.component.html and replace the following code as mentioned below.

<ag-grid-angular
style="width: 500px; height: 200px;" class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
></ag-grid-angular>

 

 

Now coming to the next step is to run the Angular application for output, for that use the following command to view the output in the browser.

 

ng serve -open

              

So, as we can see, we have a grid representing property binding of both columnDefs and rowData and the main point is we have set a class to ag-theme-balham which helps in representing the grid theme.

 

 

              

The next step is to enable sorting and well as filtering. It is very easy to enable filtering, all we have to do is  set a sortable property to each column for sorting for enabling sorting. Open app.component.ts file and replace the following code.

import {
 Component
} from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'agGrid';
 columnDefs = [{
  headerName: 'Software',
  field: 'name',
  sortable: true
 }, {
  headerName: 'Use',
  field: 'usage',
  sortable: true
 }];
 rowData = [{
  name: 'Disk Drill',
  usage: 'Files recovery'
 }, {
  name: 'VScode',
  usage: 'IDE developed by Microsoft'
 }];
}

We don’t have more rows in this article. But imagine what happens if we have N number of rows and columns? Then filter becomes our friend. By enabling filter, we can filter both rows or  columns. Interesting, isn’t it? Sorting and enabling filter is also easy; just set the filter property as mentioned below in app.component.ts

import {
 Component
} from '@angular/core';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title = 'agGrid';
 columnDefs = [{
  headerName: 'Software',
  field: 'name',
  sortable: true,
  filter: true
 }, {
  headerName: 'Use',
  field: 'usage',
  sortable: true,
  filter: true
 }];
 rowData = [{
  name: 'Disk Drill',
  usage: 'Files recovery'
 }, {
  name: 'VScode',
  usage: 'IDE developed by Microsoft'
 }];
}

 

                  

With the filter property as used in app.component.ts, we can see filter property when we hover on the header and with that, we can filter the row or column. At last, we have enabled both sorting as well as filtering.

 

 

 

Summary

                   

In this article, we have seen how to add ag-Grid to our project and we have enabled both sorting and filtering. I hope this article will be useful to you. In the next article, we will be seeing about fetching remote data.