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
{{data.id}}
{{data.firstName}}
{{data.lastName}}
{{data.username}}
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'