Custom string filtering in datagrid clarity

Question

I am trying to generate a clarity data-grid by a json config.

    values:any = {
    columns:[
        {
            id:'name',
            type:'text',
            value:'Name',
            isFilterable:true,
            inputs:{}
        },
        {
            id:'class',
            type:'select',
            value:'Class',
            isFilterable:false,
            inputs:{
                values:['COE','SEM','MEC'],
                selectModel:'hello'
            }
        },
        {
            id:'play',
            type:'text',
            value:'Play',
            isFilterable:false,
            inputs:{}
        },
        {
            id:'status',
            type:'text',
            value:'Status',
            isFilterable:true,
            inputs:{}
        }
    ],
    rows:[
        {
            name:{type:'text',inputs:{},value:'Varun'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Arsh'},
            class:{type:'text',inputs:{},value:'SEM'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Pending'}
        },
        {
            name:{type:'text',inputs:{},value:'Arjun'},
            class:{type:'text',inputs:{},value:'MEC'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Rishab'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Rejected'}
        },
        {
            name:{type:'text',inputs:{},value:'Appy'},
            class:{type:'text',inputs:{},value:'SEM'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Varun'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Done'}
        },
        {
            name:{type:'text',inputs:{},value:'Arka'},
            class:{type:'text',inputs:{},value:'COE'},
            play:{
                type:'modal',
                inputs:{
                    modalText:'Play',
                    modalTitle:'Playing',
                    modalBody:'Tired now'
                },
                value:''
            },
            status:{type:'text',inputs:{},value:'Pending'}
        },
    ],
    footer:{
        pageSizeList:[5,10,15,20],
        item:'students'
    }
}

My html code is as

    <clr-dg-column *ngFor="let column of columns">
    <div [ngSwitch] = "column.type">
        <div *ngSwitchCase="'text'">
            {{column.value}}
            <clr-dg-string-filter (click)="gridFilter.columnId=column.id" *ngIf="column.isFilterable" [clrDgStringFilter]="gridFilter"></clr-dg-string-filter>
        </div>
        <div *ngSwitchCase="'select'">
            <lcm-select-box [values]="column.inputs.values"
            [selectModel]="column.inputs.selectModel"></lcm-select-box>
        </div>
    </div>
</clr-dg-column>
<clr-dg-row *clrDgItems="let row of rows">
    <clr-dg-cell *ngFor="let column of columns">
        <div [ngSwitch]="row[column.id].type">
            <div *ngSwitchCase="'text'">
                {{row[column.id].value}}
            </div>
            <div *ngSwitchCase="'modal'">
                <lcm-modal [modalText]="row[column.id].inputs.modalText" 
                [modalTitle]="row[column.id].inputs.modalTitle" 
                [modalBody]="row[column.id].inputs.modalBody"></lcm-modal>
            </div>
        </div>
    </clr-dg-cell>
</clr-dg-row>

And finally my gridFilter is

class GridFilter implements StringFilter<any>{
    columnId;
    accepts(row: any, search: string):boolean {
        console.log(row);
        console.log(search);
        console.log(this.columnId);
        console.log(row[this.columnId].value);
        return row[this.columnId].value.toLowerCase().indexOf(search)>=0;
    }
}

Now the problem is since I cannot use clrDgField for automatic filtering since the properties of rows are objects instead of a string.

So to overcome that I made a custom filter which filters on the basis of the value of the row object.

The problem is it works fine when I apply only filter on a single column but for filters on two columns it fails and shows no result.

Here is the original image of the grid

This is when I apply a single filter

This happens when filters are applied on two columns

Answer 1

As the documentation says,

You can bind to as deep a property as you want in your model, using a standard dot-separated syntax: [clrDgField]="'my.deep.property'"

So in your case, you could entirely bypass custom filters and simply bind [clrDgField]="column.id + '.value'".

As to why your custom filters are failing, it's hard to investigate without a running example, screenshots don't convey enough information.