I am using filters in the cols of an ng2 smart table in an angular 5 project. The following code is working correctly.
columns:
service_start_date: {
title: "DOS",
filter: true,
sort: true
},
However, when the cell is a custom Component of link type, this is not working. I tried a custom filter with filterFunction(). That also did not work.
columns: {
id: {
title: "Enc #",
type: "custom",
renderComponent: LinkRenderComponent,
filter: true,
sort: true,
filterFunction(cell?: any, search?: string): boolean {
if (cell === search || search === '') {
return true;
} else {
return false;
}
}
},
This is my LinkRenderComponent's ts file.
export class LinkRenderComponent implements ViewCell, OnInit {
constructor(
private router: Router
) { }
renderValue: string;
renderText: string;
hrefValue : string;
@Input() value: string | number;
@Input() rowData: any;
ngOnInit() {
this.renderValue = this.rowData.encounter_procedure_id;
this.renderText = this.rowData.encounter_id;
this.hrefValue = '/home/ar-report/' ;
}
}
I understand I may have to make it work in this file. Where in this file do I make it work? How do I pass to this file the value in the row header's text filter? This seems configured to take as input the value in the cell and the value set that is the row.
No, it does not work for any custom property (i.e. not a basic one). There is a bug here: https://github.com/akveo/ng2-smart-table/blob/master/src/ng2-smart-table/lib/data-source/local/local.filter.ts#L11 that feeds "" as cell value to the filterFunction for any non-basic property.
What I did was hacking the component (link above) like this:
return data.filter(function (el) {
//var value = typeof el[field] === 'undefined' || el[field] === null ? '' : el[field];
return filter.call(null, el, search);
});
and passing the whole element to the filter. Then, I have the full content of the item in the filterFunction. And works well for me.