Angular JS DataTable

Most of the Content Management Systems the datatable is an essential functionality. Most datatable plugins or packages provide common functionalities like listing, filtering, sorting, searching etc. Creating each of the functionalities manually is a tedious task. In a real world situation you will need to meet deadlines and produce the result and creating your own libraries for each functionalities will take away the most precious thing, time and in this process you will sure encounter certain pitfalls and borders in the actual application. Before installing or using a library you should always look for documentation, features provided, Github stars, Npm downloads, open issues on github, frequency of commits, contributors/pull requests, last commit date, size of library etc. If it's a good library you will be able to edit and customize the features in the library to suit your needs.Now let’s see how to install and use Angular Datatable. 

ng add angular-datatables

Install the following packages :

npm install jquery --save
npm install datatables.net --save
npm install datatables.net-dt --save
npm install angular-datatables --save
npm install @types/jquery --save-dev
npm install @types/datatables.net --save-dev

 Add the package dependencies in your scripts and styles to angular.json.

"projects": {
    "your-app-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "node_modules/datatables.net-dt/css/jquery.dataTables.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/datatables.net/js/jquery.dataTables.js"
            ],
            ...
          }
}

Import the DataTable in your application file at an appropriate level.

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

import { DataTablesModule } from "angular-datatables";

import { AppComponent } from "./app.component";

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, DataTablesModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}