primeng 7.1.2 → 7.1.3

package/components/spinner/spinner.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"SPINNER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":6,"character":13},"useExisting":{"__symbolic":"reference","name":"Spinner"},"multi":true},"Spinner":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"p-spinner","template":"\n        <span class=\"ui-spinner ui-widget ui-corner-all\">\n            <input #inputfield type=\"number\" [attr.id]=\"inputId\" [value]=\"value === 0 ? '0' : value||null\" [attr.name]=\"name\"\n            [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.required]=\"required\"\n            (keydown)=\"onInputKeydown($event)\" (blur)=\"onInputBlur($event)\" (input)=\"onInput($event)\" (change)=\"onInputChange($event)\" (focus)=\"onInputFocus($event)\"\n            [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [ngClass]=\"'ui-spinner-input ui-inputtext ui-widget ui-state-default ui-corner-all'\">\n            <button type=\"button\" [ngClass]=\"{'ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default':true,'ui-state-disabled':disabled}\" [disabled]=\"disabled||readonly\" [attr.tabindex]=\"tabindex\" [attr.readonly]=\"readonly\"\n                (mouseleave)=\"onUpButtonMouseleave($event)\" (mousedown)=\"onUpButtonMousedown($event)\" (mouseup)=\"onUpButtonMouseup($event)\">\n                <span class=\"ui-spinner-button-icon pi pi-caret-up ui-clickable\"></span>\n            </button>\n            <button type=\"button\" [ngClass]=\"{'ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default':true,'ui-state-disabled':disabled}\" [disabled]=\"disabled||readonly\" [attr.tabindex]=\"tabindex\" [attr.readonly]=\"readonly\"\n                (mouseleave)=\"onDownButtonMouseleave($event)\" (mousedown)=\"onDownButtonMousedown($event)\" (mouseup)=\"onDownButtonMouseup($event)\">\n                <span class=\"ui-spinner-button-icon pi pi-caret-down ui-clickable\"></span>\n            </button>\n        </span>\n    ","host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","name":"SPINNER_VALUE_ACCESSOR"}]}]}],"members":{"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"inputfieldViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":5},"arguments":["inputfield"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":91,"character":27}]}],"decimalSeparator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"thousandSeparator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"formatInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"ngOnInit":[{"__symbolic":"method"}],"repeat":[{"__symbolic":"method"}],"spin":[{"__symbolic":"method"}],"toFixed":[{"__symbolic":"method"}],"onUpButtonMousedown":[{"__symbolic":"method"}],"onUpButtonMouseup":[{"__symbolic":"method"}],"onUpButtonMouseleave":[{"__symbolic":"method"}],"onDownButtonMousedown":[{"__symbolic":"method"}],"onDownButtonMouseup":[{"__symbolic":"method"}],"onDownButtonMouseleave":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"parseValue":[{"__symbolic":"method"}],"clearTimer":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}]}},"SpinnerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":293,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":294,"character":14},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":294,"character":27}],"exports":[{"__symbolic":"reference","name":"Spinner"}],"declarations":[{"__symbolic":"reference","name":"Spinner"}]}]}]}}}]
+[{"__symbolic":"module","version":4,"metadata":{"SPINNER_VALUE_ACCESSOR":{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":6,"character":13},"useExisting":{"__symbolic":"reference","name":"Spinner"},"multi":true},"Spinner":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":11,"character":1},"arguments":[{"selector":"p-spinner","template":"\n        <span class=\"ui-spinner ui-widget ui-corner-all\">\n            <input #inputfield type=\"text\" [attr.id]=\"inputId\" [value]=\"value === 0 ? '0' : value||null\" [attr.name]=\"name\"\n            [attr.size]=\"size\" [attr.maxlength]=\"maxlength\" [attr.tabindex]=\"tabindex\" [attr.placeholder]=\"placeholder\" [disabled]=\"disabled\" [readonly]=\"readonly\" [attr.required]=\"required\"\n            (keydown)=\"onInputKeydown($event)\" (blur)=\"onInputBlur($event)\" (input)=\"onInput($event)\" (change)=\"onInputChange($event)\" (focus)=\"onInputFocus($event)\"\n            [ngStyle]=\"inputStyle\" [class]=\"inputStyleClass\" [ngClass]=\"'ui-spinner-input ui-inputtext ui-widget ui-state-default ui-corner-all'\">\n            <button type=\"button\" [ngClass]=\"{'ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default':true,'ui-state-disabled':disabled}\" [disabled]=\"disabled||readonly\" [attr.tabindex]=\"tabindex\" [attr.readonly]=\"readonly\"\n                (mouseleave)=\"onUpButtonMouseleave($event)\" (mousedown)=\"onUpButtonMousedown($event)\" (mouseup)=\"onUpButtonMouseup($event)\">\n                <span class=\"ui-spinner-button-icon pi pi-caret-up ui-clickable\"></span>\n            </button>\n            <button type=\"button\" [ngClass]=\"{'ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default':true,'ui-state-disabled':disabled}\" [disabled]=\"disabled||readonly\" [attr.tabindex]=\"tabindex\" [attr.readonly]=\"readonly\"\n                (mouseleave)=\"onDownButtonMouseleave($event)\" (mousedown)=\"onDownButtonMousedown($event)\" (mouseup)=\"onDownButtonMouseup($event)\">\n                <span class=\"ui-spinner-button-icon pi pi-caret-down ui-clickable\"></span>\n            </button>\n        </span>\n    ","host":{"[class.ui-inputwrapper-filled]":"filled","[class.ui-inputwrapper-focus]":"focus","$quoted$":["[class.ui-inputwrapper-filled]","[class.ui-inputwrapper-focus]"]},"providers":[{"__symbolic":"reference","name":"SPINNER_VALUE_ACCESSOR"}]}]}],"members":{"onChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":37,"character":5}}]}],"onFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":39,"character":5}}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":41,"character":5}}]}],"step":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":5}}]}],"min":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":5}}]}],"max":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":5}}]}],"maxlength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":5}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":5}}]}],"inputId":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":55,"character":5}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":5}}]}],"readonly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":5}}]}],"tabindex":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":5}}]}],"required":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":5}}]}],"name":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":65,"character":5}}]}],"inputStyle":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":5}}]}],"inputStyleClass":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":5}}]}],"inputfieldViewChild":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":89,"character":5},"arguments":["inputfield"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":91,"character":27}]}],"decimalSeparator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":93,"character":5}}]}],"thousandSeparator":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"formatInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":5}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":105,"character":5}}]}],"ngAfterViewInit":[{"__symbolic":"method"}],"repeat":[{"__symbolic":"method"}],"spin":[{"__symbolic":"method"}],"toFixed":[{"__symbolic":"method"}],"onUpButtonMousedown":[{"__symbolic":"method"}],"onUpButtonMouseup":[{"__symbolic":"method"}],"onUpButtonMouseleave":[{"__symbolic":"method"}],"onDownButtonMousedown":[{"__symbolic":"method"}],"onDownButtonMouseup":[{"__symbolic":"method"}],"onDownButtonMouseleave":[{"__symbolic":"method"}],"onInputKeydown":[{"__symbolic":"method"}],"onInputChange":[{"__symbolic":"method"}],"onInput":[{"__symbolic":"method"}],"onInputBlur":[{"__symbolic":"method"}],"onInputFocus":[{"__symbolic":"method"}],"parseValue":[{"__symbolic":"method"}],"clearTimer":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setDisabledState":[{"__symbolic":"method"}],"updateFilledState":[{"__symbolic":"method"}]}},"SpinnerModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":297,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":298,"character":14},{"__symbolic":"reference","module":"../inputtext/inputtext","name":"InputTextModule","line":298,"character":27}],"exports":[{"__symbolic":"reference","name":"Spinner"}],"declarations":[{"__symbolic":"reference","name":"Spinner"}]}]}]}}}]

