Rate these docs

Angular Bootstrap table sort

Angular Table sort - Bootstrap 4 & Material Design

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

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.

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

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

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, TableModule, IconsModule } from 'ng-uikit-pro-standard';

// MDB Angular Free
import { WavesModule, TableModule, IconsModule } from 'angular-bootstrap-md';
      
    

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)"