ngx-datatable individual column filter

Individual filtering does not come out the box for Swimlanes ngx-datatable. There are not too many solutions out there. I have been working on filtering the column via checkboxes. If the checkbox is clicked the matching property stays visable and all other properties hide from view.

The issue I am getting is when I select multiple checkboxes (more than one) no results appear, my filters only find an individual match I think and having two checked does not satisfy the filter.

e.g. if I select "female" a female gets filtered out. Then if I select "male" the desired result is that both "female" and "male" should be shown.

DEMO - https://codesandbox.io/s/swimlane-filter-table-kjiyl

import { Component, ViewChild, TemplateRef } from "@angular/core";

@Component({
selector: "filter-demo",
template: `
<div>
<h3>
Client-side Search and Filtering
</h3>

<ngx-datatable
#table
class="material"
[columns]="columns"
[columnMode]="'force'"
[headerHeight]="100"
[footerHeight]="50"
[rowHeight]="'auto'"
[limit]="10"
[rows]="rows"
>
</ngx-datatable>

<ng-template #hdrTpl let-column="column" let-sort="sortFn">
<div (click)="sort()">{{ column.name }}</div>
<div>
<label class="small m-0 datatable-checkbox">
<input
type="checkbox"
[(ngModel)]="isFilterFemale"
(change)="doFilter()"
[ngModelOptions]="{ standalone: true }"
/>
Female
</label>
</div>
<div>
<label class="small m-0 datatable-checkbox">
<input
type="checkbox"
[(ngModel)]="isFilterMale"
(change)="doFilter()"
[ngModelOptions]="{ standalone: true }"
/>
Male
</label>
</div>
</ng-template>
</div>
`
})
export class FilterBarComponent {
// @ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;
@ViewChild("hdrTpl", { static: true }) hdrTpl: TemplateRef<any>;

rows = [];

temp = [];

columns = [];
isFilterFemale = false;
isFilterMale = false;
constructor() {
this.fetch(data => {
// cache our list
this.temp = [...data];

// push our inital complete list
this.rows = data;
});
}
ngOnInit() {
this.columns = [
{ name: "name", prop: "name", headerTemplate: this.hdrTpl }
];
this.doFilter();
}
fetch(cb) {
const req = new XMLHttpRequest();
req.open("GET", "assets/data.json");

req.onload = () => {
cb(JSON.parse(req.response));
};

req.send();
}

private doFilter() {
this.rows = this.temp
.filter(x => this.femaleFilter(x.classification.code))
.filter(x => this.maleFilter(x.classification.code));
}

private femaleFilter(classificationCode) {
if (!this.isFilterFemale) {
return true;
} else {
if (classificationCode === "FMALE") {
return true;
} else {
return false;
}
}
}

private maleFilter(classificationCode) {
if (!this.isFilterMale) {
return true;
} else {
if (classificationCode === "MALE") {
return true;
} else {
return false;
}
}
}
}

Continue reading...