Angular Bootstrap table search

Filter/Search feature lets you find desired information in table data. Use the search input field to type name, number value or that word you're looking for and the searching feature will filter the results for you.


Basic example Live Example

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

<div class="card">
  <div class="card-body">

    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-md-12">

        <div class="md-form">
          <input type="search" [(ngModel)]="searchText" id="search" class="form-control" mdbInputDirective [mdbValidate]="false">
          <label for="search">Search data</label>
        </div>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->

    <!--Table-->
    <table class="table table-striped">

      <!--Table head-->
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <!--Table head-->

      <!--Table body-->
      <tbody>
        <tr *ngFor="let data of search()">
          <th scope="row">{{data.id}}</th>
          <td>{{data.firstName}}</td>
          <td>{{data.lastName}}</td>
          <td>{{data.username}}</td>
        </tr>
      </tbody>
      <!--Table body-->
    </table>
    <!--Table-->

  </div>
</div>
        

import { Component, OnInit, HostListener } from '@angular/core';

@Component({
  selector: 'table-search',
  templateUrl: './table-search.component.html',
  styleUrls: ['./table-search.component.css']
})
export class TableSearchComponent {

  searchText: string;
  tableData = [
    { id: '1', firstName: 'Mark', lastName: 'Otto', username: '@mdo' },
    { id: '2', firstName: 'Jacob', lastName: 'Thornton', username: '@jcox' },
    { id: '3', firstName: 'Larry', lastName: 'Last', username: '@larry' },
    { id: '4', firstName: 'John', lastName: 'Doe', username: '@johny' },
    { id: '5', firstName: 'Zigi', lastName: 'Kiwi', username: '@zk' },
    { id: '6', firstName: 'Beatrice', lastName: 'Selphie', username: '@bsl' },
  ];

  filterIt(arr, searchKey) {
    return arr.filter((obj) => {
      return Object.keys(obj).some((key) => {
        return obj[key].includes(searchKey);
      });
    });
  }

  search() {
    if (!this.searchText) {
      return this.tableData;
    }
    if (this.searchText) {
      return this.filterIt(this.tableData, this.searchText);
    }
  }
}
        

API Reference:

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.

API Reference for MDB Angular Tables:
// MDB Angular Pro
import { InputsModule, WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { InputsModule, WavesModule  } from 'angular-bootstrap-md'
// Forms Module
import { FormsModule } from '@angular/forms'