I currently have an Angular ngx-datatable that lacks support for filtering by column. My goal is to implement an input filter for each column (which can be strings, multiple choices, etc.) and then merge all these individual filters into a single one. This consolidated filter will allow me to retrieve data using RxJS from the backend.
Here is what I have achieved so far:
Below is the filter component integrated into every column header:
<div class="input-group mb">
<div class="input-group-addon">
<span class="input-group-text" id="search-addon"><em class="icon-magnifier"></em></span>
</div>
<input aria-describedby="search-addon" id="order_id" aria-label="Customer" placeholder="Search" class="form-control" type="text" (keyup)='updateFilter($event)'>
</div>
The update filter function:
updateFilter(event) {
let columnName = event.currentTarget.id;
const val = event.target.value.toString().toLowerCase();
const filteredData = this.temp.filter(function(d) {
return d[columnName].toString().toLowerCase().indexOf(val) !== -1 || !val;
});
this.rows= filteredData;
this.table.offset = 0;
}
This method effectively filters data for each individual column. However, my challenge lies in combining all these filters and initiating observation of the API response. How can I achieve this?