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 Live Example


        
          
            
              {{head}}
                
              
            
          
          
            
              {{el.id}}
              {{el.first}}
              {{el.last}}
              {{el.handle}}

{{head}}
{{el.id}}	{{el.first}}	{{el.last}}	{{el.handle}}


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

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