Angular Bootstrap table sort

Sort table rows by name, number, value or other data. Sorting feature lets the user arrange and prioritize information displayed in table cells in a custom order with one click.


Basic example MDB Pro component Live Example

Name Position Office Age Start date Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Herrod Chandler Sales Assistant San Francisco 59 2012/08/06 $137,500
Rhona Davidson Integration Specialist Tokyo 55 2010/10/14 $327,900
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
Sonya Frost Software Engineer Edinburgh 23 2008/12/13 $103,600

<table class="table table-striped table-bordered table-responsive-md" cellspacing="0" width="100%">
  <thead>
      <tr>
          <th>Name <mdb-icon icon="sort" (click)="sortBy('name')"></mdb-icon></th>
          <th>Position <mdb-icon icon="sort" (click)="sortBy('position')"></mdb-icon></th>
          <th>Office <mdb-icon icon="sort" (click)="sortBy('office')"></mdb-icon></th>
          <th>Age <mdb-icon icon="sort" (click)="sortBy('age')"></mdb-icon></th>
          <th>Start date <mdb-icon icon="sort" (click)="sortBy('startDate')"></mdb-icon></th>
          <th>Salary <mdb-icon icon="sort" (click)="sortBy('salary')"></mdb-icon></th>
      </tr>
  </thead>
  <tfoot>
      <tr>
          <th>Name</th>
          <th>Position</th>
          <th>Office</th>
          <th>Age</th>
          <th>Start date</th>
          <th>Salary</th>
      </tr>
  </tfoot>
  <tbody>
      <tr *ngFor="let person of personArray">
          <td>{{person.name}}</td>
          <td>{{person.position}}</td>
          <td>{{person.office}}</td>
          <td>{{person.age}}</td>
          <td>{{person.startDate}}</td>
          <td>{{person.salary}}</td>
      </tr>
  </tbody>
</table>
        

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

@Component({
  selector: 'table-sort',
  templateUrl: './table-sort.component.html',
  styleUrls: ['./table-sort.component.css']
})
export class TableSortComponent implements OnInit {
  private sorted = false;

  personArray: Object[] = [
    { id: 1, name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, startDate: '2011/04/25', salary: '$320,800' },
    { id: 2, name: 'Garrett Winters', position: 'Accountant', office: 'Tokyo', age: 63, startDate: '2011/07/25', salary: '$170,750' },
    { id: 3, name: 'Herrod Chandler', position: 'Sales Assistant', office: 'San Francisco', age: 59, startDate: '2012/08/06', salary: '$103,600' },
    { id: 4, name: 'Sonya Frost', position: 'Software Engineer', office: 'Edinburgh', age: 23, startDate: '2008/12/19', salary: '$90,560' },
    { id: 5, name: 'Jena Gaines', position: 'Office Manager', office: 'London', age: 30, startDate: '2011/04/25', salary: '$320,800' },
    { id: 6, name: 'Haley Kennedy', position: 'Senior Marketing Designer', office: 'Edinburgh', age: 61, startDate: '2012/12/18', salary: '$313,500' },
    { id: 7, name: 'Tatyana Fitzpatrick', position: 'Regional Director', office: 'London', age: 66, startDate: '2010/03/17', salary: '$198,500' },
    { id: 8, name: 'Michael Silva', position: 'Marketing Designer', office: 'London', age: 61, startDate: '2012/11/27', salary: '$320,800' },
    { id: 9, name: 'Doris Wilder', position: 'Sales Assistant', office: 'Sidney', age: 23, startDate: '2010/09/20', salary: '$85,600' },
    { id: 10, name: 'Angelica Ramos', position: 'Chief Executive Officer (CEO)', office: 'London', age: 47, startDate: '2009/10/09', salary: '$1,200,000' },
  ];

  sortBy(by: string | any): void {

    this.personArray.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;
  }
}
        

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'