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

HTML
TS


        <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

HTML
TS


          <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 enhancing 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

MDBootstrap search box enables super fast searching among all the data of the table.

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

// MDB Angular Free
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)"`