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


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

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


import { MdbTableService } from 'PATH-TO-MDB-ANGULAR';

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'];

  searchText: string = '';
  previous: string;

  constructor(private tableService: MdbTableService) { }


  ngOnInit() {
    for (let i = 1; i <= 10; i++) {
      this.elements.push({ id: i.toString(), first: 'Wpis ' + i, last: 'Last ' + i, handle: 'Handle ' + i });
    }

    this.tableService.setDataSource(this.elements);
    this.elements = this.tableService.getDataSource();
    this.previous = this.tableService.getDataSource();
  }

  searchItems() {
    const prev = this.tableService.getDataSource();

    if (!this.searchText) {
      this.tableService.setDataSource(this.previous);
      this.elements = this.tableService.getDataSource();
    }

    if (this.searchText) {
      this.elements = this.tableService.searchLocalDataBy(this.searchText);
      this.tableService.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