Having trouble implementing a filter option in ngx-datatables for all columns. I've written the code but it's not functioning correctly. Can anyone help me identify where I went wrong and find solutions?
app.component.html:
<label> Name </label>
<input
#name
id="search"
type="text"
class="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="basic-addon1"
/>
<label> Company </label>
<input
#company
id="search"
type="text"
class="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="basic-addon1"
/>
<label> Date </label>
<input
#date
id="search"
type="text"
class="form-control"
placeholder="Search"
aria-label="Search"
aria-describedby="basic-addon1"
/>
<button (click)="updateTable()"> Search </button>
<ngx-datatable #table class="bootstrap ngx-datatable" [columns]="columns" [rows]="rows" [columnMode]="'force'"
[headerHeight]="35" [rowHeight]="'auto'" [footerHeight]="50" [limit]="10">
</ngx-datatable>
app.component.ts:
updateTable() {
let filterName = this.name.nativeElement.value
.toString()
.toLowerCase()
.trim();
let filterCompany = this.company.nativeElement.value
.toString()
.toLowerCase()
.trim();
let filterDate = this.date.nativeElement.value
.toString()
.toLowerCase()
.trim();
this.rows = this.filteredData.filter(item => {
for (let i = 0; i < this.columnsWithSearch.length; i++) {
var colValue = item[this.columnsWithSearch[i]];
if (
!filterName ||
!filterCompany ||
!filterDate ||
(!!colValue &&
colValue
.toString()
.toLowerCase()
.indexOf(filterName) !== -1)
) {
return true;
}
}
});
}