Angular Bootstrap table pagination

Divide long tables into pages with table pagination feature. Display your data clearly by using multiple table parts styled with Material Design. Check out examples and tutorial.


Basic example MDB Pro component Live Example

# First Name Last Name Username Username Username Username
1 Mark Otto @mdo Mark Otto @mdo
2 Jacob Thornton @fat Jacob Thornton @fat
3 Larry the Bird @twitter Larry the Bird @twitter
4 Paul Topolski @P_Topolski Paul Topolski @P_Topolski
5 Larry the Bird @twitter Larry the Bird @twitter


          <div class="card card-cascade narrower mt-5">

            <!--Card image-->
            <div class="view view-cascade gradient-card-header purple-gradient narrower py-4 mx-4 mb-3 d-flex justify-content-center align-items-center">

              <h4 class="white-text font-weight-bold text-uppercase mb-0">Table with pagination</h4>

            </div>
            <!--/Card image-->

            <div class="px-4">

              <!--Table-->
              <table class="table table-hover table-responsive-md mb-0">

                <!--Table head-->
                <thead>
                  <tr>
                    <th scope="row">#</th>
                    <th class="th-lg">First Name</th>
                    <th class="th-lg">Last Name</th>
                    <th class="th-lg">Username</th>
                  </tr>
                </thead>
                <!--Table head-->

                <!--Table body-->
                <tbody>
                  <tr *ngFor="let data of tableData; let i = index">
                    <th *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex" scope="row">{{data.id}}</th>
                    <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.firstName}}</td>
                    <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.lastName}}</td>
                    <td *ngIf="data.id >= firstVisibleIndex && data.id <= lastVisibleIndex">{{data.username}}</td>
                  </tr>
                </tbody>
                <!--Table body-->
              </table>

            </div>

            <hr class="my-0">

            <!--Bottom Table UI-->
            <div class="d-flex justify-content-center">

              <!--Pagination -->
              <nav class="my-4 pt-2">
                <ul class="pagination pagination-circle pg-purple mb-0">

                  <!--First-->
                  <li class="page-item clearfix d-none d-md-block" (click)="firstPage()" [ngClass]="{disabled: activePage == 1}">
                    <a class="page-link">First</a>
                  </li>

                  <!--Arrow left-->
                  <li class="page-item" (click)="previousPage($event)" [ngClass]="{disabled: activePage == 1}">
                    <a class="page-link" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                      <span class="sr-only">Previous</span>
                    </a>
                  </li>

                  <!--Numbers-->
                  <li *ngFor="let page of paginators; let i = index" class="page-item" [ngClass]="{active: i+1 == activePage}">
                    <a class="page-link waves-light" (click)="changePage($event)" mdbWavesEffect>{{page}}</a>
                  </li>



                  <!--Arrow right-->
                  <li class="page-item" (click)="nextPage($event)" [ngClass]="{disabled: activePage == 3}">
                    <a class="page-link" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                      <span class="sr-only">Next</span>
                    </a>
                  </li>

                  <!--First-->
                  <li class="page-item clearfix d-none d-md-block" (click)="lastPage()" [ngClass]="{disabled: activePage == 3}">
                    <a class="page-link">Last</a>
                  </li>

                </ul>
              </nav>
              <!--/Pagination -->

            </div>
            <!--Bottom Table UI-->

          </div>
        

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

@Component({
  selector: 'table-pagination',
  templateUrl: './table-pagination.component.html',
  styleUrls: ['./table-pagination.component.css']
})
export class TablePaginationComponent {

  paginators: Array<any> = [1, 2, 3];
  activePage: number = 1;
  firstVisibleIndex: number = 1;
  lastVisibleIndex: number = 5;

  tableData = [
    { id: 1, firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
    { id: 2, firstName: 'John', lastName: 'Doe', username: '@john' },
    { id: 3, firstName: 'Lessie', lastName: 'Moe', username: '@lessie' },
    { id: 4, firstName: 'Otton', lastName: 'Otto', username: '@otton' },
    { id: 5, firstName: 'Krauze', lastName: 'John', username: '@krauze' },
    { id: 6, firstName: 'Lex', lastName: 'Lucky', username: '@lex' },
    { id: 7, firstName: 'Allie', lastName: 'Bill', username: '@allie' },
    { id: 8, firstName: 'Anna', lastName: 'Frost', username: '@anna' },
    { id: 9, firstName: 'Bob', lastName: 'One', username: '@bob' },
    { id: 10, firstName: 'Carl', lastName: 'Johnson', username: '@cj' },
    { id: 11, firstName: 'Mia', lastName: 'Marx', username: '@mia' },
    { id: 12, firstName: 'Cia', lastName: 'Fbi', username: '@cia' },
    { id: 13, firstName: 'John', lastName: 'Doe', username: '@johny' },
    { id: 14, firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
    { id: 15, firstName: 'Lessie', lastName: 'Moe', username: '@lessie' },
  ];

  changePage(event: any) {
    if (event.target.text >= 1 && event.target.text <= 3) {
      this.activePage = +event.target.text;
      this.firstVisibleIndex = this.activePage * 5 - 5 + 1;
      this.lastVisibleIndex = this.activePage * 5;
    }
  }

  nextPage(event: any) {
    this.activePage += 1;
    this.firstVisibleIndex = this.activePage * 5 - 5 + 1;
    this.lastVisibleIndex = this.activePage * 5;
  }
  previousPage(event: any) {
    this.activePage -= 1;
    this.firstVisibleIndex = this.activePage * 5 - 5 + 1;
    this.lastVisibleIndex = this.activePage * 5;
  }

  firstPage() {
    this.activePage = 1;
    this.firstVisibleIndex = this.activePage * 5 - 5 + 1;
    this.lastVisibleIndex = this.activePage * 5;
  }

  lastPage() {
    this.activePage = 3;
    this.firstVisibleIndex = this.activePage * 5 - 5 + 1;
    this.lastVisibleIndex = this.activePage * 5;
  }
}
            

API Reference:

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

API Reference for MDB Angular Tables:
// MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'