Rate this docs

Table search

Angular Bootstrap table search

Angular Bootstrap table search are a component which are 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="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);
    }
  }
}
        

Advanced table options

For advanced options of the tables have a look at specific documentation pages listed below.

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.

                    
              // MDB Angular Pro
              import { WavesModule } from 'ng-uikit-pro-standard';

              // MDB Angular Free
              import { WavesModule } from 'angular-bootstrap-md';
              
              // Angular Forms
              import { FormsModule } from '@angular/forms';