Angular Bootstrap table sort

Angular Table sort - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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

To set up table sorting, use one of the options presented below.

Basic example

Live example 
        
            
          <table id="tableSortExample" mdbTable class="z-depth-1">
            <thead>
              <tr>
                <th *ngFor="let head of headElements; let i = index" aria-controls="tableSortExample" scope="col" [mdbTableSort]="elements" [sortBy]="headElements[i]">{{ head | titlecase }}
                  <mdb-icon fas icon="sort"></mdb-icon>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let el of elements; let i = index">
                <th scope="row">{{ el.id }}</th>
                <td>{{ el.first }}</td>
                <td>{{ el.last }}</td>
                <td>{{ el.handle }}</td>
              </tr>
            </tbody>
          </table>
        
        
    
        
            
          import { Component, OnInit } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent implements OnInit {

            elements: any = [];
            headElements = ['id', 'first', 'last', 'handle'];

            ngOnInit() {
              for (let i = 1; i <= 15; i++) {
                this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
              }
            }
          }

Sort over nested properties

Live example 
        
            
          <table mdbTable class="z-depth-1">
            <thead>
            <tr>
              <th [mdbTableSort]="elements" sortBy="id">ID</th>
              <th [mdbTableSort]="elements" sortBy="first.nick">First</th>
              <th [mdbTableSort]="elements" sortBy="last">Last</th>
              <th [mdbTableSort]="elements" sortBy="handle">Handle</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let el of elements; let i = index">
              <th scope="row">{{ el.id }}</th>
              <td>{{ el.first.nick }}</td>
              <td>{{ el.last }}</td>
              <td>{{ el.handle }}</td>
            </tr>
            </tbody>
          </table>
        
        
    
        
            
          import { Component, OnInit } from '@angular/core';

          @Component({
            selector: 'nested-sort',
            templateUrl: './nested-sort.component.html',
            styleUrls: ['./nested-sort.component.scss']
          })
          export class NestedSortComponent implements OnInit {

            elements: any = [];

            ngOnInit() {
              for (let i = 1; i <= 11; i++) {
                this.elements.push({
                  id: i,
                  first: {nick: 'Nick ' + i, name: 'Name ' + i},
                  last: 'Name ' + i,
                  handle: 'Handle ' + i
                });
              }
            }
          }

Advanced table options

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

Datatables

MDBootstrap integration with the most popular plugin that enhances the possibilities of standard tables.

Table pagination

Pagination is a simple navigation which lets you split a huge amount of content within the tables into smaller parts.

Table search

The MDBootstrap search box enables super fast searching through all the table data.

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

Performance

trackBy

If you use ngFor directive to generate table cells, Angular by default can't keep track of items in the list and doesn't know which items have been added or removed. Thanks to the trackBy method, it's possible to re-render only the nodes that have changed and to minimize changes in the DOM tree. 

        
            
          <table id="tableSortExample" mdbTable class="z-depth-1">
            <thead>
              <tr>
                <th
                  *ngFor="let head of headElements; let i = index"
                  aria-controls="tableSortExample"
                  scope="col"
                  [mdbTableSort]="elements"
                  [sortBy]="headElements[i]"
                >
                  {{ head | titlecase }}
                  <mdb-icon fas icon="sort"></mdb-icon>
                </th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let el of elements; trackBy: trackByFn; let i = index">
                <th scope="row">{{ el.id }}</th>
                <td>{{ el.first }}</td>
                <td>{{ el.last }}</td>
                <td>{{ el.handle }}</td>
              </tr>
            </tbody>
          </table>
        
        
    
        
            
          import { Component, OnInit } from '@angular/core';

          @Component({
            selector: 'app-root',
            templateUrl: './app.component.html',
            styleUrls: ['./app.component.scss']
          })
          export class AppComponent implements OnInit {

            elements: any = [];
            headElements = ['id', 'first', 'last', 'handle'];

            ngOnInit() {
              for (let i = 1; i <= 10000; i++) {
                this.elements.push({ id: i, first: 'User ' + i, last: 'Name ' + i, handle: 'Handle ' + i });
              }
            }

            trackByFn(index: number) {
              return index;
            }
          }

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. 

        
            
          import { WavesModule, TableModule, IconsModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { WavesModule, TableModule, IconsModule } from 'angular-bootstrap-md';
Import Example Modules List

Directive

MdbTableSortDirective

Selector: mdbTableSort

Type: MdbTableSortDirective

Inputs

Name Type Default Description Example
mdbTableSort Array<any> null It binds the array that contains the table data to the name of the Directive. This binding is required for sorting to be possible.. [mdbTableSort]="elements"
sortBy string ' ' It binds the key after which sorting is to take place. Required for sorting operation. The key must be named the same as property in the source array of table elements. It doesn't matter if the key is written in lowercase or uppercase. [sortBy]="headElements[i]"

Outputs

Name Type Description Example
sortEnd EventEmitter<any[]> Emits the modified source array (after sorting). (sortEnd)="onSortEnd($event)"
sorted EventEmitter<SortedData[]> Emits the modified source array (after sorting), sort order and sort field. (sorted)="onSort($event)"