Angular Bootstrap table search

Angular Table search - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

Angular Bootstrap table search is a component which is super fast and easy to use searching functionality dedicated to our tables.

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

Basic example

Live example 
        
            
          <div class="container">
            <div class="row">
              <div class="col-md-12 mx-auto">
                <div class="md-form">
                  <input
                    type="text"
                    [(ngModel)]="searchText"
                    class="form-control"
                    id="search"
                    mdbInput
                  />
                  <label for="search">Search</label>
                </div>
              </div>
            </div>
            <table mdbTable class="z-depth-1">
              <thead>
                <tr>
                  <th
                    *ngFor="let head of headElements; let i = index"
                    scope="col"
                  >
                    {{ head }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let el of elements; let i = index">
                  <th scope="row">{{ el.id }}</th>
                  <td class="red-text">{{ el.first }}</td>
                  <td>{{ el.last }}</td>
                  <td>{{ el.handle }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        
        
    
        
            
          import {Component, HostListener, ViewChild} from '@angular/core';
          import {MdbTableDirective} from 'PATH-TO-MDB-ANGULAR';
          
          @Component({
            selector: 'search-table',
            templateUrl: './search-table.component.html',
            styleUrls: ['./search-table.component.scss']
          })
          export class SearchTableComponent {
            @ViewChild(MdbTableDirective, {static: true}) mdbTable: MdbTableDirective;

            elements: any = [];
            headElements = ['ID', 'First', 'Last', 'Handle'];
            searchText: string = '';
            previous: string;
        
            constructor() { }
        
            @HostListener('input') oninput() {
              this.searchItems();
            }
        
            ngOnInit() {
              for (let i = 1; i <= 10; i++) {
                this.elements.push({
                  id: i.toString(),
                  first: 'Wpis ' + i,
                  last: 'Last ' + i,
                  handle: 'Handle ' + i
                });
              }
              this.mdbTable.setDataSource(this.elements);
              this.previous = this.mdbTable.getDataSource();
            }
        
            searchItems() {
              const prev = this.mdbTable.getDataSource();
              if (!this.searchText) {
                this.mdbTable.setDataSource(this.previous);
                this.elements = this.mdbTable.getDataSource();
              }
              if (this.searchText) {
                this.elements = this.mdbTable.searchLocalDataBy(this.searchText);
                this.mdbTable.setDataSource(prev);
              }
            }
          }

Search Data By Multiple Fields

Using the searchLocalDataByMultipleFields(searchText: string, keys: string[]) you can filter table across multiple columns simultaneously

Live example 
        
            
          <div class="container">
            <div class="row">
              <div class="col-md-12 mx-auto">
                <div class="md-form">
                  <input
                    type="text"
                    [(ngModel)]="searchText"
                    class="form-control"
                    id="search"
                    mdbInput
                  />
                  <label for="search">Search</label>
                </div>
              </div>
            </div>
            <table mdbTable class="z-depth-1">
              <thead>
                <tr>
                  <th
                    *ngFor="let head of headElements; let i = index"
                    scope="col"
                  >
                    {{ head }}
                  </th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let el of elements; let i = index">
                  <th scope="row">{{ el.id }}</th>
                  <td class="red-text">{{ el.first }}</td>
                  <td>{{ el.last }}</td>
                  <td>{{ el.handle }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        
        
    
        
            
          import {Component, HostListener, ViewChild} from '@angular/core';
          import {MdbTableDirective} from 'PATH-TO-MDB-ANGULAR';
          
          @Component({
            selector: 'search-table',
            templateUrl: './search-table.component.html',
            styleUrls: ['./search-table.component.scss']
          })
          export class SearchTableComponent {
            @ViewChild(MdbTableDirective, {static: true}) mdbTable:MdbTableDirective;
            
            elements: any = [];
            headElements = ['ID', 'First', 'Last', 'Handle'];
            searchText: string = '';
            previous: string;
        
            constructor() { }
        
            @HostListener('input') oninput() {
              this.searchItems();
            }
        
            ngOnInit() {
              for (let i = 1; i <= 10; i++) {
                this.elements.push({
                  id:i.toString(),
                  first: 'Wpis' + (Math.floor(Math.random() * i * 10)).toString(),
                  last: 'Last' + (Math.floor(Math.random() * i * 10)).toString(),
                  handle: 'Handle' + (Math.floor(Math.random() * i * 10)).toString()
                });
              }
              this.mdbTable.setDataSource(this.elements);
              this.previous = this.mdbTable.getDataSource();
            }
        
            searchItems() {
              const prev = this.mdbTable.getDataSource();
              if (!this.searchText) {
                this.mdbTable.setDataSource(this.previous);
                this.elements = this.mdbTable.getDataSource();
              }
              if (this.searchText) {
                this.elements = this.mdbTable.searchLocalDataByMultipleFields(this.searchText, ['first', 'last']);
                this.mdbTable.setDataSource(prev);
              }
            }
          }

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 styles

Table styles component shows you how you can customize your existing tables.

Table responsive

Angular Bootstrap responsive tables allows you to use your tables on mobile devices

Table sort

This functionality lets you sort the data of the tables according to any specific columns.

Table editable

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

Table pagination

Table with pagination allows you to paginate through your data in the tables

Angular Datatables - 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, InputsModule } from 'ng-uikit-pro-standard';
        
        
    
        
            
          import { WavesModule, TableModule, InputsModule } from 'angular-bootstrap-md';
        
        
    
        
            
          import { FormsModule } from '@angular/forms';
Import Example Modules List

Directive

MdbTableDirective

Selector: mdbTable

Export as: mdbTable

Type: MdbTableDirective

Methods

Name Description Example
setDataSource(source: Array<any>) It is used to indicate service an array that stores the data contained in the table. The use of this method is required for the use of results filtering. this.mdbTable.setDataSource(this.elements)
getDataSource() The method returns an array that has been indicated as the data source of the table. The use of this method is required to filter the results. this.elements = this.mdbTable.getDataSource()
searchLocalDataBy(searchText: string) The method starts filtering the source array by the character provided as its parameter. The use of this method is required to be able to filter the results. this.elements = this.mdbTable.searchLocalDataBy(this.searchText)
searchLocalDataByFields(searchText, []) The method works like searchLocalDataBy(searchText: string), further there is possibility to provide fields to be filtered. this.elements = this.mdbTable.searchLocalDataByFields(searchText: string, ['name', 'age'])
searchLocalDataByMultipleFields(searchText, []?) The method works like searchLocalDataBy(searchText: string), further there is possibility to provide multiple fields to be filtered. this.elements = this.mdbTable.searchLocalDataByFields(searchText: string, ['name', 'age']?)