Datatables
Angular Bootstrap 4 datatables
Angular Bootstrap Datatables are component which mixes tables with advanced options like searching, sorting, pagination and generating CSV file.
Basic example MDB Pro component Live Example
Advanced table
id
Post title
Post body
{{data.id}}
{{data.title}}
{{data.body}}
import { Component, OnInit, HostListener, ViewChildren, QueryList, ElementRef } from '@angular/core';
import { Http } from '@angular/http';
import { Angular5Csv } from 'angular5-csv/Angular5-csv';
@Component({
selector: 'advanced-table',
templateUrl: './advanced-table.component.html',
styleUrls: ['./advanced-table.component.scss']
})
export class AdvancedTableComponent implements OnInit {
options = {
fieldSeparator: ',',
quoteStrings: '"',
decimalseparator: '.',
showLabels: true,
showTitle: true,
useBom: true,
headers: ['Post ID', 'Post title', 'Post body']
};
@ViewChildren('list') list: QueryList;
paginators: Array = [];
activePage: number = 1;
firstVisibleIndex: number = 1;
lastVisibleIndex: number = 10;
url: any = 'https://jsonplaceholder.typicode.com/posts';
tableData = [];
sorted = false;
searchText: string;
firstPageNumber: number = 1;
lastPageNumber: number;
maxVisibleItems: number = 10;
constructor(private http: Http) { }
getData() {
return this.http.get(this.url);
}
ngOnInit() {
this.getData().subscribe((next: any) => {
next.json().forEach((element: any) => {
this.tableData.push({ id: (element.id).toString(), title: element.title, body: element.body });
});
});
setTimeout(() => {
for (let i = 1; i <= this.tableData.length; i++) {
if (i % this.maxVisibleItems === 0) {
this.paginators.push(i / this.maxVisibleItems);
}
}
if (this.tableData.length % this.paginators.length !== 0) {
this.paginators.push(this.paginators.length + 1);
}
this.lastPageNumber = this.paginators.length;
this.lastVisibleIndex = this.maxVisibleItems;
}, 200);
}
@HostListener('input') oninput() {
this.paginators = [];
for (let i = 1; i <= this.search().length; i++) {
if (!(this.paginators.indexOf(Math.ceil(i / this.maxVisibleItems)) !== -1)) {
this.paginators.push(Math.ceil(i / this.maxVisibleItems));
}
}
this.lastPageNumber = this.paginators.length;
}
changePage(event: any) {
if (event.target.text >= 1 && event.target.text <= this.maxVisibleItems) {
this.activePage = +event.target.text;
this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
}
}
nextPage() {
this.activePage += 1;
this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
}
previousPage() {
this.activePage -= 1;
this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
}
firstPage() {
this.activePage = 1;
this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
}
lastPage() {
this.activePage = this.lastPageNumber;
this.firstVisibleIndex = this.activePage * this.maxVisibleItems - this.maxVisibleItems + 1;
this.lastVisibleIndex = this.activePage * this.maxVisibleItems;
}
sortBy(by: string | any): void {
if (by == 'id') {
this.search().reverse();
} else {
this.search().sort((a: any, b: any) => {
if (a[by] < b[by]) {
return this.sorted ? 1 : -1;
}
if (a[by] > b[by]) {
return this.sorted ? -1 : 1;
}
return 0;
});
}
this.sorted = !this.sorted;
}
filterIt(arr: any, searchKey: any) {
return arr.filter((obj: any) => {
return Object.keys(obj).some((key) => {
return obj[key].includes(searchKey);
});
});
}
search() {
if (!this.searchText) {
return this.tableData;
}
if (this.searchText) {
return this.filterIt(this.tableData, this.searchText);
}
}
generateCsv() {
new Angular5Csv(this.search(), 'data-table', this.options);
}
Advanced table options
For advanced options of the tables have a look at specific documentation pages listed below.
Table pagination
Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.
Table search
MDBootstrap search box enables super fast searching among all the data of the table.
Table sort
This functionality lets you sort the data of the tables according to any specific columns.
Table editable
Table editable allows you to edit existing data within the table and add new data to the table.
Table Responsive
Table responsive allows you to use tables on mobile devices.
Table styles
Table styles shows how you could customize your tables.