Showing the data set in the table in angular 4 is quite easy. Several free plugins can be used to display data in tables like angular2-datatable that will discuss in this article.
angular2-datatable is a table of components that have been equipped with pagination and sorting data features. Also, this plugin has support with the bootstrap framework so that it can be applied to the mobile display.
Okay, we start the following tutorial, if you have not used bootstrap in your application, please read the How To Integrate Angular 4 + Bootstrap 3 For Beginners article. But this app is still running without using bootstrap
Table And Pagination Using Angular2-datatable in Angular 4
install angular2-datatable from npm
1 | npm i -S angular2-datatable |
Note: in this tutorial use angular-cli to simplify the development of angular applications 4
edit app.module.ts and import the following code
1 | import { DataTableModule } from "angular2-datatable"; |
then add the following script to the imports section
1 2 3 | imports: [ BrowserModule, DataTableModule, |
Open the app.component.ts file and add the following script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-daftar-user', templateUrl: './daftar-user.component.html', styleUrls: ['./daftar-user.component.css'], }) export class DaftarUserComponent implements OnInit { obj: any = new Array({ name: "Sinta", email: "sinta@gmail.com", age: "50" }, { name: "Jojo", email: "Jojo@gmail.com", age: "15" }, { name: "Andre", email: "Andre@gmail.com", age: "85" }, { name: "Simpson", email: "Simpson@gmail.com", age: "45" }, { name: "Doly", email: "Doly@gmail.com", age: "40" }, { name: "Bintang", email: "Bintang@gmail.com", age: "36" }, { name: "Aria", email: "Aria@gmail.com", age: "74" }, { name: "Sams", email: "Sams@gmail.com", age: "8" }, { name: "Oly", email: "Oly@gmail.com", age: "12" }); userlist: any; constructor() { } ngOnInit() { this.userlist = this.obj; } } |
open the app.component.html file and add the following script
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div class="row margintop20px paddingtopbottom15px whitebackground"> <div class="col-xs-12"> <div class="table-responsive"> <table class="table table-striped table-hover table-bordered " [mfData]="userlist" #mf="mfDataTable" [mfRowsOnPage]="3"> <thead> <tr> <th style="width:40px;max-width:40px;">#</th> <th style="width:60px;max-width:60px;"><mfDefaultSorter by="name">Name</mfDefaultSorter></th> <th><mfDefaultSorter by="email">Email</mfDefaultSorter></th> <th><mfDefaultSorter by="age">Age</mfDefaultSorter></th> </tr> </thead> <tbody> <tr *ngFor="let user of mf.data; let i = index;"> <td scope="row">{{i+1}}</td> <td>{{user.name}}</td> <td>{{user.email}}</td> <td>{{user.age}}</td> </tr> </tbody> <tfoot> <tr> <td colspan="4"> <mfBootstrapPaginator ></mfBootstrapPaginator> </td> </tr> </tfoot> </table> </div> </div> </div> |
Please execute the script above, if running properly the system will work like the following picture.
Above is a simple example, if you want to understand the angular2-datatable plugin can visit the official website via GitHub page
So my brief tutorial about angular 4 table and pagination for beginner may be useful
Latest posts by Sigit Prasetya Nugroho (see all)
- Typed.js The Javascript Library For Automatic Text Writing Effects - August 6, 2018
- Azoncast Plugin The Best Auto Amazon WordPress Article, PROVEN!!! - August 1, 2018
- Upgrade Responsive Bootstrap Table Using Footable Plugin - July 3, 2018
¡Me funciono mucho!
¡Muchas gracias!
Do you have any beginner tutorial to integrate datatable to angular 4?
i never use datatables in angular…still newbie in angular.. use basic table and modified it, i think its more powerfull than datatable