Unable to search into custom rendered cells in Angular ng2-smart-table

Question

One side-effect of rendering a "custom" field is that the global search is no longer able to work in it. I believe this happens because the cell starts out as a json Object and then I render just one string in that object. As a consequence, the global search is unable to reach into it. I'm basically looping through a list of objects and then displaying a single property (string) from that object to display in that cell. Unfortunately, all of that text is invisible to the global search. Is there a way I can add custom rendered text to the global search? I've included the code for the rendered component:

@Component({
    selector: 'scope-renderer',
    template: `
        <ul class="list-unstyled">
            <li *ngFor="let scope of scopes">
                {{ scope.displayName }}
            </li>
        </ul>
    `
})
export class ScopeRendererComponent implements OnInit {
    @Input() rowData: any;

    scopes: Array<Scope>;

    ngOnInit() {
        this.scopes = this.rowData.scopes;
    }
}

class Scope {
    name: string;
    displayName: string;
    description: string;
    required: boolean;
    emphasize: boolean;
    showInDiscoveryDocument: boolean;
}

Answer 1

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.

filterFunction(el?: any, search?: string): boolean {          
  return true;
}

And works well for me.