primeng 11.0.0-rc.1 → 11.1.0

package/fesm2015/primeng-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"primeng-steps.js","sources":["../../../src/app/components/steps/steps.ts","../../../src/app/components/steps/primeng-steps.ts"],"sourcesContent":["import {NgModule,Component,Input,Output,EventEmitter,ChangeDetectionStrategy, ViewEncapsulation, OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MenuItem} from 'primeng/api';\nimport {RouterModule, Router, ActivatedRoute} from '@angular/router';\nimport { Subscription } from 'rxjs';\n\n@Component({\n    selector: 'p-steps',\n    template: `\n        <div [ngClass]=\"{'p-steps p-component':true,'p-readonly':readonly}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ul role=\"tablist\">\n                <li *ngFor=\"let item of model; let i = index\" class=\"p-steps-item\" #menuitem [ngStyle]=\"item.style\" [class]=\"item.styleClass\" role=\"tab\" [attr.aria-selected]=\"i === activeIndex\" [attr.aria-expanded]=\"i === activeIndex\"\n                    [ngClass]=\"{'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i))}\">\n                    <a *ngIf=\"isClickableRouterLink(item); else elseBlock\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" role=\"presentation\" [routerLinkActive]=\"'p-menuitem-link-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"p-menuitem-link\" \n                        (click)=\"itemClick($event, item, i)\" (keydown.enter)=\"itemClick($event, item, i)\" [attr.target]=\"item.target\" [attr.id]=\"item.id\" [attr.tabindex]=\"item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')\"\n                        [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\" [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\">\n                        <span class=\"p-steps-number\">{{i + 1}}</span>\n                        <span class=\"p-steps-title\" *ngIf=\"item.escape !== false; else htmlLabel\">{{item.label}}</span>\n                        <ng-template #htmlLabel><span class=\"p-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\n                    </a>\n                    <ng-template #elseBlock>\n                        <a [attr.href]=\"item.url\" class=\"p-menuitem-link\" role=\"presentation\" (click)=\"itemClick($event, item, i)\" (keydown.enter)=\"itemClick($event, item, i)\" [attr.target]=\"item.target\" [attr.id]=\"item.id\" \n                            [attr.tabindex]=\"item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')\">\n                            <span class=\"p-steps-number\">{{i + 1}}</span>\n                            <span class=\"p-steps-title\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{item.label}}</span>\n                            <ng-template #htmlRouteLabel><span class=\"p-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </a>\n                    </ng-template>\n                </li>\n            </ul>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./steps.css']\n})\nexport class Steps implements OnInit, OnDestroy {\n    \n    @Input() activeIndex: number = 0;\n    \n    @Input() model: MenuItem[];\n    \n    @Input() readonly: boolean =  true;\n    \n    @Input() style: any;\n        \n    @Input() styleClass: string;\n    \n    @Output() activeIndexChange: EventEmitter<any> = new EventEmitter();\n\n    constructor(private router: Router, private route:ActivatedRoute, private cd: ChangeDetectorRef) { }\n    \n    subscription: Subscription;\n\n    ngOnInit() {\n        this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());\n    }\n    \n    itemClick(event: Event, item: MenuItem, i: number) {\n        if (this.readonly || item.disabled) {\n            event.preventDefault();\n            return;\n        }\n        \n        this.activeIndexChange.emit(i);\n                \n        if (!item.url) {\n            event.preventDefault();\n        }\n        \n        if (item.command) {            \n            item.command({\n                originalEvent: event,\n                item: item,\n                index: i\n            });\n        }\n    }\n\n    isClickableRouterLink(item: MenuItem) {\n        return item.routerLink && !this.readonly && !item.disabled;\n    }\n\n    isActive(item: MenuItem, index: number) {\n        if (item.routerLink)\n            return this.router.isActive(item.routerLink, false) || this.router.isActive(this.router.createUrlTree([item.routerLink], {relativeTo: this.route}).toString(), false);\n        else    \n            return index === this.activeIndex;\n    }\n\n    ngOnDestroy() {\n        this.subscription.unsubscribe();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RouterModule],\n    exports: [Steps,RouterModule],\n    declarations: [Steps]\n})\nexport class StepsModule { }","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAoCa,KAAK;IAcd,YAAoB,MAAc,EAAU,KAAoB,EAAU,EAAqB;QAA3E,WAAM,GAAN,MAAM,CAAQ;QAAU,UAAK,GAAL,KAAK,CAAe;QAAU,OAAE,GAAF,EAAE,CAAmB;QAZtF,gBAAW,GAAW,CAAC,CAAC;QAIxB,aAAQ,GAAa,IAAI,CAAC;QAMzB,sBAAiB,GAAsB,IAAI,YAAY,EAAE,CAAC;KAEgC;IAIpG,QAAQ;QACJ,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;KAClF;IAED,SAAS,CAAC,KAAY,EAAE,IAAc,EAAE,CAAS;QAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAChC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACV;QAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC;gBACT,aAAa,EAAE,KAAK;gBACpB,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,CAAC;aACX,CAAC,CAAC;SACN;KACJ;IAED,qBAAqB,CAAC,IAAc;QAChC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC9D;IAED,QAAQ,CAAC,IAAc,EAAE,KAAa;QAClC,IAAI,IAAI,CAAC,UAAU;YACf,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;;YAEtK,OAAO,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC;KACzC;IAED,WAAW;QACP,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;KACnC;;;YAtFJ,SAAS,SAAC;gBACP,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;KAuBT;gBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aAExC;;;YAhCqB,MAAM;YAAE,cAAc;YAHwE,iBAAiB;;;0BAsChI,KAAK;oBAEL,KAAK;uBAEL,KAAK;oBAEL,KAAK;yBAEL,KAAK;gCAEL,MAAM;;MAoDE,WAAW;;;YALvB,QAAQ,SAAC;gBACN,OAAO,EAAE,CAAC,YAAY,EAAC,YAAY,CAAC;gBACpC,OAAO,EAAE,CAAC,KAAK,EAAC,YAAY,CAAC;gBAC7B,YAAY,EAAE,CAAC,KAAK,CAAC;aACxB;;;ACnGD;;;;;;"}
+{"version":3,"file":"primeng-steps.js","sources":["../../src/app/components/steps/steps.ts","../../src/app/components/steps/primeng-steps.ts"],"sourcesContent":["import {NgModule,Component,Input,Output,EventEmitter,ChangeDetectionStrategy, ViewEncapsulation, OnInit, OnDestroy, ChangeDetectorRef} from '@angular/core';\nimport {CommonModule} from '@angular/common';\nimport {MenuItem} from 'primeng/api';\nimport {RouterModule, Router, ActivatedRoute} from '@angular/router';\nimport { Subscription } from 'rxjs';\n\n@Component({\n    selector: 'p-steps',\n    template: `\n        <div [ngClass]=\"{'p-steps p-component':true,'p-readonly':readonly}\" [ngStyle]=\"style\" [class]=\"styleClass\">\n            <ul role=\"tablist\">\n                <li *ngFor=\"let item of model; let i = index\" class=\"p-steps-item\" #menuitem [ngStyle]=\"item.style\" [class]=\"item.styleClass\" role=\"tab\" [attr.aria-selected]=\"i === activeIndex\" [attr.aria-expanded]=\"i === activeIndex\"\n                    [ngClass]=\"{'p-highlight p-steps-current': isActive(item, i), 'p-disabled': item.disabled || (readonly && !isActive(item, i))}\">\n                    <a *ngIf=\"isClickableRouterLink(item); else elseBlock\" [routerLink]=\"item.routerLink\" [queryParams]=\"item.queryParams\" role=\"presentation\" [routerLinkActive]=\"'p-menuitem-link-active'\" [routerLinkActiveOptions]=\"item.routerLinkActiveOptions||{exact:false}\" class=\"p-menuitem-link\" \n                        (click)=\"itemClick($event, item, i)\" (keydown.enter)=\"itemClick($event, item, i)\" [attr.target]=\"item.target\" [attr.id]=\"item.id\" [attr.tabindex]=\"item.disabled || readonly ? null : (item.tabindex ? item.tabindex : '0')\"\n                        [fragment]=\"item.fragment\" [queryParamsHandling]=\"item.queryParamsHandling\" [preserveFragment]=\"item.preserveFragment\" [skipLocationChange]=\"item.skipLocationChange\" [replaceUrl]=\"item.replaceUrl\" [state]=\"item.state\">\n                        <span class=\"p-steps-number\">{{i + 1}}</span>\n                        <span class=\"p-steps-title\" *ngIf=\"item.escape !== false; else htmlLabel\">{{item.label}}</span>\n                        <ng-template #htmlLabel><span class=\"p-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\n                    </a>\n                    <ng-template #elseBlock>\n                        <a [attr.href]=\"item.url\" class=\"p-menuitem-link\" role=\"presentation\" (click)=\"itemClick($event, item, i)\" (keydown.enter)=\"itemClick($event, item, i)\" [attr.target]=\"item.target\" [attr.id]=\"item.id\" \n                            [attr.tabindex]=\"item.disabled||(i !== activeIndex && readonly) ? null : (item.tabindex ? item.tabindex : '0')\">\n                            <span class=\"p-steps-number\">{{i + 1}}</span>\n                            <span class=\"p-steps-title\" *ngIf=\"item.escape !== false; else htmlRouteLabel\">{{item.label}}</span>\n                            <ng-template #htmlRouteLabel><span class=\"p-steps-title\" [innerHTML]=\"item.label\"></span></ng-template>\n                        </a>\n                    </ng-template>\n                </li>\n            </ul>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./steps.css']\n})\nexport class Steps implements OnInit, OnDestroy {\n    \n    @Input() activeIndex: number = 0;\n    \n    @Input() model: MenuItem[];\n    \n    @Input() readonly: boolean =  true;\n    \n    @Input() style: any;\n        \n    @Input() styleClass: string;\n    \n    @Output() activeIndexChange: EventEmitter<any> = new EventEmitter();\n\n    constructor(private router: Router, private route:ActivatedRoute, private cd: ChangeDetectorRef) { }\n    \n    subscription: Subscription;\n\n    ngOnInit() {\n        this.subscription = this.router.events.subscribe(() => this.cd.markForCheck());\n    }\n    \n    itemClick(event: Event, item: MenuItem, i: number) {\n        if (this.readonly || item.disabled) {\n            event.preventDefault();\n            return;\n        }\n        \n        this.activeIndexChange.emit(i);\n                \n        if (!item.url) {\n            event.preventDefault();\n        }\n        \n        if (item.command) {            \n            item.command({\n                originalEvent: event,\n                item: item,\n                index: i\n            });\n        }\n    }\n\n    isClickableRouterLink(item: MenuItem) {\n        return item.routerLink && !this.readonly && !item.disabled;\n    }\n\n    isActive(item: MenuItem, index: number) {\n        if (item.routerLink)\n            return this.router.isActive(item.routerLink, false) || this.router.isActive(this.router.createUrlTree([item.routerLink], {relativeTo: this.route}).toString(), false);\n        else    \n            return index === this.activeIndex;\n    }\n\n    ngOnDestroy() {\n        this.subscription.unsubscribe();\n    }\n}\n\n@NgModule({\n    imports: [CommonModule,RouterModule],\n    exports: [Steps,RouterModule],\n    declarations: [Steps]\n})\nexport class StepsModule { }","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAoCa,KAAK;IAcd,YAAoB,MAAc,EAAU,KAAoB,EAAU,EAAqB;QAA3E,WAAM,GAAN,MAAM,CAAQ;QAAU,UAAK,GAAL,KAAK,CAAe;QAAU,OAAE,GAAF,EAAE,CAAmB;QAZtF,gBAAW,GAAW,CAAC,CAAC;QAIxB,aAAQ,GAAa,IAAI,CAAC;QAMzB,sBAAiB,GAAsB,IAAI,YAAY,EAAE,CAAC;KAEgC;IAIpG,QAAQ;QACJ,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC;KAClF;IAED,SAAS,CAAC,KAAY,EAAE,IAAc,EAAE,CAAS;QAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YAChC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO;SACV;QAED,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAE/B,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;YACX,KAAK,CAAC,cAAc,EAAE,CAAC;SAC1B;QAED,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,IAAI,CAAC,OAAO,CAAC;gBACT,aAAa,EAAE,KAAK;gBACpB,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,CAAC;aACX,CAAC,CAAC;SACN;KACJ;IAED,qBAAqB,CAAC,IAAc;QAChC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;KAC9D;IAED,QAAQ,CAAC,IAAc,EAAE,KAAa;QAClC,IAAI,IAAI,CAAC,UAAU;YACf,OAAO,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,EAAC,UAAU,EAAE,IAAI,CAAC,KAAK,EAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;;YAEtK,OAAO,KAAK,KAAK,IAAI,CAAC,WAAW,CAAC;KACzC;IAED,WAAW;QACP,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC;KACnC;;;YAtFJ,SAAS,SAAC;gBACP,QAAQ,EAAE,SAAS;gBACnB,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;KAuBT;gBACD,eAAe,EAAE,uBAAuB,CAAC,MAAM;gBAC/C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aAExC;;;YAhCqB,MAAM;YAAE,cAAc;YAHwE,iBAAiB;;;0BAsChI,KAAK;oBAEL,KAAK;uBAEL,KAAK;oBAEL,KAAK;yBAEL,KAAK;gCAEL,MAAM;;MAoDE,WAAW;;;YALvB,QAAQ,SAAC;gBACN,OAAO,EAAE,CAAC,YAAY,EAAC,YAAY,CAAC;gBACpC,OAAO,EAAE,CAAC,KAAK,EAAC,YAAY,CAAC;gBAC7B,YAAY,EAAE,CAAC,KAAK,CAAC;aACxB;;;ACnGD;;;;;;"}

package/fesm2015/primeng-table.js

@@ -1,7 +1,7 @@
 import { Injectable, EventEmitter, Component, ChangeDetectionStrategy, ViewEncapsulation, ElementRef, NgZone, ChangeDetectorRef, Input, Output, ViewChild, ContentChildren, Directive, HostListener, Optional, Renderer2, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { FilterOperator, FilterMatchMode, PrimeTemplate, TranslationKeys, PrimeNGConfig, SharedModule } from 'primeng/api';
+import { FilterOperator, FilterMatchMode, FilterService, PrimeTemplate, TranslationKeys, PrimeNGConfig, SharedModule } from 'primeng/api';
 import { PaginatorModule } from 'primeng/paginator';
 import { InputTextModule } from 'primeng/inputtext';
 import { ButtonModule } from 'primeng/button';
@@ -11,7 +11,7 @@ import { CalendarModule } from 'primeng/calendar';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { DropdownModule } from 'primeng/dropdown';
 import { DomHandler, ConnectedOverlayScrollHandler } from 'primeng/dom';
-import { ObjectUtils, FilterUtils } from 'primeng/utils';
+import { ObjectUtils } from 'primeng/utils';
 import { Subject } from 'rxjs';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
 import { trigger, transition, style, animate } from '@angular/animations';
@@ -54,11 +54,12 @@ TableService.decorators = [
     { type: Injectable }
 ];
 class Table {
-    constructor(el, zone, tableService, cd) {
+    constructor(el, zone, tableService, cd, filterService) {
         this.el = el;
         this.zone = zone;
         this.tableService = tableService;
         this.cd = cd;
+        this.filterService = filterService;
         this.pageLinks = 5;
         this.alwaysShowPaginator = true;
         this.paginatorPosition = 'bottom';
@@ -681,17 +682,19 @@ class Table {
             rangeStart -= this.first;
             rangeEnd -= this.first;
         }
+        let rangeRowsData = [];
         for (let i = rangeStart; i <= rangeEnd; i++) {
             let rangeRowData = this.filteredValue ? this.filteredValue[i] : this.value[i];
             if (!this.isSelected(rangeRowData)) {
+                rangeRowsData.push(rangeRowData);
                 this._selection = [...this.selection, rangeRowData];
                 let dataKeyValue = this.dataKey ? String(ObjectUtils.resolveFieldData(rangeRowData, this.dataKey)) : null;
                 if (dataKeyValue) {
                     this.selectionKeys[dataKeyValue] = 1;
                 }
-                this.onRowSelect.emit({ originalEvent: event, data: rangeRowData, type: 'row' });
             }
         }
+        this.onRowSelect.emit({ originalEvent: event, data: rangeRowsData, type: 'row' });
         this.selectionChange.emit(this.selection);
     }
     clearSelectionRange(event) {
@@ -891,7 +894,7 @@ class Table {
                     if (this.filters['global'] && !globalMatch && globalFilterFieldsArray) {
                         for (let j = 0; j < globalFilterFieldsArray.length; j++) {
                             let globalFilterField = globalFilterFieldsArray[j].field || globalFilterFieldsArray[j];
-                            globalMatch = FilterUtils[this.filters['global'].matchMode](ObjectUtils.resolveFieldData(this.value[i], globalFilterField), this.filters['global'].value, this.filterLocale);
+                            globalMatch = this.filterService.filters[this.filters['global'].matchMode](ObjectUtils.resolveFieldData(this.value[i], globalFilterField), this.filters['global'].value, this.filterLocale);
                             if (globalMatch) {
                                 break;
                             }
@@ -936,7 +939,7 @@ class Table {
         let filterValue = filterMeta.value;
         let filterMatchMode = filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
         let dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
-        let filterConstraint = FilterUtils[filterMatchMode];
+        let filterConstraint = this.filterService.filters[filterMatchMode];
         return filterConstraint(dataFieldValue, filterValue, this.filterLocale);
     }
     hasFilter() {
@@ -1195,7 +1198,7 @@ class Table {
                     if (newColumnWidth > 15 && nextColumnWidth > parseInt(nextColumnMinWidth)) {
                         if (this.scrollable) {
                             let scrollableView = this.findParentScrollableView(column);
-                            let scrollableBodyTable = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-body table') || DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-body table');
+                            let scrollableBodyTable = DomHandler.findSingle(scrollableView, '.p-datatable-scrollable-body table') || DomHandler.findSingle(scrollableView, '.p-datatable-virtual-scrollable-body table');
                             let scrollableHeaderTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-header-table');
                             let scrollableFooterTable = DomHandler.findSingle(scrollableView, 'table.p-datatable-scrollable-footer-table');
                             let resizeColumnIndex = DomHandler.index(column);
@@ -1559,7 +1562,7 @@ class Table {
             }
             if (this.scrollable) {
                 let headerCols = DomHandler.find(this.containerViewChild.nativeElement, '.p-datatable-scrollable-header-table > colgroup > col');
-                let bodyCols = DomHandler.find(this.containerViewChild.nativeElement, '.p-datatable-scrollable-body table > colgroup > col');
+                let bodyCols = this.virtualScroll ? DomHandler.find(this.containerViewChild.nativeElement, 'cdk-virtual-scroll-viewport table > colgroup > col') : DomHandler.find(this.containerViewChild.nativeElement, '.p-datatable-scrollable-body table > colgroup > col');
                 headerCols.map((col, index) => col.style.width = widths[index] + 'px');
                 bodyCols.map((col, index) => col.style.width = widths[index] + 'px');
             }
@@ -1675,14 +1678,15 @@ Table.decorators = [
                 providers: [TableService],
                 changeDetection: ChangeDetectionStrategy.Default,
                 encapsulation: ViewEncapsulation.None,
-                styles: [".p-datatable{position:relative}.p-datatable table{border-collapse:collapse;table-layout:fixed;width:100%}.p-datatable .p-sortable-column{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-badge,.p-datatable .p-sortable-column .p-sortable-column-icon{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{align-items:center;display:inline-flex;justify-content:center}.p-datatable-auto-layout>.p-datatable-wrapper{overflow-x:auto}.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable-wrapper{position:relative}.p-datatable-scrollable-footer,.p-datatable-scrollable-header{overflow:hidden}.p-datatable-scrollable-body{overflow:auto;position:relative}.p-datatable-scrollable-body>table>.p-datatable-tbody>tr:first-child>td{border-top:0}.p-datatable-virtual-table{position:absolute}.p-datatable-frozen-view .p-datatable-scrollable-body{overflow:hidden}.p-datatable-frozen-view>.p-datatable-scrollable-body>table>.p-datatable-tbody>tr>td:last-child{border-right:0}.p-datatable-unfrozen-view{position:absolute;top:0}.p-datatable-flex-scrollable,.p-datatable-flex-scrollable .p-datatable-scrollable-view,.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper{display:flex;flex:1;flex-direction:column;height:100%}.p-datatable-flex-scrollable .p-datatable-scrollable-body,.p-datatable-flex-scrollable .p-datatable-virtual-scrollable-body{flex:1}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-tbody>tr>td,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-thead>tr>th{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{border:1px solid transparent;cursor:col-resize;display:block;height:100%;margin:0;padding:0;position:absolute!important;right:0;top:0;width:.5rem}.p-datatable .p-column-resizer-helper{display:none;position:absolute;width:1px;z-index:10}.p-datatable .p-row-editor-cancel,.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-toggler{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-down,.p-datatable-reorder-indicator-up{display:none;position:absolute}.p-datatable .p-datatable-loading-overlay{align-items:center;display:flex;justify-content:center;position:absolute;z-index:2}.p-column-filter-row{align-items:center;display:flex;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-clear-button,.p-column-filter-menu-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none}.p-column-filter-overlay{position:absolute}.p-column-filter-row-items{list-style:none;margin:0;padding:0}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:none}cdk-virtual-scroll-viewport{outline:0 none}@media screen and (max-width:40em){.p-datatable.p-datatable-responsive .p-datatable-tfoot>tr>td,.p-datatable.p-datatable-responsive .p-datatable-thead>tr>th{display:none!important}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td{border:0;clear:left;display:block;float:left;text-align:left;width:100%}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:inline-block;font-weight:700;margin:-.4em 1em -.4em -.4rem;min-width:30%;padding:.4rem}}"]
+                styles: [".p-datatable{position:relative}.p-datatable table{border-collapse:collapse;table-layout:fixed;width:100%}.p-datatable .p-sortable-column{-ms-user-select:none;-webkit-user-select:none;cursor:pointer;user-select:none}.p-datatable .p-sortable-column .p-column-title,.p-datatable .p-sortable-column .p-sortable-column-badge,.p-datatable .p-sortable-column .p-sortable-column-icon{vertical-align:middle}.p-datatable .p-sortable-column .p-sortable-column-badge{align-items:center;display:inline-flex;justify-content:center}.p-datatable-auto-layout>.p-datatable-wrapper{overflow-x:auto}.p-datatable-auto-layout>.p-datatable-wrapper>table{table-layout:auto}.p-datatable-hoverable-rows .p-selectable-row{cursor:pointer}.p-datatable-scrollable-wrapper{position:relative}.p-datatable-scrollable-footer,.p-datatable-scrollable-header{overflow:hidden}.p-datatable-scrollable-body{overflow:auto;position:relative}.p-datatable-scrollable-body>table>.p-datatable-tbody>tr:first-child>td{border-top:0}.p-datatable-virtual-table{position:absolute}.p-datatable-frozen-view .p-datatable-scrollable-body{overflow:hidden}.p-datatable-frozen-view>.p-datatable-scrollable-body>table>.p-datatable-tbody>tr>td:last-child{border-right:0}.p-datatable-unfrozen-view{position:absolute;top:0}.p-datatable-flex-scrollable,.p-datatable-flex-scrollable .p-datatable-scrollable-view,.p-datatable-flex-scrollable .p-datatable-scrollable-wrapper{display:flex;flex:1;flex-direction:column;height:100%}.p-datatable-flex-scrollable .p-datatable-scrollable-body,.p-datatable-flex-scrollable .p-datatable-virtual-scrollable-body{flex:1}.p-datatable-resizable>.p-datatable-wrapper{overflow-x:auto}.p-datatable-resizable .p-datatable-tbody>tr>td,.p-datatable-resizable .p-datatable-tfoot>tr>td,.p-datatable-resizable .p-datatable-thead>tr>th{overflow:hidden;white-space:nowrap}.p-datatable-resizable .p-resizable-column{background-clip:padding-box;position:relative}.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer{display:none}.p-datatable .p-column-resizer{border:1px solid transparent;cursor:col-resize;display:block;height:100%;margin:0;padding:0;position:absolute!important;right:0;top:0;width:.5rem}.p-datatable .p-column-resizer-helper{display:none;position:absolute;width:1px;z-index:10}.p-datatable .p-row-editor-cancel,.p-datatable .p-row-editor-init,.p-datatable .p-row-editor-save,.p-datatable .p-row-toggler{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;position:relative}.p-datatable-reorder-indicator-down,.p-datatable-reorder-indicator-up{display:none;position:absolute}.p-datatable-reorderablerow-handle,[pReorderableColumn]{cursor:move}.p-datatable .p-datatable-loading-overlay{align-items:center;display:flex;justify-content:center;position:absolute;z-index:2}.p-column-filter-row{align-items:center;display:flex;width:100%}.p-column-filter-menu{display:inline-flex}.p-column-filter-row p-columnfilterformelement{flex:1 1 auto;width:1%}.p-column-filter-clear-button,.p-column-filter-menu-button{align-items:center;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;position:relative;text-decoration:none}.p-column-filter-overlay{position:absolute}.p-column-filter-row-items{list-style:none;margin:0;padding:0}.p-column-filter-row-item{cursor:pointer}.p-column-filter-add-button,.p-column-filter-remove-button{justify-content:center}.p-column-filter-add-button .p-button-label,.p-column-filter-remove-button .p-button-label{flex-grow:0}.p-column-filter-buttonbar{align-items:center;display:flex;justify-content:space-between}.p-column-filter-buttonbar .p-button{width:auto}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:none}cdk-virtual-scroll-viewport{outline:0 none}@media screen and (max-width:40em){.p-datatable.p-datatable-responsive .p-datatable-tfoot>tr>td,.p-datatable.p-datatable-responsive .p-datatable-thead>tr>th{display:none!important}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td{border:0;clear:left;display:block;float:left;text-align:left;width:100%}.p-datatable.p-datatable-responsive .p-datatable-tbody>tr>td .p-column-title{display:inline-block;font-weight:700;margin:-.4em 1em -.4em -.4rem;min-width:30%;padding:.4rem}}"]
             },] }
 ];
 Table.ctorParameters = () => [
     { type: ElementRef },
     { type: NgZone },
     { type: TableService },
-    { type: ChangeDetectorRef }
+    { type: ChangeDetectorRef },
+    { type: FilterService }
 ];
 Table.propDecorators = {
     frozenColumns: [{ type: Input }],
@@ -2645,9 +2649,9 @@ class EditableColumn {
     }
     closeEditingCell(completed, event) {
         if (completed)
-            this.dt.onEditComplete.emit({ field: this.dt.editingCellField, data: this.dt.editingCellData, originalEvent: event, index: this.rowIndex });
+            this.dt.onEditComplete.emit({ field: this.dt.editingCellField, data: this.dt.editingCellData, originalEvent: event, index: this.dt.editingCellRowIndex });
         else
-            this.dt.onEditCancel.emit({ field: this.dt.editingCellField, data: this.dt.editingCellData, originalEvent: event, index: this.rowIndex });
+            this.dt.onEditCancel.emit({ field: this.dt.editingCellField, data: this.dt.editingCellData, originalEvent: event, index: this.dt.editingCellRowIndex });
         DomHandler.removeClass(this.dt.editingCell, 'p-cell-editing');
         this.dt.editingCell = null;
         this.dt.editingCellData = null;
@@ -3397,7 +3401,7 @@ class ColumnFilter {
         this.dt._filter();
         this.hide();
     }
-    onRowMatchModeKeyDown(event, matchMode) {
+    onRowMatchModeKeyDown(event) {
         let item = event.target;
         switch (event.key) {
             case 'ArrowDown':
@@ -3418,10 +3422,6 @@ class ColumnFilter {
                 }
                 event.preventDefault();
                 break;
-            case 'Enter':
-                this.onRowMatchModeChange(matchMode);
-                event.preventDefault();
-                break;
         }
     }
     onRowClearItemClick() {
@@ -3553,6 +3553,9 @@ class ColumnFilter {
     get removeRuleButtonLabel() {
         return this.config.getTranslation(TranslationKeys.REMOVE_RULE);
     }
+    get noFilterLabel() {
+        return this.config.getTranslation(TranslationKeys.NO_FILTER);
+    }
     hasFilter() {
         let fieldFilter = this.dt.filters[this.field];
         if (fieldFilter) {
@@ -3572,7 +3575,7 @@ class ColumnFilter {
     bindDocumentClickListener() {
         if (!this.documentClickListener) {
             const documentTarget = this.el ? this.el.nativeElement.ownerDocument : 'document';
-            this.documentClickListener = this.renderer.listen(documentTarget, 'click', event => {
+            this.documentClickListener = this.renderer.listen(documentTarget, 'mousedown', event => {
                 if (this.isOutsideClicked(event)) {
                     this.hide();
                 }
@@ -3652,10 +3655,10 @@ ColumnFilter.decorators = [
                 [@overlayAnimation]="'visible'" (@overlayAnimation.start)="onOverlayAnimationStart($event)" (keydown.escape)="onEscape()">
                 <ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: field}"></ng-container>
                 <ul *ngIf="display === 'row'; else menu" class="p-column-filter-row-items">
-                    <li class="p-column-filter-row-item" *ngFor="let matchMode of matchModes; let i = index;" (click)="onRowMatchModeChange(matchMode.value)" (keydown)="onRowMatchModeKeyDown($event, matchMode.value)"
+                    <li class="p-column-filter-row-item" *ngFor="let matchMode of matchModes; let i = index;" (click)="onRowMatchModeChange(matchMode.value)" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="this.onRowMatchModeChange(matchMode.value)"
                         [ngClass]="{'p-highlight': isRowMatchModeSelected(matchMode.value)}" [attr.tabindex]="i === 0 ? '0' : null">{{matchMode.label}}</li>
                     <li class="p-column-filter-separator"></li>
-                    <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)">No filter</li>
+                    <li class="p-column-filter-row-item" (click)="onRowClearItemClick()" (keydown)="onRowMatchModeKeyDown($event)" (keydown.enter)="onRowClearItemClick()">{{noFilterLabel}}</li>
                 </ul>
                 <ng-template #menu>
                     <div class="p-column-filter-operator" *ngIf="isShowOperator">