How to use Data Grid in Angular 4

What is a Data Grid?

Data grid provides the developer to display information from different sources in structured format that is pleasing to the eyes of the End User.

Data grids can usually display large amounts of Information in a systematic manner with different options to customize it further for different interfaces.

Example of Data Grid is Shown Below:

How to Use a Data Grid?

Angular has no Inbuilt Ready-to-use Data Grid.

We must use a Third Party Data Grid for Angular.

There are many Third Party Data Grids available for Angular.

They are as Follows:

  • Ignite-UI Grid
  • Ag-grid
  • Kendo UI Grid
  • Flex grid, etc

For this Basic Tutorial and Demonstration we will use AG-GRID as it is one of the most used and easy to implement.

How to Setup AG-GRID?

For this demonstration we will use a pre-build application and modify it to use ag-grid.

We can either add ag-grid to an existing application.

First we must install AG-grid dependencies using the node.js command prompt.

Type in the Command Prompt terminal these two Commands:

  • npm install ag-grid
  • npm install ag-grid-angular

Now add the following code to the Top of your Component:

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

Also reference the Ag-grid component in Module:

Last but not Least let's reference the ag-grid in our component:

The row data defines the data which is received from an external source such as a Database.

While ColumnDefs represents the schema or Column names for the Data Grid.

Now using the seed application from AG-Grid for better Understanding

Prerequisites for this demonstration:

After Installing the Prerequisites now Open GIT CMD terminal and type the following code and press enter:

git clone https://github.com/ceolter/ag-grid-angular-seed
cd ag-grid-angular-seed/angular-cli

If you see the above screen in your GIT Command prompt it means your seed project has been successfully created in your Current Users folder

The Seed Project will contain 5 sub seed projects

Choose the one you prefer and delete the others.

For this Example we will choose angular-cli as our Startup Project.

Next navigate to the package.json file in our seed project and type:

npm install

This might take a couple of minutes…So hold on

If your npm is successful you will see the following screen :-

Now we need a IDE let's use Visual Studio Code.

Here is the link to it: https://code.visualstudio.com/download

Great Now that we have Visual Studio Code downloaded and Install

Let's open our project in Visual Studio Code

Now add a lot more entries to rowData and change the ColumnDefs as you desire.

Having a large number of entries will help us in the further section of this example.

RowData

Here we provide rowdata as an array of JavaScript objects to display data:

Column Definitions

To display data in a Tabular Manner we need Column and Row Structure here Column definitions provides us a way to define column names (Header Names) and there data sources (Fields).

In the above code we have cellRendererFramework

This allows to further customize and render the data in the particular cell of the grid which in this case is type

It does not slow down or affect the performance of Angular in any way

Grid Definition in Template

Now that we have our ColumnDefs and rowData setup.

How do we actually define our grid in our Component Template?

Well by using the ag-grid-angular in our html Template

We can customize the size and style of the grid in the current element as shown above.

Now that we have a Grid ready how can we get additional features…Sorting:

Well those features are already built in we just have to enable them.

Let's start off with sorting we need a sorting feature to get list which we can sort the most expensive item to the least expensive one.

To get this Functionality you need to add the following code to your Template

Now open your Visual Code terminal and Type

npm start

Type localhost: 4200 in your browser as node hosts our application on this server address

Output:

Filtering:

Now let's say we want to find a particular record from the list.

In a Corporate application the Data could be in the thousands and millions.

We need a way to filter through this data to only find what we are looking hence we need to enable Filtering.

Like Sorting we need to add a single line to code to the Template HTML:

Output:

Pagination:

If we want a particular number a record on page for a more stark and beautiful look the answer would be to use Pagination.

This is how we include Pagination in our Application and the large records we have added come into play.

Let's add the following code in my-grid-application.component.ts :-

rowCount represents the maximum number of Data we want to count in this particular Application for the sake of simplicity let it be 100.

Also add this code to your Template

By writing [paginationPageSize] = "15" we are saying that we only want 15 records per page.

By writing this code we can navigate not only to the next and previous page but also to the first and last page.

This function of pagination will help us traverse through large data from any source.

Output:

Conclusion:

Now with a few parting conclusions we can say that AG-Grid provides us with a lot of inbuilt ready-to-use code which we can use to provide the end user a more simplistic and immersive experience.

For Further details of other additional features please the ag-grid website.

+91-22-66752917
+91 9967590707
questpond@questpond.com / questpond@yahoo.com