angular-5-data-table
angular-5-data-table copied to clipboard
ggmod
Filtering concept in angular-5-data-table?
Can we use filtering concept in angular-5-data-table?Please help us.
I just want to second this request. I've tried many data tables for Angular, and this is the only that I was able to get working without issues. Unfortunately I must be able to filter the data set using Angular pipes (or some other method) or I can't use this. If there is a simple solution, please post. If not, at least let us know so we can go find some other solution. Thanks!
I tried lodash filter pipe concept. its working but we need to do some customization. Please see my code Data-filter-pipe.ts import * as _ from "lodash"; import {Pipe, PipeTransform} from "@angular/core"; @Pipe({ name: 'dataFilter', pure: false }) export class DataFilterPipe implements PipeTransform { transform(value: any, input: string, searchableList: any) { if (input) { input = input.toLowerCase(); return value.filter(function (el: any) { var isTrue = false; for (var k in searchableList) { if (el[searchableList[k]].toLowerCase().indexOf(input) > -1) { isTrue = true; } if (isTrue) { return el } } }) } return value; } } Then we need to add input search box to table.html under data-table -> components ->table.html folder
Table.ts import { Component, Input, Output, EventEmitter, ContentChildren, QueryList, TemplateRef, ContentChild, ViewChildren, OnInit,Pipe,PipeTransform } from '@angular/core'; import {DataFilterPipe} from "../data-filter.pipe"; @Pipe({ name:'dataFilter', pure: false }) export class DataTable implements DataTableParams, OnInit { @Input() searchableList=[]; private _items: any[] = []; } Test-component.ts export class testcompaonent implements OnInit { searchableList=[]; ngOnInit(){ this.searchableList=[‘column1’,’column2’]; } }
Hi prakashkaruppiah,
Can you give me the complete code of your code for filtering.
Thank you
dataFilterpipe.ts
import * as _ from "lodash"; import {Pipe, PipeTransform} from "@angular/core";
@Pipe({ name: 'dataFilter', pure: false })
export class DataFilterPipe implements PipeTransform {
finalValue:any;
startvalue:boolean=false;
transform(value: any, input: string, searchableList: any) {
if(value!=undefined && value!=null && value!=0 && this.startvalue==false)
{
this.startvalue=true;
this.finalValue=value;
}
if (input!="" && input !=null && input !=undefined) {
input = input.toLowerCase();
return this.finalValue.filter(function (el: any) {
var isTrue = false;
for (var k in searchableList) {
if(el[searchableList[k]]!=null)
{
if (el[searchableList[k]].toLowerCase().indexOf(input) > -1) {
isTrue = true;
}
if (isTrue) {
return el
}
}
}
})
}
return value;
}
}
table.html
tableComponent.ts
import { Component, Input, Output, EventEmitter, ContentChildren, QueryList, TemplateRef, ContentChild, ViewChildren, OnInit,Pipe,PipeTransform } from '@angular/core'; import { DataTableColumn } from './column'; import { DataTableRow } from './row'; import { DataTableParams, RowCallback, DataTableTranslations, defaultTranslations } from './types'; import {DataFilterPipe} from "../data-filter.pipe";
@Pipe({ name:'dataFilter', pure: false })
@Component({ selector: 'data-table', templateUrl: './table.html', styleUrls: ['./table.css'] }) export class DataTable implements DataTableParams, OnInit { @Input() searchableList=[]; }
Test.Component.html
<data-table id="films-Grid" ### [searchableList]="searchableList" [items]="Items" [itemCount]="TotalItemCount" (reload)="reload($event)" (selectColumnproperty)="onSelectColumn($event)"
(rowClick)="rowClick($event)" [limit]="10" [sortBy]="'Code'" [sortAsc]="false" [selectColumn]="true"
[multiSelect]="false" [substituteRows]="false" [expandableRows]="false" [translations]="translations"
[indexColumnHeader]="'#'" [selectOnRowClick]="false" [rowTooltip]="rowTooltip">
<data-table-column [property]="'PI_Id'" [header]="'PI_Id'" [sortable]="false" [visible]="false" [columnSelect]="false">
</data-table-column>
<data-table-column [property]="'PI_Number'" [header]="'PI Number'" [sortable]="true" [width]="90" [visible]="APINumber">
</data-table-column>
Test.Component.ts
reload(params) { this.DataResource.query(params).then(Items => this.Items = Items); this.DataResource.count().then(count => this.TotalItemCount = count);
this.searchableList = ['PI_Number','ApprovedStatus'];
}