package/components/table/table.d.ts

@@ -1,4 +1,4 @@
-import { OnInit, AfterViewInit, AfterViewChecked, AfterContentInit, EventEmitter, ElementRef, TemplateRef, QueryList, NgZone } from '@angular/core';
+import { OnInit, AfterViewInit, AfterViewChecked, AfterContentInit, EventEmitter, ElementRef, TemplateRef, QueryList, NgZone, ChangeDetectorRef } from '@angular/core';
 import { Column, PrimeTemplate } from '../common/shared';
 import { SortMeta } from '../common/sortmeta';
 import { FilterMetadata } from '../common/filtermetadata';
@@ -29,6 +29,7 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     el: ElementRef;
     zone: NgZone;
     tableService: TableService;
+    cd: ChangeDetectorRef;
     frozenColumns: any[];
     frozenValue: any[];
     style: any;
@@ -111,6 +112,8 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     onHeaderCheckboxToggle: EventEmitter<any>;
     sortFunction: EventEmitter<any>;
     firstChange: EventEmitter<number>;
+    onStateSave: EventEmitter<any>;
+    onStateRestore: EventEmitter<any>;
     containerViewChild: ElementRef;
     resizeHelperViewChild: ElementRef;
     reorderIndicatorUpViewChild: ElementRef;
