Angular-6-datatable [Pagination, Sort, Sorting, Table in Angular]

The “angular-6-datatable” will provide the table component with sorting and pagination for Angular 6. If you want to use the datatable in Angular 6 applications, try the following steps.

1.            Install to Angular-6-datatable using command “npm i angular-6-datatable –save”

2.            Import the data table module “DataTableModule” in your app module

3.            Prepare your collection list which you want to display on table in your angular application

4.            You must use this bootstrap CSS file in your component file for display buttons and so in data-table UI.

5.            Used the data table properties [mfData], #mf, mfDefaultSorter , [mfRowsOnPage], mfBootstrapPaginator, and so on in your table as like below example.

a.            mfData : any[], this array data used for display in your table

b.           mfRowsOnPage: number – By default 1000 and this number of rows should be displayed on page

c.            mfActivePage: number – By default is 1 and used for display active page number

d.           mfSortBy: any – This parameter is use for sort the rows

e.            mfSortOrder: string – This one is used for sort order parameter as  "asc" or "desc" order

f.             mfRowsOnPage used display the number of rows on page

g.            mfDefaultSorter : This is a default sorter selector for table columns

h.           mfBootstrapPaginator : The one is used to displays the buttons for changing current page and number of displayed rows using bootstrap template. This is required to bootstrap CSS file in your component where you want to display your data

6.            Result looks like below example

Install -

npm i angular-6-datatable --save

The Example -

1.      Import the data table module “DataTableModule” in your app module

app.module.ts -

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { RouterModule, Routes } from '@angular/router';

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

import { UserComponent } from './user/user.component';

import { UserListComponent } from './user-list/user-list.component';

import {DataTableModule} from "angular-6-datatable";

@NgModule({

  declarations: [

    AppComponent,

    UserComponent,

    UserListComponent

  ],

  imports: [

    BrowserModule,

    DataTableModule,

    FormsModule,

    RouterModule.forRoot([

      { path: 'user-link', component: UserComponent },

      { path: 'user-list', component: UserListComponent }

    ])

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

user-list.component.ts -

1.      Prepare your collection list which you want to displayed on table in your component

import { Component, OnInit } from '@angular/core';

@Component({

  selector: 'app-user-list',

  templateUrl: './user-list.component.html',

  styleUrls: ['./user-list.component.css']

})

export class UserListComponent implements OnInit {

  public data : any

 

  constructor() {   }

  ngOnInit() {

    this.data = [{'name':'Anil', 'anil.singh581@gmail.com' :'ssd', 'age' :'34', 'city':'Noida, UP, India' },

    {'name':'Anil', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'Sunil', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'Alok', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'Tinku', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'XYZ', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'asas', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'erer', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' },

    {'name':'jhjh', 'email' :'anil.singh581@gmail.com', 'age' :'34', 'city':'Noida' }

   ]

  }

}

user-list.component.html -
3. Bind the data table properties [mfData], #mf, mfDefaultSorter , [mfRowsOnPage], and mfBootstrapPaginator  in your table

<table class="table table-striped" [mfData]="data" #mf="mfDataTable" [mfRowsOnPage]="5">

  <thead>

  <tr>

      <th style="width: 20%">

          <mfDefaultSorter by="name">UserName</mfDefaultSorter>

      </th>

      <th style="width: 50%">

          <mfDefaultSorter by="email">UserEmail</mfDefaultSorter>

      </th>

      <th style="width: 10%">

          <mfDefaultSorter by="age">Age</mfDefaultSorter>

      </th>

      <th style="width: 20%">

          <mfDefaultSorter by="city">User City</mfDefaultSorter>

      </th>

  </tr>

  </thead>

  <tbody>

  <tr *ngFor="let user of mf.data">

      <td>{{user.name}}</td>

      <td>{{user.email}}</td>

      <td class="text-right">{{user.age}}</td>

      <td>{{user.city | uppercase}}</td>

  </tr>

  </tbody>

  <tfoot>

  <tr>

      <td colspan="4">

          <mfBootstrapPaginator [rowsOnPageSet]="[5,10,25]"></mfBootstrapPaginator>

      </td>

  </tr>

  </tfoot>

</table>

user-list.component.css -

@import "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css";

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css";

Result –

Reference - https://www.npmjs.com/package/angular-6-datatable