How To Use Ngx-Datatable To Show The Data In Grid View Using Angular 8

Introduction

In this article, we will learn how to show data in a list using ngx-datatable in Angular 8. It is available in the npm package which can be resued in our application whenever we want to show a list of records.

Prerequisites

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

Step 1

Let's create a new Angular project using the following NPM command:

ng new datatable

Step 2

Now, let's create a new component using the following command:

ng g c ngx-datatable

Step 3

Install ngx-datatable from npm using the following command:

npm i @swimlane/ngx-datatable

Step 4

Let add the template in our ngx-datatable.component.html.

<div class="card card-default">
<div class="content-heading">
<h2>Example of ngx-datatable</h2>
</div>
<div class="card-body">
<ngx-datatable class='bootstrap no-detail-row' [columnMode]="'force'" [footerHeight]="50" [rowHeight]="'auto'"
[rows]='rows' [count]="totalCount" [limit]="dataParams.page_size">
<ngx-datatable-column name="Title 1" prop="title_line1"></ngx-datatable-column>
<ngx-datatable-column name="Title 2" prop="title_line2"></ngx-datatable-column>
<ngx-datatable-column name="Type" prop="type"></ngx-datatable-column>
<ngx-datatable-column name="Order No" prop="order_number"></ngx-datatable-column>
<ngx-datatable-column name="Action" widht="600">
<ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
<div class="text-left">
<a title="Edit" class="mr-2" href="javascript:void(0);">Edit</a>
<a title="Delete" href="javascript:void(0);"
>Delete</a>
</div>
</ng-template>
</ngx-datatable-column>
</ngx-datatable>
</div>
</div>

Step 5

Now, open the delete-confirmation-dailog.component.ts file and add the following code in this file:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { NgxDatatableService } from './ngx-datatable.service';
@Component({
selector: 'app-ngx-datatable',
templateUrl: './ngx-datatable.component.html',
styleUrls: ['./ngx-datatable.component.css']
})
export class NgxDatatableComponent implements OnInit {
rows: any = [];
totalCount: Number = 0;
closeResult: string;
dataParams: any = {
page_num: '',
page_size: ''
};
constructor(
private ngxDatatableService: NgxDatatableService
) { }
ngOnInit() {
this.dataParams.page_num = 1;
this.dataParams.page_size = 20;
this.getAllHeroList();
}
getAllHeroList() {
this.rows = this.ngxDatatableService.hero_pages;
this.totalCount = this.ngxDatatableService.total_count;
}
}

Step 6

We are adding one service file to fetch and show some dummy data. To create it, let's run the following code in the terminal:

ng g s ngx-datatable

Step 7

Now, open the ngx-datatable.service.html file and add the following code:

import { Injectable } from '@angular/core';
import { from, Observable } from 'rxjs';
import { catchError } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class NgxDatatableService {
hero_pages;
total_count;
constructor() {
this.hero_pages = [{
'id': '05fb32e7-9fae-4879-8379-d037937fdc24',
'status': 'ACTIVE',
'title_line1': 'MAKING FANTASY FOOTBALL',
'title_line2': 'A REAL THING',
'type': 'FCF',
'order_number': 1
}, {
'id': '05fb32e7-9fae-4879-8379-d037937fdc24',
'status': 'ACTIVE',
'title_line1': 'MAKING FANTASY FOOTBALL',
'title_line2': 'A REAL THING',
'type': 'FCF1',
'order_number': 2
}, {
'id': '05fb32e7-9fae-4879-8379-d037937fdc24',
'status': 'ACTIVE',
'title_line1': 'MAKING FANTASY FOOTBALL',
'title_line2': 'A REAL THING',
'type': 'FCF2',
'order_number': 3
}, {
'id': '05fb32e7-9fae-4879-8379-d037937fdc24',
'status': 'ACTIVE',
'title_line1': 'MAKING FANTASY FOOTBALL',
'title_line2': 'A REAL THING',
'type': 'FCF3',
'order_number': 4
}];
this.total_count = this.hero_pages.length;
}
}

Step 8

