primeng 4.2.1 → 4.3.0

package/components/datatable/datatable.js

@@ -70,7 +70,7 @@ __decorate([
 DTCheckbox = __decorate([
     core_1.Component({
         selector: 'p-dtCheckbox',
-        template: "\n        <div class=\"ui-chkbox ui-widget\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"checked\">\n            </div>\n            <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" (click)=\"handleClick($event)\"\n                        (mouseover)=\"hover=true\" (mouseout)=\"hover=false\" \n                        [ngClass]=\"{'ui-state-hover':hover&&!disabled,'ui-state-active':checked&&!disabled,'ui-state-disabled':disabled}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'fa fa-check':checked}\"></span>\n            </div>\n        </div>\n    "
+        template: "\n        <div class=\"ui-chkbox ui-widget\">\n            <div class=\"ui-helper-hidden-accessible\">\n                <input type=\"checkbox\" [checked]=\"checked\">\n            </div>\n            <div class=\"ui-chkbox-box ui-widget ui-corner-all ui-state-default\" (click)=\"handleClick($event)\"\n                        (mouseover)=\"hover=true\" (mouseout)=\"hover=false\"\n                        [ngClass]=\"{'ui-state-hover':hover&&!disabled,'ui-state-active':checked&&!disabled,'ui-state-disabled':disabled}\">\n                <span class=\"ui-chkbox-icon ui-clickable\" [ngClass]=\"{'fa fa-check':checked}\"></span>\n            </div>\n        </div>\n    "
     })
 ], DTCheckbox);
 exports.DTCheckbox = DTCheckbox;
@@ -122,7 +122,7 @@ __decorate([
 ColumnHeaders = __decorate([
     core_1.Component({
         selector: '[pColumnHeaders]',
-        template: "\n        <ng-template ngFor let-col [ngForOf]=\"columns\" let-lastCol=\"last\">\n            <th #headerCell [attr.id]=\"col.colId\" [ngStyle]=\"col.style\" [class]=\"col.styleClass\" (click)=\"dt.sort($event,col)\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\"\n                [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-sortable-column': col.sortable, 'ui-state-active': dt.isSorted(col), 'ui-resizable-column': dt.resizableColumns, 'ui-selection-column':col.selectionMode,\n                            'ui-helper-hidden': col.hidden}\" \n                (dragstart)=\"dt.onColumnDragStart($event)\" (dragleave)=\"dt.onColumnDragleave($event)\" (drop)=\"dt.onColumnDrop($event)\" (mousedown)=\"dt.onHeaderMousedown($event,headerCell)\"\n                [attr.tabindex]=\"col.sortable ? tabindex : null\" (keydown)=\"dt.onHeaderKeydown($event,col)\">\n                <span class=\"ui-column-resizer ui-clickable\" *ngIf=\"dt.resizableColumns && ((dt.columnResizeMode == 'fit' && !lastCol) || dt.columnResizeMode == 'expand')\" (mousedown)=\"dt.initColumnResize($event)\"></span>\n                <span class=\"ui-column-title\" *ngIf=\"!col.selectionMode&&!col.headerTemplate\">{{col.header}}</span>\n                <span class=\"ui-column-title\" *ngIf=\"col.headerTemplate\">\n                    <p-columnHeaderTemplateLoader [column]=\"col\"></p-columnHeaderTemplateLoader>\n                </span>\n                <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                     [ngClass]=\"{'fa-sort-desc': (dt.getSortOrder(col) == -1),'fa-sort-asc': (dt.getSortOrder(col) == 1)}\"></span>\n                <input [attr.type]=\"col.filterType\" class=\"ui-column-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.maxlength]=\"col.filterMaxlength\" [attr.placeholder]=\"col.filterPlaceholder\" *ngIf=\"col.filter&&!col.filterTemplate\" [value]=\"dt.filters[col.filterField||col.field] ? dt.filters[col.filterField||col.field].value : ''\" \n                    (click)=\"dt.onFilterInputClick($event)\" (input)=\"dt.onFilterKeyup($event.target.value, col.filterField||col.field, col.filterMatchMode)\"/>\n                <p-columnFilterTemplateLoader [column]=\"col\" *ngIf=\"col.filterTemplate\"></p-columnFilterTemplateLoader>\n                <p-dtCheckbox *ngIf=\"col.selectionMode=='multiple'\" (onChange)=\"dt.toggleRowsWithCheckbox($event)\" [checked]=\"dt.allSelected\" [disabled]=\"dt.isEmpty()\"></p-dtCheckbox>\n            </th>\n        </ng-template>\n    "
+        template: "\n        <ng-template ngFor let-col [ngForOf]=\"columns\" let-lastCol=\"last\">\n            <th #headerCell [attr.id]=\"col.colId\" [ngStyle]=\"col.headerStyle||col.style\" [class]=\"col.headerStyleClass||col.styleClass\" (click)=\"dt.sort($event,col)\" [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\"\n                [ngClass]=\"{'ui-state-default ui-unselectable-text':true, 'ui-sortable-column': col.sortable, 'ui-state-active': dt.isSorted(col), 'ui-resizable-column': dt.resizableColumns, 'ui-selection-column':col.selectionMode,\n                            'ui-helper-hidden': col.hidden}\"\n                (dragstart)=\"dt.onColumnDragStart($event)\" (dragleave)=\"dt.onColumnDragleave($event)\" (drop)=\"dt.onColumnDrop($event)\" (mousedown)=\"dt.onHeaderMousedown($event,headerCell)\"\n                [attr.tabindex]=\"col.sortable ? tabindex : null\" (keydown)=\"dt.onHeaderKeydown($event,col)\"\n                [attr.scope]=\"col.scope||(col.colspan ? 'colgroup' : 'col')\">\n                <span class=\"ui-column-resizer ui-clickable\" *ngIf=\"dt.resizableColumns && ((dt.columnResizeMode == 'fit' && !lastCol) || dt.columnResizeMode == 'expand')\" (mousedown)=\"dt.initColumnResize($event)\"></span>\n                <span class=\"ui-column-title\" *ngIf=\"!col.selectionMode&&!col.headerTemplate\">{{col.header}}</span>\n                <span class=\"ui-column-title\" *ngIf=\"col.headerTemplate\">\n                    <p-columnHeaderTemplateLoader [column]=\"col\"></p-columnHeaderTemplateLoader>\n                </span>\n                <span class=\"ui-sortable-column-icon fa fa-fw fa-sort\" *ngIf=\"col.sortable\"\n                     [ngClass]=\"{'fa-sort-desc': (dt.getSortOrder(col) == -1),'fa-sort-asc': (dt.getSortOrder(col) == 1)}\"></span>\n                <input [attr.type]=\"col.filterType\" class=\"ui-column-filter ui-inputtext ui-widget ui-state-default ui-corner-all\" [attr.maxlength]=\"col.filterMaxlength\" [attr.placeholder]=\"col.filterPlaceholder\" *ngIf=\"col.filter&&!col.filterTemplate\" [value]=\"dt.filters[col.filterField||col.field] ? dt.filters[col.filterField||col.field].value : ''\"\n                    (click)=\"dt.onFilterInputClick($event)\" (input)=\"dt.onFilterKeyup($event.target.value, col.filterField||col.field, col.filterMatchMode)\"/>\n                <p-columnFilterTemplateLoader [column]=\"col\" *ngIf=\"col.filter&&col.filterTemplate\"></p-columnFilterTemplateLoader>\n                <p-dtCheckbox *ngIf=\"col.selectionMode=='multiple' && dt.showHeaderCheckbox === true\" (onChange)=\"dt.toggleRowsWithCheckbox($event)\" [checked]=\"dt.allSelected\" [disabled]=\"dt.isEmpty()\"></p-dtCheckbox>\n            </th>\n        </ng-template>\n    "
     }),
     __param(0, core_1.Inject(core_1.forwardRef(function () { return DataTable; }))),
     __metadata("design:paramtypes", [DataTable])
@@ -141,7 +141,7 @@ __decorate([
 ColumnFooters = __decorate([
     core_1.Component({
         selector: '[pColumnFooters]',
-        template: "\n        <td *ngFor=\"let col of columns\" [ngStyle]=\"col.style\" [class]=\"col.styleClass\"\n            [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\"\n            [ngClass]=\"{'ui-state-default':true, 'ui-helper-hidden': col.hidden}\">\n            <span class=\"ui-column-footer\" *ngIf=\"!col.footerTemplate\">{{col.footer}}</span>\n            <span class=\"ui-column-footer\" *ngIf=\"col.footerTemplate\">\n                <p-columnFooterTemplateLoader [column]=\"col\"></p-columnFooterTemplateLoader>\n            </span>\n        </td>\n    "
+        template: "\n        <td *ngFor=\"let col of columns\" [ngStyle]=\"col.footerStyle||col.style\" [class]=\"col.footerStyleClass||col.styleClass\"\n            [attr.colspan]=\"col.colspan\" [attr.rowspan]=\"col.rowspan\"\n            [ngClass]=\"{'ui-state-default':true, 'ui-helper-hidden': col.hidden}\">\n            <span class=\"ui-column-footer\" *ngIf=\"!col.footerTemplate\">{{col.footer}}</span>\n            <span class=\"ui-column-footer\" *ngIf=\"col.footerTemplate\">\n                <p-columnFooterTemplateLoader [column]=\"col\"></p-columnFooterTemplateLoader>\n            </span>\n        </td>\n    "
     }),
     __param(0, core_1.Inject(core_1.forwardRef(function () { return DataTable; }))),
     __metadata("design:paramtypes", [DataTable])
@@ -167,7 +167,7 @@ __decorate([
 TableBody = __decorate([
     core_1.Component({
         selector: '[pTableBody]',
-        template: "\n        <ng-template ngFor let-rowData [ngForOf]=\"data\" let-even=\"even\" let-odd=\"odd\" let-rowIndex=\"index\" [ngForTrackBy]=\"dt.rowTrackBy\">\n            <tr #rowGroupElement class=\"ui-widget-header ui-rowgroup-header\" \n                *ngIf=\"dt.rowGroupMode=='subheader' && (rowIndex === 0||(dt.resolveFieldData(rowData,dt.groupField) !== dt.resolveFieldData(dt.dataToRender[rowIndex - 1], dt.groupField)))\"\n                (click)=\"dt.onRowGroupClick($event)\" [ngStyle]=\"{'cursor': dt.sortableRowGroup ? 'pointer' : 'auto'}\">\n                <td [attr.colspan]=\"dt.visibleColumns().length\">\n                    <a href=\"#\" *ngIf=\"dt.expandableRowGroups\" (click)=\"dt.toggleRowGroup($event,rowData)\">\n                        <span class=\"fa fa-fw\" [ngClass]=\"dt.isRowGroupExpanded(rowData) ? dt.expandedIcon : dt.collapsedIcon\"></span>\n                    </a>\n                    <span class=\"ui-rowgroup-header-name\">\n                        <p-templateLoader [template]=\"dt.rowGroupHeaderTemplate\" [data]=\"rowData\"></p-templateLoader>\n                    </span>\n                </td>\n            </tr>\n            <tr #rowElement *ngIf=\"!dt.expandableRowGroups||dt.isRowGroupExpanded(rowData)\"\n                    (click)=\"dt.handleRowClick($event, rowData, rowIndex)\" (dblclick)=\"dt.rowDblclick($event,rowData)\" (contextmenu)=\"dt.onRowRightClick($event,rowData)\" (touchend)=\"dt.handleRowTouchEnd($event)\"\n                    [ngClass]=\"[even&&dt.rowGroupMode!='rowspan'? 'ui-datatable-even':'',\n                                odd&&dt.rowGroupMode!='rowspan'?'ui-datatable-odd':'',\n                                dt.isSelected(rowData)? 'ui-state-highlight': '', \n                                dt.getRowStyleClass(rowData,rowIndex)]\">\n                <ng-template ngFor let-col [ngForOf]=\"columns\" let-colIndex=\"index\">\n                    <td #cell *ngIf=\"!dt.rowGroupMode || (dt.rowGroupMode == 'subheader') ||\n                        (dt.rowGroupMode=='rowspan' && ((dt.sortField==col.field && dt.rowGroupMetadata[dt.resolveFieldData(rowData,dt.sortField)].index == rowIndex) || (dt.sortField!=col.field)))\"\n                        [ngStyle]=\"col.style\" [class]=\"col.styleClass\" (click)=\"dt.switchCellToEditMode(cell,col,rowData)\"\n                        [ngClass]=\"{'ui-editable-column':col.editable,'ui-selection-column':col.selectionMode, 'ui-helper-hidden': col.hidden}\"\n                        [attr.rowspan]=\"(dt.rowGroupMode=='rowspan' && dt.sortField == col.field && dt.rowGroupMetadata[dt.resolveFieldData(rowData,dt.sortField)].index == rowIndex) ? dt.rowGroupMetadata[dt.resolveFieldData(rowData,dt.sortField)].size : null\">\n                        <span class=\"ui-column-title\" *ngIf=\"dt.responsive\">{{col.header}}</span>\n                        <span class=\"ui-cell-data\" *ngIf=\"!col.bodyTemplate && !col.expander && !col.selectionMode\">{{dt.resolveFieldData(rowData,col.field)}}</span>\n                        <span class=\"ui-cell-data\" *ngIf=\"col.bodyTemplate\">\n                            <p-columnBodyTemplateLoader [column]=\"col\" [rowData]=\"rowData\" [rowIndex]=\"rowIndex + dt.first\"></p-columnBodyTemplateLoader>\n                        </span>\n                        <div class=\"ui-cell-editor\" *ngIf=\"col.editable\">\n                            <input *ngIf=\"!col.editorTemplate\" type=\"text\" [(ngModel)]=\"rowData[col.field]\" required=\"true\"\n                                (keydown)=\"dt.onCellEditorKeydown($event, col, rowData, rowIndex)\" class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\"/>\n                            <a *ngIf=\"col.editorTemplate\" class=\"ui-cell-editor-proxy-focus\" href=\"#\" (focus)=\"dt.onCustomEditorFocusPrev($event, colIndex)\"></a>\n                            <p-columnEditorTemplateLoader *ngIf=\"col.editorTemplate\" [column]=\"col\" [rowData]=\"rowData\" [rowIndex]=\"rowIndex\"></p-columnEditorTemplateLoader>\n                            <a *ngIf=\"col.editorTemplate\" class=\"ui-cell-editor-proxy-focus\" href=\"#\" (focus)=\"dt.onCustomEditorFocusNext($event, colIndex)\"></a>\n                        </div>\n                        <a href=\"#\" *ngIf=\"col.expander\" (click)=\"dt.toggleRow(rowData,$event)\">\n                            <span class=\"ui-row-toggler fa fa-fw ui-clickable\" [ngClass]=\"dt.isRowExpanded(rowData) ? dt.expandedIcon : dt.collapsedIcon\"></span>\n                        </a>\n                        <p-dtRadioButton *ngIf=\"col.selectionMode=='single'\" (onClick)=\"dt.selectRowWithRadio($event, rowData)\" [checked]=\"dt.isSelected(rowData)\"></p-dtRadioButton>\n                        <p-dtCheckbox *ngIf=\"col.selectionMode=='multiple'\" (onChange)=\"dt.toggleRowWithCheckbox($event,rowData)\" [checked]=\"dt.isSelected(rowData)\"></p-dtCheckbox>\n                    </td>\n                </ng-template>\n            </tr>\n            <tr class=\"ui-widget-header\" *ngIf=\"dt.rowGroupFooterTemplate && dt.rowGroupMode=='subheader' && ((rowIndex === dt.dataToRender.length - 1)||(dt.resolveFieldData(rowData,dt.groupField) !== dt.resolveFieldData(dt.dataToRender[rowIndex + 1],dt.groupField))) && (!dt.expandableRowGroups || dt.isRowGroupExpanded(rowData))\">\n                <p-templateLoader class=\"ui-helper-hidden\" [data]=\"rowData\" [template]=\"dt.rowGroupFooterTemplate\"></p-templateLoader>\n            </tr>\n            <tr *ngIf=\"dt.expandableRows && dt.isRowExpanded(rowData)\">\n                <td [attr.colspan]=\"dt.visibleColumns().length\">\n                    <p-rowExpansionLoader [rowData]=\"rowData\" [rowIndex]=\"rowIndex\" [template]=\"dt.rowExpansionTemplate\"></p-rowExpansionLoader>\n                </td>\n            </tr>\n        </ng-template>\n\n        <tr *ngIf=\"dt.isEmpty()\" class=\"ui-widget-content ui-datatable-emptymessage-row\">\n            <td [attr.colspan]=\"dt.visibleColumns().length\" class=\"ui-datatable-emptymessage\">\n                <span *ngIf=\"!dt.emptyMessageTemplate\">{{dt.emptyMessage}}</span>\n                <p-templateLoader [template]=\"dt.emptyMessageTemplate\"></p-templateLoader>\n            </td>\n        </tr>\n    "
+        template: "\n        <ng-template ngFor let-rowData [ngForOf]=\"data\" let-even=\"even\" let-odd=\"odd\" let-rowIndex=\"index\" [ngForTrackBy]=\"dt.rowTrackBy\">\n            <tr #rowGroupElement class=\"ui-widget-header ui-rowgroup-header\"\n                *ngIf=\"dt.rowGroupMode=='subheader' && (rowIndex === 0||(dt.resolveFieldData(rowData,dt.groupField) !== dt.resolveFieldData(dt.dataToRender[rowIndex - 1], dt.groupField)))\"\n                (click)=\"dt.onRowGroupClick($event)\" [ngStyle]=\"{'cursor': dt.sortableRowGroup ? 'pointer' : 'auto'}\">\n                <td [attr.colspan]=\"dt.visibleColumns().length\">\n                    <a href=\"#\" *ngIf=\"dt.expandableRowGroups\" (click)=\"dt.toggleRowGroup($event,rowData)\">\n                        <span class=\"fa fa-fw\" [ngClass]=\"dt.isRowGroupExpanded(rowData) ? dt.expandedIcon : dt.collapsedIcon\"></span>\n                    </a>\n                    <span class=\"ui-rowgroup-header-name\">\n                        <p-templateLoader [template]=\"dt.rowGroupHeaderTemplate\" [data]=\"rowData\"></p-templateLoader>\n                    </span>\n                </td>\n            </tr>\n            <tr #rowElement *ngIf=\"!dt.expandableRowGroups||dt.isRowGroupExpanded(rowData)\"\n                    (click)=\"dt.handleRowClick($event, rowData, rowIndex)\" (dblclick)=\"dt.rowDblclick($event,rowData)\" (contextmenu)=\"dt.onRowRightClick($event,rowData)\" (touchend)=\"dt.handleRowTouchEnd($event)\"\n                    [ngClass]=\"[even&&dt.rowGroupMode!='rowspan'? 'ui-datatable-even':'',\n                                odd&&dt.rowGroupMode!='rowspan'?'ui-datatable-odd':'',\n                                dt.isSelected(rowData)? 'ui-state-highlight': '',\n                                dt.isRowExpanded(rowData) ? 'ui-expanded-row': '',\n                                dt.getRowStyleClass(rowData,rowIndex)]\">\n                <ng-template ngFor let-col [ngForOf]=\"columns\" let-colIndex=\"index\">\n                    <td #cell *ngIf=\"!dt.rowGroupMode || (dt.rowGroupMode == 'subheader') ||\n                        (dt.rowGroupMode=='rowspan' && ((dt.sortField==col.field && dt.rowGroupMetadata[dt.resolveFieldData(rowData,dt.sortField)].index == rowIndex) || (dt.sortField!=col.field)))\"\n                        [ngStyle]=\"col.bodyStyle||col.style\" [class]=\"col.bodyStyleClass||col.styleClass\" (click)=\"dt.switchCellToEditMode(cell,col,rowData)\"\n                        [ngClass]=\"{'ui-editable-column':col.editable,'ui-selection-column':col.selectionMode, 'ui-helper-hidden': col.hidden}\"\n                        [attr.rowspan]=\"(dt.rowGroupMode=='rowspan' && dt.sortField == col.field && dt.rowGroupMetadata[dt.resolveFieldData(rowData,dt.sortField)].index == rowIndex) ? dt.rowGroupMetadata[dt.resolveFieldData(rowData,dt.sortField)].size : null\">\n                        <span class=\"ui-column-title\" *ngIf=\"dt.responsive\">{{col.header}}</span>\n                        <span class=\"ui-cell-data\" *ngIf=\"!col.bodyTemplate && !col.expander && !col.selectionMode\">{{dt.resolveFieldData(rowData,col.field)}}</span>\n                        <span class=\"ui-cell-data\" *ngIf=\"col.bodyTemplate\">\n                            <p-columnBodyTemplateLoader [column]=\"col\" [rowData]=\"rowData\" [rowIndex]=\"rowIndex + dt.first\"></p-columnBodyTemplateLoader>\n                        </span>\n                        <div class=\"ui-cell-editor\" *ngIf=\"col.editable\">\n                            <input *ngIf=\"!col.editorTemplate\" type=\"text\" [(ngModel)]=\"rowData[col.field]\"\n                                (keydown)=\"dt.onCellEditorKeydown($event, col, rowData, rowIndex)\" (blur)=\"dt.onCellEditorBlur($event, col, rowData, rowIndex)\"\n                                (input)=\"dt.onCellEditorInput($event, col, rowData, rowIndex)\" (change)=\"dt.onCellEditorChange($event, col, rowData, rowIndex)\"\n                                class=\"ui-inputtext ui-widget ui-state-default ui-corner-all\"/>\n                            <a *ngIf=\"col.editorTemplate\" class=\"ui-cell-editor-proxy-focus\" href=\"#\" (focus)=\"dt.onCustomEditorFocusPrev($event, colIndex)\"></a>\n                            <p-columnEditorTemplateLoader *ngIf=\"col.editorTemplate\" [column]=\"col\" [rowData]=\"rowData\" [rowIndex]=\"rowIndex\"></p-columnEditorTemplateLoader>\n                            <a *ngIf=\"col.editorTemplate\" class=\"ui-cell-editor-proxy-focus\" href=\"#\" (focus)=\"dt.onCustomEditorFocusNext($event, colIndex)\"></a>\n                        </div>\n                        <a href=\"#\" *ngIf=\"col.expander\" (click)=\"dt.toggleRow(rowData,$event)\">\n                            <span class=\"ui-row-toggler fa fa-fw ui-clickable\" [ngClass]=\"dt.isRowExpanded(rowData) ? dt.expandedIcon : dt.collapsedIcon\"></span>\n                        </a>\n                        <p-dtRadioButton *ngIf=\"col.selectionMode=='single'\" (onClick)=\"dt.selectRowWithRadio($event, rowData)\" [checked]=\"dt.isSelected(rowData)\"></p-dtRadioButton>\n                        <p-dtCheckbox *ngIf=\"col.selectionMode=='multiple'\" (onChange)=\"dt.toggleRowWithCheckbox($event,rowData)\" [checked]=\"dt.isSelected(rowData)\"></p-dtCheckbox>\n                    </td>\n                </ng-template>\n            </tr>\n            <tr *ngIf=\"dt.expandableRows && dt.isRowExpanded(rowData)\" class=\"ui-expanded-row-content\">\n                <td [attr.colspan]=\"dt.visibleColumns().length\">\n                    <p-rowExpansionLoader [rowData]=\"rowData\" [rowIndex]=\"rowIndex\" [template]=\"dt.rowExpansionTemplate\"></p-rowExpansionLoader>\n                </td>\n            </tr>\n            <tr class=\"ui-widget-header ui-rowgroup-footer\" *ngIf=\"dt.rowGroupFooterTemplate && dt.rowGroupMode=='subheader' && ((rowIndex === dt.dataToRender.length - 1)||(dt.resolveFieldData(rowData,dt.groupField) !== dt.resolveFieldData(dt.dataToRender[rowIndex + 1],dt.groupField))) && (!dt.expandableRowGroups || dt.isRowGroupExpanded(rowData))\">\n                <p-templateLoader class=\"ui-helper-hidden\" [data]=\"rowData\" [template]=\"dt.rowGroupFooterTemplate\"></p-templateLoader>\n            </tr>\n        </ng-template>\n\n        <tr *ngIf=\"dt.isEmpty()\" class=\"ui-widget-content ui-datatable-emptymessage-row\" [style.visibility]=\"dt.loading ? 'hidden' : 'visible'\">\n            <td [attr.colspan]=\"dt.visibleColumns().length\" class=\"ui-datatable-emptymessage\">\n                <span *ngIf=\"!dt.emptyMessageTemplate\">{{dt.emptyMessage}}</span>\n                <p-templateLoader [template]=\"dt.emptyMessageTemplate\"></p-templateLoader>\n            </td>\n        </tr>\n    "
     }),
     __param(0, core_1.Inject(core_1.forwardRef(function () { return DataTable; }))),
     __metadata("design:paramtypes", [DataTable])
@@ -210,18 +210,22 @@ var ScrollableView = (function () {
         this.scrollTableWrapper = this.scrollTableWrapperViewChild.nativeElement;
         this.scrollFooter = this.scrollFooterViewChild ? this.scrollFooterViewChild.nativeElement : null;
         this.scrollFooterBox = this.scrollFooterBoxViewChild ? this.scrollFooterBoxViewChild.nativeElement : null;
+        this.setScrollHeight();
         if (!this.frozen) {
             this.zone.runOutsideAngular(function () {
                 _this.scrollHeader.addEventListener('scroll', _this.onHeaderScroll.bind(_this));
                 _this.scrollBody.addEventListener('scroll', _this.onBodyScroll.bind(_this));
             });
         }
-        if (!this.frozen)
+        if (!this.frozen) {
             this.alignScrollBar();
-        else
+        }
+        else {
             this.scrollBody.style.paddingBottom = this.domHandler.calculateScrollbarWidth() + 'px';
+        }
     };
     ScrollableView.prototype.onBodyScroll = function (event) {
+        var _this = this;
         var frozenView = this.el.nativeElement.previousElementSibling;
         if (frozenView) {
             var frozenScrollBody = this.domHandler.findSingle(frozenView, '.ui-datatable-scrollable-body');
@@ -236,15 +240,35 @@ var ScrollableView = (function () {
         if (this.virtualScroll) {
             var viewport = this.domHandler.getOuterHeight(this.scrollBody);
             var tableHeight = this.domHandler.getOuterHeight(this.scrollTable);
-            var pageHeight = this.rowHeight * this.dt.rows;
+            var pageHeight_1 = this.rowHeight * this.dt.rows;
             var virtualTableHeight = this.domHandler.getOuterHeight(this.scrollTableWrapper);
-            var pageCount = (virtualTableHeight / pageHeight) || 1;
+            var pageCount = (virtualTableHeight / pageHeight_1) || 1;
             if (this.scrollBody.scrollTop + viewport > parseFloat(this.scrollTable.style.top) + tableHeight || this.scrollBody.scrollTop < parseFloat(this.scrollTable.style.top)) {
-                var page = Math.floor((this.scrollBody.scrollTop * pageCount) / (this.scrollBody.scrollHeight)) + 1;
+                var page_1 = Math.floor((this.scrollBody.scrollTop * pageCount) / (this.scrollBody.scrollHeight)) + 1;
                 this.onVirtualScroll.emit({
-                    page: page
+                    page: page_1,
+                    callback: function () {
+                        _this.scrollTable.style.top = ((page_1 - 1) * pageHeight_1) + 'px';
+                    }
                 });
-                this.scrollTable.style.top = ((page - 1) * pageHeight) + 'px';
+            }
+        }
+    };
+    ScrollableView.prototype.setScrollHeight = function () {
+        if (this.dt.scrollHeight) {
+            if (this.dt.scrollHeight.indexOf('%') !== -1) {
+                this.scrollBody.style.visibility = 'hidden';
+                this.scrollBody.style.height = '100px'; //temporary height to calculate static height
+                var containerHeight = this.domHandler.getOuterHeight(this.dt.el.nativeElement.children[0]);
+                var relativeHeight = this.domHandler.getOuterHeight(this.dt.el.nativeElement.parentElement) * parseInt(this.dt.scrollHeight) / 100;
+                var staticHeight = containerHeight - 100; //total height of headers, footers, paginators
+                var scrollBodyHeight = (relativeHeight - staticHeight);
+                this.scrollBody.style.height = 'auto';
+                this.scrollBody.style.maxHeight = scrollBodyHeight + 'px';
+                this.scrollBody.style.visibility = 'visible';
+            }
+            else {
+                this.scrollBody.style.maxHeight = this.dt.scrollHeight;
             }
         }
     };
@@ -271,6 +295,14 @@ __decorate([
     core_1.Input("pScrollableView"),
     __metadata("design:type", Array)
 ], ScrollableView.prototype, "columns", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", shared_2.HeaderColumnGroup)
+], ScrollableView.prototype, "headerColumnGroup", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", shared_2.HeaderColumnGroup)
+], ScrollableView.prototype, "footerColumnGroup", void 0);
 __decorate([
     core_1.ViewChild('scrollHeader'),
     __metadata("design:type", core_1.ElementRef)
@@ -318,7 +350,7 @@ __decorate([
 ScrollableView = __decorate([
     core_1.Component({
         selector: '[pScrollableView]',
-        template: "\n        <div #scrollHeader class=\"ui-widget-header ui-datatable-scrollable-header\" [ngStyle]=\"{'width': width}\">\n            <div #scrollHeaderBox  class=\"ui-datatable-scrollable-header-box\">\n                <table [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <thead class=\"ui-datatable-thead\">\n                        <tr *ngIf=\"!dt.headerColumnGroup\" class=\"ui-state-default\" [pColumnHeaders]=\"columns\"></tr>\n                        <ng-template [ngIf]=\"dt.headerColumnGroup\">\n                            <tr *ngFor=\"let headerRow of dt.headerColumnGroup.rows\" class=\"ui-state-default\" [pColumnHeaders]=\"headerRow.columns\"></tr>\n                        </ng-template>\n                    </thead>\n                    <tbody *ngIf=\"dt.frozenValue\" [ngClass]=\"{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (dt.rowHover||dt.selectionMode)}\" [pTableBody]=\"columns\" [data]=\"dt.frozenValue\"></tbody>\n                </table>\n            </div>\n        </div>\n        <div #scrollBody class=\"ui-datatable-scrollable-body\" [ngStyle]=\"{'width': width,'max-height':dt.scrollHeight}\">\n            <div #scrollTableWrapper class=\"ui-datatable-scrollable-table-wrapper\" style=\"position:relative\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\" [ngClass]=\"{'ui-datatable-virtual-table':virtualScroll}\" style=\"top:0px\">\n                    <colgroup class=\"ui-datatable-scrollable-colgroup\">\n                        <col *ngFor=\"let col of columns\" [ngStyle]=\"col.style\" [ngClass]=\"{'ui-helper-hidden': col.hidden}\"/>\n                    </colgroup>\n                    <tbody [ngClass]=\"{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (dt.rowHover||dt.selectionMode)}\" [pTableBody]=\"columns\" [data]=\"dt.dataToRender\"></tbody>\n                </table>\n            </div>\n        </div>\n        <div #scrollFooter class=\"ui-widget-header ui-datatable-scrollable-footer\" [ngStyle]=\"{'width': width}\" *ngIf=\"dt.hasFooter()\">\n            <div #scrollFooterBox  class=\"ui-datatable-scrollable-footer-box\">\n                <table [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <tfoot class=\"ui-datatable-tfoot\">\n                        <tr *ngIf=\"!dt.footerColumnGroup\" [pColumnFooters]=\"columns\" class=\"ui-state-default\"></tr>\n                        <ng-template [ngIf]=\"dt.footerColumnGroup\">\n                            <tr *ngFor=\"let footerRow of dt.footerColumnGroup.rows\" class=\"ui-state-default\" [pColumnFooters]=\"footerRow.columns\"></tr>\n                        </ng-template>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    "
+        template: "\n        <div #scrollHeader class=\"ui-widget-header ui-datatable-scrollable-header\" [ngStyle]=\"{'width': width}\">\n            <div #scrollHeaderBox  class=\"ui-datatable-scrollable-header-box\">\n                <table [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <thead class=\"ui-datatable-thead\">\n                        <tr *ngIf=\"!headerColumnGroup\" class=\"ui-state-default\" [pColumnHeaders]=\"columns\"></tr>\n                        <ng-template [ngIf]=\"headerColumnGroup\">\n                            <tr *ngFor=\"let headerRow of headerColumnGroup.rows\" class=\"ui-state-default\" [pColumnHeaders]=\"headerRow.columns\"></tr>\n                        </ng-template>\n                    </thead>\n                    <tbody *ngIf=\"dt.frozenValue\" [ngClass]=\"{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (dt.rowHover||dt.selectionMode)}\" [pTableBody]=\"columns\" [data]=\"dt.frozenValue\"></tbody>\n                </table>\n            </div>\n        </div>\n        <div #scrollBody class=\"ui-datatable-scrollable-body\" [ngStyle]=\"{'width': width}\">\n            <div #scrollTableWrapper class=\"ui-datatable-scrollable-table-wrapper\" style=\"position:relative\">\n                <table #scrollTable [class]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\" [ngClass]=\"{'ui-datatable-virtual-table':virtualScroll}\" style=\"top:0px\">\n                    <colgroup class=\"ui-datatable-scrollable-colgroup\">\n                        <col *ngFor=\"let col of columns\" [ngStyle]=\"col.headerStyle||col.style\" [ngClass]=\"{'ui-helper-hidden': col.hidden}\"/>\n                    </colgroup>\n                    <tbody [ngClass]=\"{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (dt.rowHover||dt.selectionMode)}\" [pTableBody]=\"columns\" [data]=\"dt.dataToRender\"></tbody>\n                </table>\n            </div>\n        </div>\n        <div #scrollFooter class=\"ui-widget-header ui-datatable-scrollable-footer\" [ngStyle]=\"{'width': width}\" *ngIf=\"dt.hasFooter()\">\n            <div #scrollFooterBox  class=\"ui-datatable-scrollable-footer-box\">\n                <table [ngClass]=\"dt.tableStyleClass\" [ngStyle]=\"dt.tableStyle\">\n                    <tfoot class=\"ui-datatable-tfoot\">\n                        <tr *ngIf=\"!footerColumnGroup\" [pColumnFooters]=\"columns\" class=\"ui-state-default\"></tr>\n                        <ng-template [ngIf]=\"footerColumnGroup\">\n                            <tr *ngFor=\"let footerRow of footerColumnGroup.rows\" class=\"ui-state-default\" [pColumnFooters]=\"footerRow.columns\"></tr>\n                        </ng-template>\n                    </tfoot>\n                </table>\n            </div>\n        </div>\n    "
     }),
     __param(0, core_1.Inject(core_1.forwardRef(function () { return DataTable; }))),
     __metadata("design:paramtypes", [DataTable, domhandler_1.DomHandler, core_1.ElementRef, core_1.Renderer2, core_1.NgZone])
@@ -335,6 +367,7 @@ var DataTable = (function () {
         this.zone = zone;
         this.pageLinks = 5;
         this.selectionChange = new core_1.EventEmitter();
+        this.showHeaderCheckbox = true;
         this.onRowClick = new core_1.EventEmitter();
         this.onRowSelect = new core_1.EventEmitter();
         this.onRowUnselect = new core_1.EventEmitter();
@@ -347,7 +380,6 @@ var DataTable = (function () {
         this.onColResize = new core_1.EventEmitter();
         this.onColReorder = new core_1.EventEmitter();
         this.sortMode = 'single';
-        this.sortOrder = 1;
         this.defaultSortOrder = 1;
         this.csvSeparator = ',';
         this.exportFilename = 'download';
@@ -372,8 +404,8 @@ var DataTable = (function () {
         this.sortableRowGroup = true;
         this.filters = {};
         this.loadingIcon = 'fa-circle-o-notch';
-        this.enableLoader = true;
         this.virtualScrollDelay = 500;
+        this.rowGroupExpandMode = 'multiple';
         this.valueChange = new core_1.EventEmitter();
         this.firstChange = new core_1.EventEmitter();
         this.onRowExpand = new core_1.EventEmitter();
@@ -383,6 +415,7 @@ var DataTable = (function () {
         this.page = 0;
         this.columnsChanged = false;
         this._first = 0;
+        this._sortOrder = 1;
         this.filterConstraints = {
             startsWith: function (value, filter) {
                 if (filter === undefined || filter === null || filter.trim() === '') {
@@ -455,6 +488,7 @@ var DataTable = (function () {
     DataTable.prototype.ngAfterContentInit = function () {
         var _this = this;
         this.initColumns();
+        this.initColumnGroups();
         this.columnsSubscription = this.cols.changes.subscribe(function (_) {
             _this.initColumns();
             _this.changeDetector.markForCheck();
@@ -510,6 +544,45 @@ var DataTable = (function () {
         this.virtualScrollableTableWrapper = this.domHandler.findSingle(this.el.nativeElement, 'div.ui-datatable-scrollable-table-wrapper');
         this.initialized = true;
     };
+    Object.defineProperty(DataTable.prototype, "multiSortMeta", {
+        get: function () {
+            return this._multiSortMeta;
+        },
+        set: function (val) {
+            this._multiSortMeta = val;
+            if (this.sortMode === 'multiple') {
+                this.sortMultiple();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DataTable.prototype, "sortField", {
+        get: function () {
+            return this._sortField;
+        },
+        set: function (val) {
+            this._sortField = val;
+            if (this.sortMode === 'single') {
+                this.sortSingle();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(DataTable.prototype, "sortOrder", {
+        get: function () {
+            return this._sortOrder;
+        },
+        set: function (val) {
+            this._sortOrder = val;
+            if (this.sortMode === 'single') {
+                this.sortSingle();
+            }
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(DataTable.prototype, "value", {
         get: function () {
             return this._value;
@@ -561,9 +634,14 @@ var DataTable = (function () {
             if (this.dataKey && !this.preventSelectionKeysPropagation) {
                 this.selectionKeys = {};
                 if (this._selection) {
-                    for (var _i = 0, _a = this._selection; _i < _a.length; _i++) {
-                        var data = _a[_i];
-                        this.selectionKeys[String(this.objectUtils.resolveFieldData(data, this.dataKey))] = 1;
+                    if (Array.isArray(this._selection)) {
+                        for (var _i = 0, _a = this._selection; _i < _a.length; _i++) {
+                            var data = _a[_i];
+                            this.selectionKeys[String(this.objectUtils.resolveFieldData(data, this.dataKey))] = 1;
+                        }
+                    }
+                    else {
+                        this.selectionKeys[String(this.objectUtils.resolveFieldData(this._selection, this.dataKey))] = 1;
                     }
                 }
             }
@@ -582,12 +660,12 @@ var DataTable = (function () {
     };
     DataTable.prototype.handleDataChange = function () {
         var _this = this;
-        if (this.lazy && this.enableLoader) {
-            this.loading = false;
-        }
         if (this.paginator) {
             this.updatePaginator();
         }
+        if (this.virtualScroll && this.virtualScrollCallback) {
+            this.virtualScrollCallback();
+        }
         if (!this.lazy) {
             if (this.hasFilter()) {
                 this._filter();
@@ -608,42 +686,41 @@ var DataTable = (function () {
         this.updateDataToRender(this.filteredValue || this.value);
     };
     DataTable.prototype.initColumns = function () {
-        var _this = this;
         this.columns = this.cols.toArray();
-        if (this.scrollable) {
-            this.scrollableColumns = [];
-            this.frozenColumns = [];
-            this.cols.forEach(function (col) {
-                if (col.frozen) {
-                    _this.frozenColumns.push(col);
-                }
-                else {
-                    _this.scrollableColumns.push(col);
-                }
-            });
-        }
+        this.initScrollableColumns();
         this.columnsChanged = true;
     };
-    DataTable.prototype.resolveFieldData = function (data, field) {
-        if (data && field) {
-            if (field.indexOf('.') == -1) {
-                return data[field];
-            }
-            else {
-                var fields = field.split('.');
-                var value = data;
-                for (var i = 0, len = fields.length; i < len; ++i) {
-                    if (value == null) {
-                        return null;
-                    }
-                    value = value[fields[i]];
-                }
-                return value;
-            }
+    DataTable.prototype.initScrollableColumns = function () {
+        this.scrollableColumns = [];
+        this.frozenColumns = [];
+        for (var _i = 0, _a = this.columns; _i < _a.length; _i++) {
+            var col = _a[_i];
+            if (col.frozen)
+                this.frozenColumns.push(col);
+            else
+                this.scrollableColumns.push(col);
         }
-        else {
-            return null;
+    };
+    DataTable.prototype.initColumnGroups = function () {
+        var headerColumnsGroups = this.headerColumnGroups.toArray();
+        var footerColumnsGroups = this.footerColumnGroups.toArray();
+        for (var _i = 0, headerColumnsGroups_1 = headerColumnsGroups; _i < headerColumnsGroups_1.length; _i++) {
+            var columnGroup = headerColumnsGroups_1[_i];
+            if (columnGroup.frozen)
+                this.frozenHeaderColumnGroup = columnGroup;
+            else
+                this.scrollableHeaderColumnGroup = columnGroup;
         }
+        for (var _a = 0, footerColumnsGroups_1 = footerColumnsGroups; _a < footerColumnsGroups_1.length; _a++) {
+            var columnGroup = footerColumnsGroups_1[_a];
+            if (columnGroup.frozen)
+                this.frozenFooterColumnGroup = columnGroup;
+            else
+                this.scrollableFooterColumnGroup = columnGroup;
+        }
+    };
+    DataTable.prototype.resolveFieldData = function (data, field) {
+        return this.objectUtils.resolveFieldData(data, field);
     };
     DataTable.prototype.updateRowGroupMetadata = function () {
         this.rowGroupMetadata = {};
@@ -717,6 +794,7 @@ var DataTable = (function () {
     DataTable.prototype.onVirtualScroll = function (event) {
         var _this = this;
         this._first = (event.page - 1) * this.rows;
+        this.virtualScrollCallback = event.callback;
         this.zone.run(function () {
             if (_this.virtualScrollTimer) {
                 clearTimeout(_this.virtualScrollTimer);
@@ -755,13 +833,13 @@ var DataTable = (function () {
                 this.preventSortPropagation = true;
             }
             var columnSortField = column.sortField || column.field;
-            this.sortOrder = (this.sortField === columnSortField) ? this.sortOrder * -1 : this.defaultSortOrder;
-            this.sortField = columnSortField;
+            this._sortOrder = (this.sortField === columnSortField) ? this.sortOrder * -1 : this.defaultSortOrder;
+            this._sortField = columnSortField;
             this.sortColumn = column;
             var metaKey = event.metaKey || event.ctrlKey;
             if (this.sortMode == 'multiple') {
                 if (!this.multiSortMeta || !metaKey) {
-                    this.multiSortMeta = [];
+                    this._multiSortMeta = [];
                 }
                 this.addSortMeta({ field: this.sortField, order: this.sortOrder });
             }
@@ -908,11 +986,11 @@ var DataTable = (function () {
             var targetNode = event.target.nodeName;
             if ((targetNode == 'TD' || (targetNode == 'SPAN' && !this.domHandler.hasClass(event.target, 'ui-clickable')))) {
                 if (this.sortField != this.groupField) {
-                    this.sortField = this.groupField;
+                    this._sortField = this.groupField;
                     this.sortSingle();
                 }
                 else {
-                    this.sortOrder = -1 * this.sortOrder;
+                    this._sortOrder = -1 * this.sortOrder;
                     this.sortSingle();
                 }
             }
@@ -1061,6 +1139,7 @@ var DataTable = (function () {
                         if (selected) {
                             var selectionIndex_2 = this.findIndexInSelection(rowData);
                             this._selection = this.selection.filter(function (val, i) { return i != selectionIndex_2; });
+                            this.selectionChange.emit(this.selection);
                             this.onRowUnselect.emit({ originalEvent: event, data: rowData, type: 'row' });
                             if (dataKeyValue) {
                                 delete this.selectionKeys[dataKeyValue];
@@ -1068,13 +1147,13 @@ var DataTable = (function () {
                         }
                         else {
                             this._selection = (this.selection || []).concat([rowData]);
+                            this.selectionChange.emit(this.selection);
                             this.onRowSelect.emit({ originalEvent: event, data: rowData, type: 'row' });
                             if (dataKeyValue) {
                                 this.selectionKeys[dataKeyValue] = 1;
                             }
                         }
                     }
-                    this.selectionChange.emit(this.selection);
                 }
             }
             this.preventSelectionKeysPropagation = true;
@@ -1108,6 +1187,7 @@ var DataTable = (function () {
         var dataKeyValue = this.dataKey ? String(this.resolveFieldData(rowData, this.dataKey)) : null;
         if (selectionIndex != -1) {
             this._selection = this.selection.filter(function (val, i) { return i != selectionIndex; });
+            this.selectionChange.emit(this.selection);
             this.onRowUnselect.emit({ originalEvent: event, data: rowData, type: 'checkbox' });
             if (dataKeyValue) {
                 delete this.selectionKeys[dataKeyValue];
@@ -1115,12 +1195,12 @@ var DataTable = (function () {
         }
         else {
             this._selection = this.selection.concat([rowData]);
+            this.selectionChange.emit(this.selection);
             this.onRowSelect.emit({ originalEvent: event, data: rowData, type: 'checkbox' });
             if (dataKeyValue) {
                 this.selectionKeys[dataKeyValue] = 1;
             }
         }
-        this.selectionChange.emit(this.selection);
         this.preventSelectionKeysPropagation = true;
         this.preventRowClickPropagation = true;
     };
@@ -1148,12 +1228,12 @@ var DataTable = (function () {
                 }
                 if (this.dataKey) {
                     this.selectionKeys[String(this.resolveFieldData(rowData, this.dataKey))] = 1;
+                    this.preventSelectionKeysPropagation = true;
                 }
             }
             this.contextMenu.show(event);
             this.onContextMenuSelect.emit({ originalEvent: event, data: rowData });
         }
-        this.preventSelectionKeysPropagation = true;
     };
     DataTable.prototype.rowDblclick = function (event, rowData) {
         this.onRowDblclick.emit({ originalEvent: event, data: rowData });
@@ -1250,6 +1330,9 @@ var DataTable = (function () {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
         else {
+            if (!this.value || !this.columns) {
+                return;
+            }
             this.filteredValue = [];
             for (var i = 0; i < this.value.length; i++) {
                 var localMatch = true;
@@ -1268,7 +1351,7 @@ var DataTable = (function () {
                         }
                     }
                     //global
-                    if (this.globalFilter && !globalMatch) {
+                    if (!col.excludeGlobalFilter && this.globalFilter && !globalMatch) {
                         globalMatch = this.filterConstraints['contains'](this.resolveFieldData(this.value[i], col.filterField || col.field), this.globalFilter.value);
                     }
                 }
@@ -1357,22 +1440,18 @@ var DataTable = (function () {
     };
     DataTable.prototype.onCellEditorKeydown = function (event, column, rowData, rowIndex) {
         if (this.editable) {
-            this.onEdit.emit({ originalEvent: event, column: column, data: rowData, index: rowIndex });
             //enter
             if (event.keyCode == 13) {
-                this.onEditComplete.emit({ column: column, data: rowData, index: rowIndex });
-                this.domHandler.invokeElementMethod(event.target, 'blur');
-                this.switchCellToViewMode(event.target);
-                event.preventDefault();
+                if (this.domHandler.find(this.editingCell, '.ng-invalid.ng-dirty').length == 0) {
+                    this.switchCellToViewMode(event.target);
+                    event.preventDefault();
+                }
             }
             else if (event.keyCode == 27) {
-                this.onEditCancel.emit({ column: column, data: rowData, index: rowIndex });
-                this.domHandler.invokeElementMethod(event.target, 'blur');
                 this.switchCellToViewMode(event.target);
                 event.preventDefault();
             }
             else if (event.keyCode == 9) {
-                this.onEditComplete.emit({ column: column, data: rowData, index: rowIndex });
                 if (event.shiftKey)
                     this.moveToPreviousCell(event);
                 else
@@ -1380,6 +1459,25 @@ var DataTable = (function () {
             }
         }
     };
+    DataTable.prototype.onCellEditorInput = function (event, column, rowData, rowIndex) {
+        if (this.editable) {
+            this.onEdit.emit({ originalEvent: event, column: column, data: rowData, index: rowIndex });
+        }
+    };
+    DataTable.prototype.onCellEditorChange = function (event, column, rowData, rowIndex) {
+        if (this.editable) {
+            this.editChanged = true;
+            this.onEditComplete.emit({ column: column, data: rowData, index: rowIndex });
+        }
+    };
+    DataTable.prototype.onCellEditorBlur = function (event, column, rowData, rowIndex) {
+        if (this.editable) {
+            if (this.editChanged)
+                this.editChanged = false;
+            else
+                this.onEditCancel.emit({ column: column, data: rowData, index: rowIndex });
+        }
+    };
     DataTable.prototype.moveToPreviousCell = function (event) {
         var currentCell = this.findCell(event.target);
         var row = currentCell.parentElement;
@@ -1630,6 +1728,9 @@ var DataTable = (function () {
             }
             if (allowDrop) {
                 this.objectUtils.reorderArray(this.columns, dragIndex, dropIndex);
+                if (this.scrollable) {
+                    this.initScrollableColumns();
+                }
                 this.onColReorder.emit({
                     dragIndex: dragIndex,
                     dropIndex: dropIndex,
@@ -1664,7 +1765,7 @@ var DataTable = (function () {
         }
     };
     DataTable.prototype.hasFooter = function () {
-        if (this.footerColumnGroup) {
+        if (this.footerColumnGroups.first) {
             return true;
         }
         else {
@@ -1682,9 +1783,6 @@ var DataTable = (function () {
         return !this.dataToRender || (this.dataToRender.length == 0);
     };
     DataTable.prototype.createLazyLoadMetadata = function () {
-        if (this.enableLoader) {
-            this.loading = true;
-        }
         return {
             first: this.first,
             rows: this.virtualScroll ? this.rows * 2 : this.rows,
@@ -1754,6 +1852,9 @@ var DataTable = (function () {
         return this.findExpandedRowGroupIndex(row) != -1;
     };
     DataTable.prototype.toggleRowGroup = function (event, row) {
+        if (!this.expandedRowsGroups) {
+            this.expandedRowsGroups = [];
+        }
         this.rowGroupToggleClick = true;
         var index = this.findExpandedRowGroupIndex(row);
         var rowGroupField = this.resolveFieldData(row, this.groupField);
@@ -1765,7 +1866,9 @@ var DataTable = (function () {
             });
         }
         else {
-            this.expandedRowsGroups = this.expandedRowsGroups || [];
+            if (this.rowGroupExpandMode === 'single') {
+                this.expandedRowsGroups = [];
+            }
             this.expandedRowsGroups.push(rowGroupField);
             this.onRowGroupExpand.emit({
                 originalEvent: event,
@@ -1775,8 +1878,8 @@ var DataTable = (function () {
         event.preventDefault();
     };
     DataTable.prototype.reset = function () {
-        this.sortField = null;
-        this.sortOrder = 1;
+        this._sortField = null;
+        this._sortOrder = 1;
         this.filteredValue = null;
         this.filters = {};
         this._first = 0;
@@ -1787,25 +1890,30 @@ var DataTable = (function () {
         else
             this.updateDataToRender(this.value);
     };
-    DataTable.prototype.exportCSV = function () {
+    DataTable.prototype.exportCSV = function (options) {
         var _this = this;
         var data = this.filteredValue || this.value;
         var csv = '\ufeff';
+        if (options && options.selectionOnly) {
+            data = this.selection || [];
+        }
         //headers
         for (var i = 0; i < this.columns.length; i++) {
-            if (this.columns[i].field) {
-                csv += '"' + (this.columns[i].header || this.columns[i].field) + '"';
+            var column = this.columns[i];
+            if (column.exportable && column.field) {
+                csv += '"' + (column.header || column.field) + '"';
                 if (i < (this.columns.length - 1)) {
                     csv += this.csvSeparator;
                 }
             }
         }
-        //body        
+        //body
         data.forEach(function (record, i) {
             csv += '\n';
             for (var i_1 = 0; i_1 < _this.columns.length; i_1++) {
-                if (_this.columns[i_1].field) {
-                    csv += '"' + _this.resolveFieldData(record, _this.columns[i_1].field) + '"';
+                var column = _this.columns[i_1];
+                if (column.exportable && column.field) {
+                    csv += '"' + _this.resolveFieldData(record, column.field) + '"';
                     if (i_1 < (_this.columns.length - 1)) {
                         csv += _this.csvSeparator;
                     }
@@ -1888,6 +1996,9 @@ var DataTable = (function () {
         if (this.columnsSubscription) {
             this.columnsSubscription.unsubscribe();
         }
+        if (this.virtualScrollCallback) {
+            this.virtualScrollCallback = null;
+        }
     };
     return DataTable;
 }());
@@ -1927,6 +2038,10 @@ __decorate([
     core_1.Input(),
     __metadata("design:type", Boolean)
 ], DataTable.prototype, "editable", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", Boolean)
+], DataTable.prototype, "showHeaderCheckbox", void 0);
 __decorate([
     core_1.Output(),
     __metadata("design:type", core_1.EventEmitter)
@@ -2035,14 +2150,6 @@ __decorate([
     core_1.Input(),
     __metadata("design:type", String)
 ], DataTable.prototype, "sortMode", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", String)
-], DataTable.prototype, "sortField", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Number)
-], DataTable.prototype, "sortOrder", void 0);
 __decorate([
     core_1.Input(),
     __metadata("design:type", Number)
@@ -2051,10 +2158,6 @@ __decorate([
     core_1.Input(),
     __metadata("design:type", String)
 ], DataTable.prototype, "groupField", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Array)
-], DataTable.prototype, "multiSortMeta", void 0);
 __decorate([
     core_1.Input(),
     __metadata("design:type", Object)
@@ -2207,14 +2310,14 @@ __decorate([
     core_1.Input(),
     __metadata("design:type", String)
 ], DataTable.prototype, "loadingIcon", void 0);
-__decorate([
-    core_1.Input(),
-    __metadata("design:type", Boolean)
-], DataTable.prototype, "enableLoader", void 0);
 __decorate([
     core_1.Input(),
     __metadata("design:type", Number)
 ], DataTable.prototype, "virtualScrollDelay", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String)
+], DataTable.prototype, "rowGroupExpandMode", void 0);
 __decorate([
     core_1.Output(),
     __metadata("design:type", core_1.EventEmitter)
@@ -2248,13 +2351,28 @@ __decorate([
     __metadata("design:type", core_1.QueryList)
 ], DataTable.prototype, "cols", void 0);
 __decorate([
-    core_1.ContentChild(shared_2.HeaderColumnGroup),
-    __metadata("design:type", shared_2.HeaderColumnGroup)
-], DataTable.prototype, "headerColumnGroup", void 0);
+    core_1.ContentChildren(shared_2.HeaderColumnGroup),
+    __metadata("design:type", core_1.QueryList)
+], DataTable.prototype, "headerColumnGroups", void 0);
+__decorate([
+    core_1.ContentChildren(shared_2.FooterColumnGroup),
+    __metadata("design:type", core_1.QueryList)
+], DataTable.prototype, "footerColumnGroups", void 0);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", Array),
+    __metadata("design:paramtypes", [Array])
+], DataTable.prototype, "multiSortMeta", null);
+__decorate([
+    core_1.Input(),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], DataTable.prototype, "sortField", null);
 __decorate([
-    core_1.ContentChild(shared_2.FooterColumnGroup),
-    __metadata("design:type", shared_2.FooterColumnGroup)
-], DataTable.prototype, "footerColumnGroup", void 0);
+    core_1.Input(),
+    __metadata("design:type", Number),
+    __metadata("design:paramtypes", [Number])
+], DataTable.prototype, "sortOrder", null);
 __decorate([
     core_1.Input(),
     __metadata("design:type", Array),
@@ -2278,7 +2396,7 @@ __decorate([
 DataTable = __decorate([
     core_1.Component({
         selector: 'p-dataTable',
-        template: "\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [style.width]=\"containerWidth\"\n            [ngClass]=\"{'ui-datatable ui-widget':true,'ui-datatable-reflow':responsive,'ui-datatable-stacked':stacked,'ui-datatable-resizable':resizableColumns,'ui-datatable-scrollable':scrollable}\">\n            <div class=\"ui-datatable-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-datatable-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'fa fa-spin fa-2x ' + loadingIcon\"></i>\n            </div>\n            <div class=\"ui-datatable-header ui-widget-header\" *ngIf=\"header\">\n                <ng-content select=\"p-header\"></ng-content>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && paginatorPosition =='top' || paginatorPosition =='both'\"></p-paginator>\n            <div class=\"ui-datatable-tablewrapper\" *ngIf=\"!scrollable\">\n                <table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <thead class=\"ui-datatable-thead\">\n                        <tr *ngIf=\"!headerColumnGroup\" class=\"ui-state-default\" [pColumnHeaders]=\"columns\"></tr>\n                        <ng-template [ngIf]=\"headerColumnGroup\">\n                            <tr *ngFor=\"let headerRow of headerColumnGroup.rows\" class=\"ui-state-default\" [pColumnHeaders]=\"headerRow.columns\"></tr>\n                        </ng-template>\n                    </thead>\n                    <tfoot *ngIf=\"hasFooter()\" class=\"ui-datatable-tfoot\">\n                        <tr *ngIf=\"!footerColumnGroup\" class=\"ui-state-default\" [pColumnFooters]=\"columns\"></tr>\n                        <ng-template [ngIf]=\"footerColumnGroup\">\n                            <tr *ngFor=\"let footerRow of footerColumnGroup.rows\" class=\"ui-state-default\" [pColumnFooters]=\"footerRow.columns\"></tr>\n                        </ng-template>\n                    </tfoot>\n                    <tbody [ngClass]=\"{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}\" [pTableBody]=\"columns\" [data]=\"dataToRender\"></tbody>\n                </table>\n            </div>\n            \n            <ng-template [ngIf]=\"scrollable\">\n                <div class=\"ui-datatable-scrollable-wrapper ui-helper-clearfix\" [ngClass]=\"{'max-height':scrollHeight}\">\n                    <div *ngIf=\"hasFrozenColumns()\" [pScrollableView]=\"frozenColumns\" frozen=\"true\" \n                        [ngStyle]=\"{'width':this.frozenWidth}\" class=\"ui-datatable-scrollable-view ui-datatable-frozen-view\"></div>\n                    <div [pScrollableView]=\"scrollableColumns\" [ngStyle]=\"{'width':this.unfrozenWidth, 'left': this.frozenWidth}\"\n                        class=\"ui-datatable-scrollable-view\" [virtualScroll]=\"virtualScroll\" (onVirtualScroll)=\"onVirtualScroll($event)\"\n                        [ngClass]=\"{'ui-datatable-unfrozen-view': hasFrozenColumns()}\"></div>\n                </div>\n            </ng-template>\n            \n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && paginatorPosition =='bottom' || paginatorPosition =='both'\"></p-paginator>\n            <div class=\"ui-datatable-footer ui-widget-header\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            \n            <div class=\"ui-column-resizer-helper ui-state-highlight\" style=\"display:none\"></div>\n            <span class=\"fa fa-arrow-down ui-datatable-reorder-indicator-up\" style=\"position: absolute; display: none;\"></span>\n            <span class=\"fa fa-arrow-up ui-datatable-reorder-indicator-down\" style=\"position: absolute; display: none;\"></span>\n        </div>\n    ",
+        template: "\n        <div [ngStyle]=\"style\" [class]=\"styleClass\" [style.width]=\"containerWidth\"\n            [ngClass]=\"{'ui-datatable ui-widget':true,'ui-datatable-reflow':responsive,'ui-datatable-stacked':stacked,'ui-datatable-resizable':resizableColumns,'ui-datatable-scrollable':scrollable}\">\n            <div class=\"ui-datatable-loading ui-widget-overlay\" *ngIf=\"loading\"></div>\n            <div class=\"ui-datatable-loading-content\" *ngIf=\"loading\">\n                <i [class]=\"'fa fa-spin fa-2x ' + loadingIcon\"></i>\n            </div>\n            <div class=\"ui-datatable-header ui-widget-header\" *ngIf=\"header\">\n                <ng-content select=\"p-header\"></ng-content>\n            </div>\n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-top\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'top' || paginatorPosition =='both')\"></p-paginator>\n            <div class=\"ui-datatable-tablewrapper\" *ngIf=\"!scrollable\">\n                <table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <thead class=\"ui-datatable-thead\">\n                        <tr *ngIf=\"!headerColumnGroups.first\" class=\"ui-state-default\" [pColumnHeaders]=\"columns\"></tr>\n                        <ng-template [ngIf]=\"headerColumnGroups.first\">\n                            <tr *ngFor=\"let headerRow of headerColumnGroups.first.rows\" class=\"ui-state-default\" [pColumnHeaders]=\"headerRow.columns\"></tr>\n                        </ng-template>\n                    </thead>\n                    <tfoot *ngIf=\"hasFooter()\" class=\"ui-datatable-tfoot\">\n                        <tr *ngIf=\"!footerColumnGroups.first\" class=\"ui-state-default\" [pColumnFooters]=\"columns\"></tr>\n                        <ng-template [ngIf]=\"footerColumnGroups.first\">\n                            <tr *ngFor=\"let footerRow of footerColumnGroups.first.rows\" class=\"ui-state-default\" [pColumnFooters]=\"footerRow.columns\"></tr>\n                        </ng-template>\n                    </tfoot>\n                    <tbody [ngClass]=\"{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}\" [pTableBody]=\"columns\" [data]=\"dataToRender\"></tbody>\n                </table>\n            </div>\n            \n            <ng-template [ngIf]=\"scrollable\">\n                <div class=\"ui-datatable-scrollable-wrapper ui-helper-clearfix\">\n                    <div *ngIf=\"hasFrozenColumns()\" [pScrollableView]=\"frozenColumns\" frozen=\"true\"\n                        [headerColumnGroup]=\"frozenHeaderColumnGroup\" [footerColumnGroup]=\"frozenFooterColumnGroup\"\n                        [ngStyle]=\"{'width':this.frozenWidth}\" class=\"ui-datatable-scrollable-view ui-datatable-frozen-view\"></div>\n                    <div [pScrollableView]=\"scrollableColumns\" [ngStyle]=\"{'width':this.unfrozenWidth, 'left': this.frozenWidth}\"\n                        [headerColumnGroup]=\"scrollableHeaderColumnGroup\" [footerColumnGroup]=\"scrollableFooterColumnGroup\"\n                        class=\"ui-datatable-scrollable-view\" [virtualScroll]=\"virtualScroll\" (onVirtualScroll)=\"onVirtualScroll($event)\"\n                        [ngClass]=\"{'ui-datatable-unfrozen-view': hasFrozenColumns()}\"></div>\n                </div>\n            </ng-template>\n            \n            <p-paginator [rows]=\"rows\" [first]=\"first\" [totalRecords]=\"totalRecords\" [pageLinkSize]=\"pageLinks\" styleClass=\"ui-paginator-bottom\" [alwaysShow]=\"alwaysShowPaginator\"\n                (onPageChange)=\"onPageChange($event)\" [rowsPerPageOptions]=\"rowsPerPageOptions\" *ngIf=\"paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')\"></p-paginator>\n            <div class=\"ui-datatable-footer ui-widget-header\" *ngIf=\"footer\">\n                <ng-content select=\"p-footer\"></ng-content>\n            </div>\n            \n            <div class=\"ui-column-resizer-helper ui-state-highlight\" style=\"display:none\"></div>\n            <span class=\"fa fa-arrow-down ui-datatable-reorder-indicator-up\" style=\"position: absolute; display: none;\"></span>\n            <span class=\"fa fa-arrow-up ui-datatable-reorder-indicator-down\" style=\"position: absolute; display: none;\"></span>\n        </div>\n    ",
         providers: [domhandler_1.DomHandler, objectutils_1.ObjectUtils]
     }),
     __metadata("design:paramtypes", [core_1.ElementRef, domhandler_1.DomHandler, core_1.IterableDiffers,