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 datatables.net --save
3.
npm install datatables.net-dt --save
4.
npm install angular-datatables
--save
5.
npm install @types/jquery --save-dev
6.
npm install @types/datatables.net
--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/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js"
]
},
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';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
DataTablesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module.ts -
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [];
@NgModule({
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';
@Component({
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 = {
data:this.dtUsers,
columns: [{title: 'User ID', data: 'id'},
{title: 'First Name', data: 'firstName'},
{title: 'Last Name', data: 'lastName' }]
};
}
}
The Result looks like.
Related
Post-
Angular 7 datatables Example