@@ -148,6 +151,8 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     rowDragging: boolean;
     dropPosition: number;
     editingCell: Element;
+    editingCellData: any;
+    editingCellField: any;
     editingCellClick: boolean;
     documentEditListener: any;
     _multiSortMeta: SortMeta[];
@@ -168,7 +173,7 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     columnOrderStateRestored: boolean;
     columnWidthsState: string;
     tableWidthState: string;
-    constructor(el: ElementRef, zone: NgZone, tableService: TableService);
+    constructor(el: ElementRef, zone: NgZone, tableService: TableService, cd: ChangeDetectorRef);
     ngOnInit(): void;
     ngAfterContentInit(): void;
     ngAfterViewInit(): void;
@@ -219,7 +224,7 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     createLazyLoadMetadata(): any;
     reset(): void;
     exportCSV(options?: any): void;
-    updateEditingCell(cell: any): void;
+    updateEditingCell(cell: any, data: any, field: any): void;
     isEditingCellValid(): boolean;
     bindDocumentEditListener(): void;
     unbindDocumentEditListener(): void;
@@ -234,6 +239,7 @@ export declare class Table implements OnInit, AfterViewInit, AfterContentInit, B
     onColumnResizeBegin(event: any): void;
     onColumnResize(event: any): void;
     onColumnResizeEnd(event: any, column: any): void;
+    setScrollableItemsWidthOnExpandResize(column: any, newColumnWidth: any, delta: any): void;
     findParentScrollableView(column: any): any;
     resizeColGroup(table: any, resizeColumnIndex: any, newColumnWidth: any, nextColumnWidth: any): void;
     onColumnDragStart(event: any, columnElement: any): void;

package/components/table/table.js

@@ -60,10 +60,11 @@ 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.cd = cd;
         this.pageLinks = 5;
         this.alwaysShowPaginator = true;
         this.paginatorPosition = 'bottom';
@@ -110,6 +111,8 @@ var Table = /** @class */ (function () {
         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;
@@ -1032,6 +1035,7 @@ var Table = /** @class */ (function () {
             this.first = 0;
             this.firstChange.emit(this.first);
         }
+        this.cd.detectChanges();
     };
     Table.prototype.hasFilter = function () {
         var empty = true;
@@ -1135,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 () {
@@ -1149,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;
@@ -1270,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';
@@ -1303,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;
@@ -1535,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();
@@ -1576,6 +1601,7 @@ var Table = /** @class */ (function () {
                 this.selection = state.selection;
             }
             this.stateRestored = true;
+            this.onStateRestore.emit(state);
         }
     };
     Table.prototype.saveColumnWidths = function (state) {
@@ -1593,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;
@@ -1966,6 +1985,14 @@ var Table = /** @class */ (function () {
         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)
@@ -2036,7 +2063,7 @@ var Table = /** @class */ (function () {
             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;
 }());
@@ -2994,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 () {
@@ -3010,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) {