primeng 7.1.0-rc.1 → 7.1.3

package/components/table/table.js

@@ -60,14 +60,15 @@ var TableService = /** @class */ (function () {
 }());
 exports.TableService = TableService;
 var Table = /** @class */ (function () {
-    function Table(el, zone, tableService) {
+    function Table(el, zone, tableService, cd) {
         this.el = el;
         this.zone = zone;
         this.tableService = tableService;
-        this.first = 0;
+        this.cd = cd;
         this.pageLinks = 5;
         this.alwaysShowPaginator = true;
         this.paginatorPosition = 'bottom';
+        this.currentPageReportTemplate = '{currentPage} of {totalPages}';
         this.defaultSortOrder = 1;
         this.sortMode = 'single';
         this.resetPageOnSort = true;
@@ -109,8 +110,12 @@ var Table = /** @class */ (function () {
         this.onEditCancel = new core_1.EventEmitter();
         this.onHeaderCheckboxToggle = new core_1.EventEmitter();
         this.sortFunction = new core_1.EventEmitter();
+        this.firstChange = new core_1.EventEmitter();
+        this.onStateSave = new core_1.EventEmitter();
+        this.onStateRestore = new core_1.EventEmitter();
         this._value = [];
         this._totalRecords = 0;
+        this._first = 0;
         this.selectionKeys = {};
         this._sortOrder = 1;
         this.filterConstraints = {
@@ -341,6 +346,16 @@ var Table = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Table.prototype, "first", {
+        get: function () {
+            return this._first;
+        },
+        set: function (val) {
+            this._first = val;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(Table.prototype, "totalRecords", {
         get: function () {
             return this._totalRecords;
@@ -436,10 +451,12 @@ var Table = /** @class */ (function () {
             first: this.first,
             rows: this.rows
         });
+        this.firstChange.emit(this.first);
         this.tableService.onValueChange(this.value);
         if (this.isStateful()) {
             this.saveState();
         }
+        this.anchorRowIndex = null;
     };
     Table.prototype.sort = function (event) {
         var originalEvent = event.originalEvent;
@@ -470,14 +487,18 @@ var Table = /** @class */ (function () {
         if (this.isStateful()) {
             this.saveState();
         }
+        this.anchorRowIndex = null;
     };
     Table.prototype.sortSingle = function () {
         var _this = this;
         if (this.sortField && this.sortOrder) {
-            if (this.restoringSort)
+            if (this.restoringSort) {
                 this.restoringSort = false;
-            else if (this.resetPageOnSort)
+            }
+            else if (this.resetPageOnSort) {
                 this.first = 0;
+                this.firstChange.emit(this.first);
+            }
             if (this.lazy) {
                 this.onLazyLoad.emit(this.createLazyLoadMetadata());
             }
@@ -602,7 +623,7 @@ var Table = /** @class */ (function () {
     Table.prototype.handleRowClick = function (event) {
         var target = event.originalEvent.target;
         var targetNode = target.nodeName;
-        var parentNode = target.parentElement.nodeName;
+        var parentNode = target.parentElement && target.parentElement.nodeName;
         if (targetNode == 'INPUT' || targetNode == 'BUTTON' || targetNode == 'A' ||
             parentNode == 'INPUT' || parentNode == 'BUTTON' || parentNode == 'A' ||
             (domhandler_1.DomHandler.hasClass(event.originalEvent.target, 'ui-clickable'))) {
@@ -764,6 +785,10 @@ var Table = /** @class */ (function () {
             rangeStart = rowIndex;
             rangeEnd = rowIndex;
         }
+        if (this.lazy && this.paginator) {
+            rangeStart -= this.first;
+            rangeEnd -= this.first;
+        }
         for (var i = rangeStart; i <= rangeEnd; i++) {
             var rangeRowData = this.filteredValue ? this.filteredValue[i] : this.value[i];
             if (!this.isSelected(rangeRowData)) {
@@ -909,6 +934,7 @@ var Table = /** @class */ (function () {
             _this._filter();
             _this.filterTimeout = null;
         }, this.filterDelay);
+        this.anchorRowIndex = null;
     };
     Table.prototype.filterGlobal = function (value, matchMode) {
         this.filter(value, 'global', matchMode);
@@ -1002,10 +1028,14 @@ var Table = /** @class */ (function () {
         if (this.isStateful() && !this.restoringFilter) {
             this.saveState();
         }
-        if (this.restoringFilter)
+        if (this.restoringFilter) {
             this.restoringFilter = false;
-        else
+        }
+        else {
             this.first = 0;
+            this.firstChange.emit(this.first);
+        }
+        this.cd.detectChanges();
     };
     Table.prototype.hasFilter = function () {
         var empty = true;
@@ -1036,6 +1066,7 @@ var Table = /** @class */ (function () {
         this.filteredValue = null;
         this.filters = {};
         this.first = 0;
+        this.firstChange.emit(this.first);
         if (this.lazy) {
             this.onLazyLoad.emit(this.createLazyLoadMetadata());
         }
@@ -1108,8 +1139,10 @@ var Table = /** @class */ (function () {
             document.body.removeChild(link);
         }
     };
-    Table.prototype.updateEditingCell = function (cell) {
+    Table.prototype.updateEditingCell = function (cell, data, field) {
         this.editingCell = cell;
+        this.editingCellData = data;
+        this.editingCellField = field;
         this.bindDocumentEditListener();
     };
     Table.prototype.isEditingCellValid = function () {
@@ -1122,6 +1155,9 @@ var Table = /** @class */ (function () {
                 if (_this.editingCell && !_this.editingCellClick && _this.isEditingCellValid()) {
                     domhandler_1.DomHandler.removeClass(_this.editingCell, 'ui-editing-cell');
                     _this.editingCell = null;
+                    _this.onEditComplete.emit({ field: _this.editingCellField, data: _this.editingCellData });
+                    _this.editingCellField = null;
+                    _this.editingCellData = null;
                     _this.unbindDocumentEditListener();
                 }
                 _this.editingCellClick = false;
@@ -1243,19 +1279,7 @@ var Table = /** @class */ (function () {
             else if (this.columnResizeMode === 'expand') {
                 if (newColumnWidth > minWidth) {
                     if (this.scrollable) {
-                        var scrollableView = this.findParentScrollableView(column);
-                        var scrollableBodyTable = domhandler_1.DomHandler.findSingle(scrollableView, 'table.ui-table-scrollable-body-table');
-                        var scrollableHeaderTable = domhandler_1.DomHandler.findSingle(scrollableView, 'table.ui-table-scrollable-header-table');
-                        var scrollableFooterTable = domhandler_1.DomHandler.findSingle(scrollableView, 'table.ui-table-scrollable-footer-table');
-                        scrollableBodyTable.style.width = scrollableBodyTable.offsetWidth + delta + 'px';
-                        scrollableHeaderTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
-                        if (scrollableFooterTable) {
-                            scrollableFooterTable.style.width = scrollableHeaderTable.offsetWidth + delta + 'px';
-                        }
-                        var resizeColumnIndex = domhandler_1.DomHandler.index(column);
-                        this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
-                        this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
-                        this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
+                        this.setScrollableItemsWidthOnExpandResize(column, newColumnWidth, delta);
                     }
                     else {
                         this.tableViewChild.nativeElement.style.width = this.tableViewChild.nativeElement.offsetWidth + delta + 'px';
@@ -1276,6 +1300,33 @@ var Table = /** @class */ (function () {
         this.resizeHelperViewChild.nativeElement.style.display = 'none';
         domhandler_1.DomHandler.removeClass(this.containerViewChild.nativeElement, 'ui-unselectable-text');
     };
+    Table.prototype.setScrollableItemsWidthOnExpandResize = function (column, newColumnWidth, delta) {
+        var scrollableView = column ? this.findParentScrollableView(column) : this.containerViewChild.nativeElement;
+        var scrollableBody = domhandler_1.DomHandler.findSingle(scrollableView, '.ui-table-scrollable-body');
+        var scrollableHeader = domhandler_1.DomHandler.findSingle(scrollableView, '.ui-table-scrollable-header');
+        var scrollableFooter = domhandler_1.DomHandler.findSingle(scrollableView, '.ui-table-scrollable-footer');
+        var scrollableBodyTable = domhandler_1.DomHandler.findSingle(scrollableBody, 'table.ui-table-scrollable-body-table');
+        var scrollableHeaderTable = domhandler_1.DomHandler.findSingle(scrollableHeader, 'table.ui-table-scrollable-header-table');
+        var scrollableFooterTable = domhandler_1.DomHandler.findSingle(scrollableFooter, 'table.ui-table-scrollable-footer-table');
+        var scrollableBodyTableWidth = column ? scrollableBodyTable.offsetWidth + delta : newColumnWidth;
+        var scrollableHeaderTableWidth = column ? scrollableHeaderTable.offsetWidth + delta : newColumnWidth;
+        var isContainerInViewport = this.containerViewChild.nativeElement.offsetWidth >= scrollableBodyTableWidth;
+        var setWidth = function (container, table, width, isContainerInViewport) {
+            if (container && table) {
+                container.style.width = isContainerInViewport ? width + domhandler_1.DomHandler.calculateScrollbarWidth(scrollableBody) + 'px' : 'auto';
+                table.style.width = width + 'px';
+            }
+        };
+        setWidth(scrollableBody, scrollableBodyTable, scrollableBodyTableWidth, isContainerInViewport);
+        setWidth(scrollableHeader, scrollableHeaderTable, scrollableHeaderTableWidth, isContainerInViewport);
+        setWidth(scrollableFooter, scrollableFooterTable, scrollableHeaderTableWidth, isContainerInViewport);
+        if (column) {
+            var resizeColumnIndex = domhandler_1.DomHandler.index(column);
+            this.resizeColGroup(scrollableHeaderTable, resizeColumnIndex, newColumnWidth, null);
+            this.resizeColGroup(scrollableBodyTable, resizeColumnIndex, newColumnWidth, null);
+            this.resizeColGroup(scrollableFooterTable, resizeColumnIndex, newColumnWidth, null);
+        }
+    };
     Table.prototype.findParentScrollableView = function (column) {
         if (column) {
             var parent_1 = column.parentElement;
@@ -1445,6 +1496,7 @@ var Table = /** @class */ (function () {
     Table.prototype.handleVirtualScroll = function (event) {
         var _this = this;
         this.first = (event.page - 1) * this.rows;
+        this.firstChange.emit(this.first);
         this.virtualScrollCallback = event.callback;
         this.zone.run(function () {
             if (_this.virtualScrollTimer) {
@@ -1507,6 +1559,7 @@ var Table = /** @class */ (function () {
         if (Object.keys(state).length) {
             storage.setItem(this.stateKey, JSON.stringify(state));
         }
+        this.onStateSave.emit(state);
     };
     Table.prototype.clearState = function () {
         var storage = this.getStorage();
@@ -1522,6 +1575,7 @@ var Table = /** @class */ (function () {
             if (this.paginator) {
                 this.first = state.first;
                 this.rows = state.rows;
+                this.firstChange.emit(this.first);
             }
             if (state.sortField) {
                 this.restoringSort = true;
@@ -1547,6 +1601,7 @@ var Table = /** @class */ (function () {
                 this.selection = state.selection;
             }
             this.stateRestored = true;
+            this.onStateRestore.emit(state);
         }
     };
     Table.prototype.saveColumnWidths = function (state) {
@@ -1564,14 +1619,7 @@ var Table = /** @class */ (function () {
             var widths_1 = this.columnWidthsState.split(',');
             if (this.columnResizeMode === 'expand' && this.tableWidthState) {
                 if (this.scrollable) {
-                    var scrollableBodyTable = domhandler_1.DomHandler.findSingle(this.containerViewChild.nativeElement, '.ui-table-scrollable-body-table');
-                    var scrollableHeaderTable = domhandler_1.DomHandler.findSingle(this.containerViewChild.nativeElement, '.ui-table-scrollable-header-table');
-                    var scrollableFooterTable = domhandler_1.DomHandler.findSingle(this.containerViewChild.nativeElement, '.ui-table-scrollable-footer-table');
-                    scrollableBodyTable.style.width = this.tableWidthState;
-                    scrollableHeaderTable.style.width = this.tableWidthState;
-                    if (scrollableFooterTable) {
-                        scrollableFooterTable.style.width = this.tableWidthState;
-                    }
+                    this.setScrollableItemsWidthOnExpandResize(null, this.tableWidthState, 0);
                 }
                 else {
                     this.tableViewChild.nativeElement.style.width = this.tableWidthState;
@@ -1665,10 +1713,6 @@ var Table = /** @class */ (function () {
         core_1.Input(),
         __metadata("design:type", Number)
     ], Table.prototype, "rows", void 0);
-    __decorate([
-        core_1.Input(),
-        __metadata("design:type", Number)
-    ], Table.prototype, "first", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Number)
@@ -1689,6 +1733,14 @@ var Table = /** @class */ (function () {
         core_1.Input(),
         __metadata("design:type", Object)
     ], Table.prototype, "paginatorDropdownAppendTo", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", String)
+    ], Table.prototype, "currentPageReportTemplate", void 0);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Boolean)
+    ], Table.prototype, "showCurrentPageReport", void 0);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Number)
@@ -1929,6 +1981,18 @@ var Table = /** @class */ (function () {
         core_1.Output(),
         __metadata("design:type", core_1.EventEmitter)
     ], Table.prototype, "sortFunction", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Table.prototype, "firstChange", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Table.prototype, "onStateSave", void 0);
+    __decorate([
+        core_1.Output(),
+        __metadata("design:type", core_1.EventEmitter)
+    ], Table.prototype, "onStateRestore", void 0);
     __decorate([
         core_1.ViewChild('container'),
         __metadata("design:type", core_1.ElementRef)
@@ -1963,6 +2027,11 @@ var Table = /** @class */ (function () {
         __metadata("design:type", Array),
         __metadata("design:paramtypes", [Array])
     ], Table.prototype, "columns", null);
+    __decorate([
+        core_1.Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], Table.prototype, "first", null);
     __decorate([
         core_1.Input(),
         __metadata("design:type", Number),
@@ -1991,10 +2060,10 @@ var Table = /** @class */ (function () {
     Table = __decorate([
         core_1.Component({
             selector: 'p-table',
-            template: "\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\"\n            [ngClass]=\"{'ui-table ui-widget': true, 'ui-table-responsive': responsive, 'ui-table-resizable': resizableColumns,\n                'ui-table-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'ui-table-hoverable-rows': (rowHover||selectionMode), 'ui-table-auto-layout': autoLayout}\">\n            <div class=\"ui-table-loading ui-widget-overlay\" *ngIf=\"loading && showLoader\"></div>\n            <div class=\"ui-table-loading-content\" *ngIf=\"loading && showLoader\">\n                <i [class]=\"'ui-table-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"ui-table-caption ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\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')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"></p-paginator>\n            \n            <div class=\"ui-table-wrapper\" *ngIf=\"!scrollable\">\n                <table #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"ui-table-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tfoot *ngIf=\"footerTemplate\" class=\"ui-table-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                    <tbody class=\"ui-table-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                </table>\n            </div>\n\n            <div class=\"ui-table-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"ui-table-scrollable-view ui-table-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"ui-table-scrollable-view\" [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\" [ngStyle]=\"{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}\"></div>\n            </div>\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')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"></p-paginator>\n            <div *ngIf=\"summaryTemplate\" class=\"ui-table-summary ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"ui-column-resizer-helper ui-state-highlight\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down ui-table-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up ui-table-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ",
+            template: "\n        <div #container [ngStyle]=\"style\" [class]=\"styleClass\"\n            [ngClass]=\"{'ui-table ui-widget': true, 'ui-table-responsive': responsive, 'ui-table-resizable': resizableColumns,\n                'ui-table-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),\n                'ui-table-hoverable-rows': (rowHover||selectionMode), 'ui-table-auto-layout': autoLayout}\">\n            <div class=\"ui-table-loading ui-widget-overlay\" *ngIf=\"loading && showLoader\"></div>\n            <div class=\"ui-table-loading-content\" *ngIf=\"loading && showLoader\">\n                <i [class]=\"'ui-table-loading-icon pi-spin ' + loadingIcon\"></i>\n            </div>\n            <div *ngIf=\"captionTemplate\" class=\"ui-table-caption ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"captionTemplate\"></ng-container>\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')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\"></p-paginator>\n            \n            <div class=\"ui-table-wrapper\" *ngIf=\"!scrollable\">\n                <table #table [ngClass]=\"tableStyleClass\" [ngStyle]=\"tableStyle\">\n                    <ng-container *ngTemplateOutlet=\"colGroupTemplate; context {$implicit: columns}\"></ng-container>\n                    <thead class=\"ui-table-thead\">\n                        <ng-container *ngTemplateOutlet=\"headerTemplate; context: {$implicit: columns}\"></ng-container>\n                    </thead>\n                    <tfoot *ngIf=\"footerTemplate\" class=\"ui-table-tfoot\">\n                        <ng-container *ngTemplateOutlet=\"footerTemplate; context {$implicit: columns}\"></ng-container>\n                    </tfoot>\n                    <tbody class=\"ui-table-tbody\" [pTableBody]=\"columns\" [pTableBodyTemplate]=\"bodyTemplate\"></tbody>\n                </table>\n            </div>\n\n            <div class=\"ui-table-scrollable-wrapper\" *ngIf=\"scrollable\">\n               <div class=\"ui-table-scrollable-view ui-table-frozen-view\" *ngIf=\"frozenColumns||frozenBodyTemplate\" [pScrollableView]=\"frozenColumns\" [frozen]=\"true\" [ngStyle]=\"{width: frozenWidth}\" [scrollHeight]=\"scrollHeight\"></div>\n               <div class=\"ui-table-scrollable-view\" [pScrollableView]=\"columns\" [frozen]=\"false\" [scrollHeight]=\"scrollHeight\" [ngStyle]=\"{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}\"></div>\n            </div>\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')\"\n                [templateLeft]=\"paginatorLeftTemplate\" [templateRight]=\"paginatorRightTemplate\" [dropdownAppendTo]=\"paginatorDropdownAppendTo\"\n                [currentPageReportTemplate]=\"currentPageReportTemplate\" [showCurrentPageReport]=\"showCurrentPageReport\"></p-paginator>\n            \n                <div *ngIf=\"summaryTemplate\" class=\"ui-table-summary ui-widget-header\">\n                <ng-container *ngTemplateOutlet=\"summaryTemplate\"></ng-container>\n            </div>\n\n            <div #resizeHelper class=\"ui-column-resizer-helper ui-state-highlight\" style=\"display:none\" *ngIf=\"resizableColumns\"></div>\n\n            <span #reorderIndicatorUp class=\"pi pi-arrow-down ui-table-reorder-indicator-up\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n            <span #reorderIndicatorDown class=\"pi pi-arrow-up ui-table-reorder-indicator-down\" style=\"display:none\" *ngIf=\"reorderableColumns\"></span>\n        </div>\n    ",
             providers: [TableService]
         }),
-        __metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone, TableService])
+        __metadata("design:paramtypes", [core_1.ElementRef, core_1.NgZone, TableService, core_1.ChangeDetectorRef])
     ], Table);
     return Table;
 }());
@@ -2111,7 +2180,7 @@ var ScrollableView = /** @class */ (function () {
             var scrollBarWidth = domhandler_1.DomHandler.calculateScrollbarWidth();
             if (_this.scrollHeaderViewChild && _this.scrollHeaderViewChild.nativeElement) {
                 _this.headerScrollListener = _this.onHeaderScroll.bind(_this);
-                _this.scrollHeaderBoxViewChild.nativeElement.addEventListener('scroll', _this.headerScrollListener);
+                _this.scrollHeaderViewChild.nativeElement.addEventListener('scroll', _this.headerScrollListener);
             }
             if (_this.scrollFooterViewChild && _this.scrollFooterViewChild.nativeElement) {
                 _this.footerScrollListener = _this.onFooterScroll.bind(_this);
@@ -2125,7 +2194,7 @@ var ScrollableView = /** @class */ (function () {
     };
     ScrollableView.prototype.unbindEvents = function () {
         if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
-            this.scrollHeaderBoxViewChild.nativeElement.removeEventListener('scroll', this.headerScrollListener);
+            this.scrollHeaderViewChild.nativeElement.removeEventListener('scroll', this.headerScrollListener);
         }
         if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
             this.scrollFooterViewChild.nativeElement.removeEventListener('scroll', this.footerScrollListener);
@@ -2133,13 +2202,27 @@ var ScrollableView = /** @class */ (function () {
         this.scrollBodyViewChild.nativeElement.removeEventListener('scroll', this.bodyScrollListener);
     };
     ScrollableView.prototype.onHeaderScroll = function (event) {
-        this.scrollHeaderViewChild.nativeElement.scrollLeft = 0;
+        var scrollLeft = this.scrollHeaderViewChild.nativeElement.scrollLeft;
+        this.scrollBodyViewChild.nativeElement.scrollLeft = scrollLeft;
+        if (this.scrollFooterViewChild && this.scrollFooterViewChild.nativeElement) {
+            this.scrollFooterViewChild.nativeElement.scrollLeft = scrollLeft;
+        }
+        this.preventBodyScrollPropagation = true;
     };
     ScrollableView.prototype.onFooterScroll = function (event) {
-        this.scrollFooterViewChild.nativeElement.scrollLeft = 0;
+        var scrollLeft = this.scrollFooterViewChild.nativeElement.scrollLeft;
+        this.scrollBodyViewChild.nativeElement.scrollLeft = scrollLeft;
+        if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
+            this.scrollHeaderViewChild.nativeElement.scrollLeft = scrollLeft;
+        }
+        this.preventBodyScrollPropagation = true;
     };
     ScrollableView.prototype.onBodyScroll = function (event) {
         var _this = this;
+        if (this.preventBodyScrollPropagation) {
+            this.preventBodyScrollPropagation = false;
+            return;
+        }
         if (this.scrollHeaderViewChild && this.scrollHeaderViewChild.nativeElement) {
             this.scrollHeaderBoxViewChild.nativeElement.style.marginLeft = -1 * this.scrollBodyViewChild.nativeElement.scrollLeft + 'px';
         }
@@ -2172,6 +2255,7 @@ var ScrollableView = /** @class */ (function () {
                         if (_this.frozenSiblingBody) {
                             _this.frozenSiblingBody.children[0].style.top = _this.scrollTableViewChild.nativeElement.style.top;
                         }
+                        _this.dt.anchorRowIndex = null;
                     }
                 });
             }
@@ -2937,7 +3021,7 @@ var EditableColumn = /** @class */ (function () {
     };
     EditableColumn.prototype.openCell = function () {
         var _this = this;
-        this.dt.updateEditingCell(this.el.nativeElement);
+        this.dt.updateEditingCell(this.el.nativeElement, this.data, this.field);
         domhandler_1.DomHandler.addClass(this.el.nativeElement, 'ui-editing-cell');
         this.dt.onEditInit.emit({ field: this.field, data: this.data });
         this.zone.runOutsideAngular(function () {
@@ -2953,6 +3037,8 @@ var EditableColumn = /** @class */ (function () {
     EditableColumn.prototype.closeEditingCell = function () {
         domhandler_1.DomHandler.removeClass(this.dt.editingCell, 'ui-editing-cell');
         this.dt.editingCell = null;
+        this.dt.editingCellData = null;
+        this.dt.editingCellField = null;
         this.dt.unbindDocumentEditListener();
     };
     EditableColumn.prototype.onKeyDown = function (event) {