Angular 8 datatables

Angular 8 Datatables filter, sorting and paging functionalities Example

Angular Datatables is popular among developers developing in web projects using the mainly jQuery library. It is a full package of many basic features like filter, sorting, and paging, etc.

Prerequisite of Installation:-
To use angular-datatables, we must need to have Node 8.9 or higher and NPM 6 or higher installed.

We recommend using angular-cli 7+ or higher version to create and manage your angular project.

NPM Packages:
We need to install its dependencies before getting the latest release using NPM:
1.            npm install jquery --save
2.            npm install --save
3.            npm install --save
4.            npm install angular-datatables --save
5.            npm install @types/jquery --save-dev
6.            npm install @types/ --save-dev

Setup angular.json :
Add the dependencies in the scripts and styles data-table attributes:

"projects": {
    "demoApp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/demoApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/",
            "assets": [
            "styles": [
            "scripts": [

NgModule -  Import the DataTablesModule at the appropriate level of your app.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { DataTablesModule } from 'angular-datatables';
import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

app-routing.module.ts -
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }

app.component.html –

<h2>Angular 8 datatable - UserList</h2>
<table datatable [dtOptions]="dtOptions" class="row-border hover"></table>

app.component.ts –

import { Component } from '@angular/core';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'Example of Angular 8 DataTable';
  dtOptions: DataTables.Settings = {};
  dtUsers =[
    {"id": 101, "firstName": "Anil", "lastName": "Singh"},
    {"id": 102, "firstName": "Reena", "lastName": "Singh"},
    {"id": 103, "firstName": "Aradhay", "lastName": "Simgh"},
    {"id": 104, "firstName": "Dilip", "lastName": "Singh"},
    {"id": 105, "firstName": "Alok", "lastName": "Singh"},
    {"id": 106, "firstName": "Sunil", "lastName": "Singh"},
    {"id": 107, "firstName": "Sushil", "lastName": "Singh"},
    {"id": 108, "firstName": "Sheo", "lastName": "Shan"},
    {"id": 109, "firstName": "Niranjan", "lastName": "R"},
    {"id": 110, "firstName": "Lopa", "lastName": "Mudra"},
    {"id": 111, "firstName": "Paramanand","lastName": "Tripathi"}

  ngOnInit(): void {
    this.dtOptions = {
      columns: [{title: 'User ID', data: 'id'},
            {title: 'First Name', data: 'firstName'},
            {title: 'Last Name', data: 'lastName' }]

The Result looks like.


Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog -
My Books - Book 1 and Book 2 Powered by Blogger.