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



  
      
          Name 
          Position 
          Office 
          Age 
          Start date 
          Salary 
      
  
  
      
          Name
          Position
          Office
          Age
          Start date
          Salary
      
  
  
      
          {{person.name}}
          {{person.position}}
          {{person.office}}
          {{person.age}}
          {{person.startDate}}
          {{person.salary}}


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'

Import example Modules list

Table with sorting
Basic example