Angular DataTables is one of the best datatable I have used in the angular. Angular DataTables is built on the top of JQuery DataTables.
Here is the complete working code and use this carefully:
1. Here are the basics commands, you need to run for latest angular 8/9 setup and environment:
1. Here are the basics commands, you need to run for latest angular 8/9 setup and environment:
$ npm install -g @angular/cli
$ ng new ang9datatables
$ cd ang9datatables
$ ng serve
//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/
2. Here are the basics commands, you need to run into your terminal for datatable and its dependencies:
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
npm install ngx-bootstrap bootstrap --save
3. After done with commands add below code into you angular.json file:
...
"styles": [
"src/styles.css",
"node_modules/datatables.net-dt/css/jquery.dataTables.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/datatables.net/js/jquery.dataTables.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
]
...
4. Now add below code into your app.module.ts file:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {DataTablesModule} from 'angular-datatables';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DataTablesModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
5. Now add below code into app.component.ts file:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
public data = [
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
{name: 'ujjwal', email: 'ujjwaltechi1@gmail.com', website:'ujjwaltips.com'},
];
title = 'angulardatatables';
dtOptions: DataTables.Settings = {};
ngOnInit() {
this.dtOptions = {
pagingType: 'full_numbers',
pageLength: 5,
processing: true
};
}
}
6. Now add below code into app.component.html file:
<div class="container">
<table class="table table-striped table-bordered table-sm row-border hover" datatable [dtOptions]="dtOptions">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let group of data">
<td>{{group.name}}</td>
<td>{{group.email}}</td>
<td>{{group.website}}</td>
</tr>
</tbody>
</table>
<div>