<!DOCTYPE html>
<html>
<head>
<title>Angular 4 - PrimeNG Datatable Custom filters</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
<link rel="stylesheet" href="https://unpkg.com/primeng@4.0.0-rc.2/resources/themes/omega/theme.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://unpkg.com/primeng@4.0.0-rc.2/resources/primeng.min.css" />
<link rel="stylesheet" href="https://unpkg.com/dragula@3.7.2/dist/dragula.css" crossorigin="anonymous" />
</head>
<body>
<my-app>
Loading...
</my-app>
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.9/Reflect.js"></script>
<script src="https://unpkg.com/zone.js@0.8.5/dist/zone.js"></script>
<script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
<script src="https://unpkg.com/typescript@2.2.0/lib/typescript.js"></script>
<script src="config.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</body>
</html>
/* Styles go here */
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true,
experimentalDecorators: true
},
map: {
app: "./src",
'@angular/core': 'npm:@angular/core@4.0.0/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common@4.0.0/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler@4.0.0/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser@4.0.0/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic@4.0.0/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http@4.0.0/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router@4.0.0/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms@4.0.0/bundles/forms.umd.js',
'@angular/animations': 'npm:@angular/animations@4.0.0/bundles/animations.umd.js',
'@angular/core/testing': 'npm:@angular/core@4.0.0/bundles/core-testing.umd.js',
'@angular/common/testing': 'npm:@angular/common/bundles@4.0.0/common-testing.umd.js',
'@angular/compiler/testing': 'npm:@angular/compiler@4.0.0/bundles/compiler-testing.umd.js',
'@angular/platform-browser/testing': 'npm:@angular/platform-browser@4.0.0/bundles/platform-browser-testing.umd.js',
'@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic@4.0.0/bundles/platform-browser-dynamic-testing.umd.js',
'@angular/http/testing': 'npm:@angular/http@4.0.0/bundles/http-testing.umd.js',
'@angular/router/testing': 'npm:@angular/router@4.0.0/bundles/router-testing.umd.js',
'rxjs': 'npm:rxjs@5.1.0',
'lodash': 'npm:lodash@4.17.4/',
'primeng': 'npm:primeng@4.1.2/primeng.js'
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
},
rxjs: {
defaultExtension: 'js'
},
lodash: {
defaultExtension: 'js'
},
primeng: {
defaultExtension: 'js'
}
},
paths: {
'npm:': 'https://unpkg.com/'
}
});
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { PickListMenuComponent } from 'src/pick-list-menu.component';
import { FilterComponent } from 'src/filter.component';
import { DataTableModule,
SharedModule,
MultiSelectModule,
OverlayPanelModule,
ListboxModule
} from 'primeng';
@NgModule({
imports: [
BrowserModule, CommonModule, FormsModule, DataTableModule,
SharedModule,
MultiSelectModule,
OverlayPanelModule,
ListboxModule
],
declarations: [
AppComponent,
PickListMenuComponent,
FilterComponent
],
providers: []
bootstrap: [ AppComponent ]
})
export class AppModule {}
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5"
}
}
//our root app component
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteParams, RouteConfig, Router, LocationStrategy, HashLocationStrategy} from '@angular2/router';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
import { Component, Input, Output, AfterViewInit, ElementRef, EventEmitter, OnChanges } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: 'src/app.component.html',
styleUrls: ['src/app.css']
})
export class AppComponent implements OnInit {
public visible: boolean = true;
public filtered: Map<string, boolean> = new Map<string, boolean>();
public filter = {
person: [],
planet: []
};
public data = [
{
planet: 'Tatooine',
person: 'Luke Skywalker'
},{
planet: 'Tatooine',
person: 'Obi-wan Kenobi'
},{
planet: 'Alderaan',
person: 'Leia Organa'
},{
planet: 'Degobah',
person: 'Master Yoda'
}
];
public people = [
{
label: 'Luke Skywalker',
value: 1
},{
label: 'Obi-wan Kenobi',
value: 2
},{
label: 'Leia Organa',
value: 3
},{
label: 'Master Yoda',
value: 4
}];
public planets = [
{
label: 'Tatooine',
value: 1
},{
label: 'Alderaan',
value: 2
},{
label: 'Degobah',
value:3
}];
constructor() {
}
ngOnInit() {
}
updateFilters($event) {
this.filters = [];
this.filtered = new Map<string, boolean>();
for (const prop in this.filter) {
if (this.filter.hasOwnProperty(prop)) {
this.filtered[prop] = this.filter[prop].length;
if (this.filter[prop].length) {
console.log(prop);
}
}
}
}
}
<div class="header">
<h2>Angular 4 - PrimeNG Datatable Custom Filters</h2>
</div>
<div class="container-fluid" style="padding-top:20px;">
<div class="row">
<div class="col-md-12">
<p-dataTable [value]="data">
<p-column field="person" header="Person" [filter]="true">
<ng-template #personFilterTemplate pTemplate="filter" let-col>
<i class="fa fa-filter" (click)="personMenu.toggle($event)" *ngIf="!filtered[col.field]"></i>
<span class="fa-stack" (click)="personMenu.toggle($event)" *ngIf="filtered[col.field]">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-filter fa-stack-1x fa-inverse"></i>
</span>
</ng-template>
</p-column>
<p-column field="planet" header="Planet" [filter]="true">
<ng-template #planetFilterTemplate pTemplate="filter" let-col>
<i class="fa fa-filter" (click)="planetMenu.toggle($event)" *ngIf="!filtered[col.field]"></i>
<span class="fa-stack" (click)="planetMenu.toggle($event)" *ngIf="filtered[col.field]">
<i class="fa fa-square fa-stack-2x"></i>
<i class="fa fa-filter fa-stack-1x fa-inverse"></i>
</span>
</ng-template>
</p-column>
</p-dataTable>
</div>
</div>
</div>
<app-pick-list-menu #personMenu [options]="people" (onChange)="updateFilters($event)" [(ngModel)]="filter.person"></app-pick-list-menu>
<app-pick-list-menu #planetMenu [options]="planets" (onChange)="updateFilters($event)" [(ngModel)]="filter.planet"></app-pick-list-menu>
<HR />
<div class="container-fluid" style="padding-top:20px;">
<div class="row">
<div class="col-md-12">
<p-dataTable [value]="data">
<p-column field="person" header="Person" [filter]="true">
<app-filter [menu]="personMenu"></app-filter>
</p-column>
<p-column field="planet" header="Planet" [filter]="true">
<app-filter [menu]="planetMenu"></app-filter>
</p-column>
</p-dataTable>
</div>
</div>
</div>
import { Directive, OnChanges, AfterViewInit, OnInit, Input, ElementRef, SimpleChange } from '@angular/core';
import { DragulaService, dragula } from 'ng2-dragula';
@Directive({ selector: '[primeDragula]' })
export class PrimeDragulaDirective implements OnChanges, OnInit, AfterViewInit {
@Input() public primeDragula: string;
@Input() public dragulaModel: any;
@Input() public dragulaOptions: any;
protected container: any;
private drake: any;
private options: any;
private el: ElementRef;
private dragulaService: DragulaService;
public constructor(el: ElementRef, dragulaService: DragulaService) {
this.el = el;
this.dragulaService = dragulaService;
}
ngOnInit(){
this.options = Object.assign({}, this.dragulaOptions);
this.container = this.el.nativeElement;
if(!this.options.initAfterView){
this.initialize();
}
}
ngAfterViewInit() {
if(this.options.initAfterView){
this.initialize();
}
}
//since we dont have access to the ngprime datatable body or table itself we need to bing laters in the angular event cycle
//Once this fires we have a tbody tag to attach to and create the drag drop area from.
//because we need to setup dragula later we needed to create our own version of the directive so we have access to the private property container.
//If ngdragula ever changes that to protected we can just extend that directive outright and override the container.
protected initialize(){
if(this.options.childContainerSelector){
this.container = this.el.nativeElement.querySelector(this.options.childContainerSelector);
this.options.mirrorContainer = this.container;
}
let bag = this.dragulaService.find(this.primeDragula);
let checkModel = () => {
if (this.dragulaModel) {
if (this.drake.models) {
this.drake.models.push(this.dragulaModel);
} else {
this.drake.models = [this.dragulaModel];
}
}
};
if (bag) {
this.drake = bag.drake;
checkModel();
this.drake.containers.push(this.container);
} else {
this.drake = dragula([this.container], this.options);
checkModel();
this.dragulaService.add(this.primeDragula, this.drake);
}
}
public ngOnChanges(changes: { dragulaModel?: SimpleChange }): void {
if (changes && changes.dragulaModel) {
if (this.drake) {
if (this.drake.models) {
let modelIndex = this.drake.models.indexOf(changes.dragulaModel.previousValue);
this.drake.models.splice(modelIndex, 1, changes.dragulaModel.currentValue);
} else {
this.drake.models = [changes.dragulaModel.currentValue];
}
}
}
}
}
import { Component, OnInit, Input, Output, ViewChild, EventEmitter, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { SelectItem } from 'primeng/primeng';
const noop = () => {
};
export const PICK_LIST_MENU_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => PickListMenuComponent),
multi: true
};
@Component({
selector: 'app-pick-list-menu',
templateUrl: 'src/pick-list-menu.component.html',
providers: [PICK_LIST_MENU_VALUE_ACCESSOR]
})
export class PickListMenuComponent implements OnInit, ControlValueAccessor {
@Input() options: SelectItem[];
@Input() defaultLabel: string;
@ViewChild('menu') menu: any;
@Output() onChange: EventEmitter<any> = new EventEmitter();
private model: any = '';
// Placeholders for the callbacks which are later provided
// by the Control Value Accessor
private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;
constructor() { }
ngOnInit() {
}
show($event, target) {
this.menu.show($event, target);
}
toggle($event, target) {
this.menu.toggle($event, target);
}
onMenuChange($event, value) {
this.onChange.emit({ originalEvent: event, value: value });
}
// get accessor
get value(): any {
return this.model;
};
// set accessor including call the onchange callback
set value(v: any) {
if (v !== this.model) {
this.model = v;
this.onChangeCallback(v);
}
}
// Set touched on blur
onBlur() {
this.onTouchedCallback();
}
// From ControlValueAccessor interface
writeValue(value: any) {
if (value !== this.model) {
this.model = value;
}
}
// From ControlValueAccessor interface
registerOnChange(fn: any) {
this.onChangeCallback = fn;
}
// From ControlValueAccessor interface
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}
}
<p-overlayPanel #menu showCloseIcon="true">
<p-listbox multiple="true" checkbox="true" [options]="options" filter="true" defaultLabel="" [(ngModel)]="value" (blur)="onBlur()"
(onChange)="onMenuChange($event, null)"></p-listbox>
</p-overlayPanel>
import { Component, OnInit, Input } from '@angular/core';
// import { OverlayPanel } from 'primeng/primeng';
@Component({
selector: 'app-filter',
templateUrl: 'src/filter.component.html'
})
export class FilterComponent implements OnInit {
// @Input() menu: OverlayPanel; failing to load through Plunker for some reason...?
@Input() menu: any;
@Input() filtered: {[field: string]: boolean};
@Input() col: any;
constructor() { }
ngOnInit() {
}
show($event) {
this.menu.show($event);
}
toggle($event) {
this.menu.toggle($event);
}
}
<ng-template pTemplate="filter" let-col>
<span class="fa-stack" (click)="toggle($event)" *ngIf="filtered[col.field]">
<i class="fa fa-square fa-stack-2x" style="color: grey"></i>
<i class="fa fa-filter fa-stack-1x fa-inverse"></i>
</span>
</ng-template>