Filter your data respective to any field based on your dataset Also, identifies duplications of data & handles with single checkbox created dynamically.
|
npm i angular-filter-dropdownimport { AngularFilterDropdownModule } from 'angular-filter-dropdown';
@NgModule({
...
imports: [
...
AngularFilterDropdownModule
],
...
})<lib-angular-filter-dropdown
[tableData]="data"
[columnName]="colName"
(onCheckBoxStatusChanged)="checkboxStatusChange($event)"
(onUnselectAll)="getStatusOfUnselectedAll($event)">
</lib-angular-filter-dropdown> checkboxStatusChange(event: any){
console.log(event);
}
getStatusOfUnselectedAll(event: any){
console.log(event);
}
let data = [
{ id: 1, name: 'John Doe', age: 30, email: 'john@example.com'},
{ id: 2, name: 'Jane Doe', age: 28, email: 'jane@example.com'},
{ id: 3, name: 'Michael Smith', age: 35, email: 'michael@example.com'},
{ id: 4, name: 'Emily Johnson', age: 25, email: 'emily@example.com'},
{ id: 5, name: 'James Brown', age: 32, email: 'james@example.com'},
{ id: 6, name: 'John Doe', age: 30, email: 'john@example.com'},
{ id: 7, name: 'Jane Doe', age: 28, email: 'jane@example.com'},
{ id: 8, name: 'Michael Smith', age: 35, email: 'michael@example.com'},
{ id: 9, name: 'Emily Johnson', age: 25, email: 'emily@example.com'},
{ id: 10, name: 'James Brown', age: 32, email: 'james@example.com'}
],
let colName = "name"For identifiation of duplication of data & handles with single checkbox dynamically
Just an instance, shared piece of code below for duplication handling.
ngOnInit(){
this.replicaData = [...this.data.entries];
}
checkboxStatusChange(event: any){
let keysName = Object.keys(event);
if(event[keysName[1]] === true){
let result = this.replicaData.filter((obj: any) => obj[keysName[0]] === event[keysName[0]]);
result.forEach((element:any) => {
this.data.push(element);
this.data.sort((a: any, b: any) => a.id - b.id)
});
}else{
this.data = this.data.filter((obj: any) => obj[keysName[0]] !== event[keysName[0]]);
}
this.checkForDuplicationOfItems();
}
getStatusOfUnselectedAll(event: any){
if(event === false){
this.data = this.replicaData;
}else{
this.data = [];
}
this.checkForDuplicationOfItems();
}
checkForDuplicationOfItems(){
this.data = this.data.filter((data: any, index: number) => data.id !== (this.data[index + 1]?.id));
}| Property/Method | Type | Description |
|---|---|---|
| tableData | Array | Array of objects data/ table data |
| columnName | string | To which field, you want to add filter |
| onCheckBoxStatusChanged | method | On checkbox changes |
| onUnselectAll | method | Emits on select All or Unselect All |
- [ ] More decorative Approach in terms of CSS.
- [ ] Will come up with search functionality.
Suraj Motwani - Email: suraj.motwani1306@gmail.com
Angular Filter Dropdown is available under the MIT license. See the LICENSE file for more info.