Now, open the app.component.html file and add the following code:

<app-ngx-datatable></app-ngx-datatable>

Step 9

Let's open the app.module.ts file and add the following code: Import ngb Module in root module component

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NgxDatatableComponent } from './ngx-datatable/ngx-datatable.component';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
@NgModule({
// tslint:disable-next-line: deprecation
imports: [BrowserModule, FormsModule, NgxDatatableModule],
declarations: [AppComponent, NgxDatatableComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

Step 10

To style the datatable with pagination, we need to add some css in our style.css file. Just copy the below code and paste it in the style .css file.

@import '~@swimlane/ngx-datatable/release/index.css';
@import '~@swimlane/ngx-datatable/release/themes/bootstrap.css';
@import '~@swimlane/ngx-datatable/release/assets/icons.css';
.ngx-datatable.bootstrap {
background-color: transparent;
box-shadow: 0 0 0 #000;
}
.ngx-datatable.scroll-vertical {
height: 300px;
}
.no-detail-row .datatable-row-detail {
display: none !important;
}
.ngx-datatable.bootstrap.single-selection .datatable-body-row.active,
.ngx-datatable.bootstrap.single-selection .datatable-body-row.active .datatable-row-group,
.ngx-datatable.bootstrap.multi-selection .datatable-body-row.active,
.ngx-datatable.bootstrap.multi-selection .datatable-body-row.active .datatable-row-group,
.ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active,
.ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active .datatable-row-group,
.ngx-datatable.bootstrap.single-selection .datatable-body-row.active:hover,
.ngx-datatable.bootstrap.single-selection .datatable-body-row.active:hover .datatable-row-group,
.ngx-datatable.bootstrap.multi-selection .datatable-body-row.active:hover,
.ngx-datatable.bootstrap.multi-selection .datatable-body-row.active:hover .datatable-row-group,
.ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active:hover,
.ngx-datatable.bootstrap.multi-click-selection .datatable-body-row.active:hover .datatable-row-group {
background-color: red !important;
}
.datatable-body-cell {
color: #106cc8;
}
.datatable-icon-right {
text-decoration: none !important;
}
.ngx-datatable.bootstrap .empty-row {
text-align: center;
margin-top: 20px;
}
.ngx-datatable.bootstrap .datatable-footer {
background-color: transparent;
color: red;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager a {
color: blue;
}
.pager li>a,
.pager li>span {
border-color: black;
}
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled).active a,
.ngx-datatable.bootstrap .datatable-footer .datatable-pager ul li:not(.disabled):hover a {
background-color: blue;
border-color: blue;
color: #fff;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row {
border: 0;
}
.ngx-datatable.bootstrap .datatable-body .datatable-body-row.datatable-row-even {
background-color: rgba(0, 0, 0, 0.025);
}
.ngx-datatable.bootstrap .datatable-body .progress-linear {
display: block;
position: relative;
width: 100%;
height: 5px;
padding: 0;
margin: 0;
position: absolute;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 5px;
-webkit-transform: translate(0, 0) scale(1, 1);
transform: translate(0, 0) scale(1, 1);
background-color: #aad1f9;
}
.ngx-datatable.bootstrap .datatable-body .progress-linear .container .bar {
transition: all .2s linear;
-webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
transition: -webkit-transform .2s linear;
transition: transform .2s linear;
background-color: #106cc8;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: auto;
height: 5px;
}
.wrapper .aside-container .aside-inner,
.wrapper .aside-container {
width: 230px;
}

Now its time for the Output:

Conclusion

Finally, we have completed how to show a list of data using ngx-datatable in Angular 8.

I hope you liked this tutorial. Please share it with others.

Thank you for taking your valuable time to read the full article.

2 Comments

Join the conversation! Your thoughts help the community grow.

Kiran Maram5y ago
I followed the same steps, but some how the styles are not showing in the images. Please help me to fix the issue
- Matheus Ferrari5y ago
  Please addimport { ViewEncapsulation } from '@angular/core'; @Component({ [...] // other code like template and style urls encapsulation: ViewEncapsulation.None })