Rate this docs

Table sort

Angular Bootstrap table sort

Angular Bootstrap Sort table are component with sorting functionality which lets you sort the data of the tables according to any specific columns.

To manipulate table sorting use one of the options presented below.


Basic example MDB Pro component Live Example


  <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;
    }
  }
          

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

Table responsive

This option allows you to use responsive tables on your mobile devices.

Table editable

Table editable allows you to edit existing data within the table and add new data to the table.

Table styles

Table styles shows you a new way of changing appearance of your existing tables

Angular Sort Tables - API

In this section you will find advanced information about the Table component. You will find out which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.

Modules used

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.

                    
              // MDB Angular Pro
              import { WavesModule } from 'ng-uikit-pro-standard';
                    
                  

Methods

The table shows the available methods in component.

Name Parameters Description Example
sortBy() by: string Sorts the date alphabetically from the column. As a argument takes column name. sortBy('id');