column-level-filter v0.1.1

For table apply column level search or filteration .

Supports Angular 6 , angular 7 , Angular 5 , Angular 8 .

Column Level Filter

@ Take out the function code saved in index.ts after installing

Here's how to to use it

HTML

<table>
<thead>
    <th *ngFor="let head of table.headerContent">
    {{head.label}}
    <input type="text" [(ngModel)]="columnFilterSearch[head.key]" (ngModelChange)="filterData()"/>
    </th>
</thead>
<tbody>
    <tr *ngFor="let body of table.bodyContent">
    <td *ngFor="let head of table.headerContent">
        {{body[head.key]['name']}}
    </td>
    </tr>
</tbody>
</table>

TS File

import { ColumnLevelFilter } from 'column-level-filter';

export class AppComponent {

constructor(
    private _columnFilter: ColumnLevelFilter) {    
}

columnFilterSearch={};
searchText: string;
table = {
    headerContent:[
        {
            key:'a',
            label:'A'
        },
        {
            key:'b',
            label:'B'
        }
    ],
    bodyContent:[
        {
            "a":{name:"assasa"},
            "b":{name:"cvvv"}
        },
        {
            "a":{name:"assasa"},
            "b":{name:"cvvcv"}
        },
        {
            "a":{name:"cssasa"},
            "b":{name:"cvvcv"}
        },
        {
            "a":{name:"dssasa"},
            "b":{name:"cvvcv"}
        },
        {
            "a":{name:"essasa"},
            "b":{name:"cvvcv"}
        },
        {
            "a":{name:"fssasa"},
            "b":{name:"cvvcv"}
        }
    ]
}

filterData(){
    let result =  this._columnFilter.transform(this.table.bodyContent,this.searchText,this.columnFilterSearch,this.table.headerContent,'name')
    console.log('result is ',result);
}

NOTE :

Some Changes are in progress . Till then you can Take out the function code saved in index.ts after installing .