@theseam/ui-common 0.2.12 → 0.2.16

package/bundles/theseam-ui-common-datatable.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/cdk/coercion'), require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@angular/cdk/collections'), require('@fortawesome/free-solid-svg-icons'), require('@marklb/ngx-datatable'), require('@theseam/ui-common/core'), require('@theseam/ui-common/data-filters'), require('@theseam/ui-common/utils'), require('@angular/router'), require('@theseam/ui-common/confirm-dialog'), require('@angular/forms'), require('ngx-toastr'), require('@theseam/ui-common/dynamic'), require('@theseam/ui-common/loading'), require('@angular/common/http'), require('@theseam/ui-common/dynamic-component-loader'), require('@theseam/ui-common/modal'), require('@angular/cdk/keycodes'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@theseam/ui-common/scrollbar'), require('@angular/cdk/a11y'), require('@angular/common'), require('@fortawesome/angular-fontawesome'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/checkbox'), require('@theseam/ui-common/form-field'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/menu'), require('@theseam/ui-common/popover'), require('@theseam/ui-common/shared'), require('@theseam/ui-common/table-cell-type')) :
-    typeof define === 'function' && define.amd ? define('@theseam/ui-common/datatable', ['exports', '@angular/animations', '@angular/cdk/coercion', '@angular/core', 'rxjs', 'rxjs/operators', '@angular/cdk/collections', '@fortawesome/free-solid-svg-icons', '@marklb/ngx-datatable', '@theseam/ui-common/core', '@theseam/ui-common/data-filters', '@theseam/ui-common/utils', '@angular/router', '@theseam/ui-common/confirm-dialog', '@angular/forms', 'ngx-toastr', '@theseam/ui-common/dynamic', '@theseam/ui-common/loading', '@angular/common/http', '@theseam/ui-common/dynamic-component-loader', '@theseam/ui-common/modal', '@angular/cdk/keycodes', '@angular/cdk/overlay', '@angular/cdk/portal', '@theseam/ui-common/scrollbar', '@angular/cdk/a11y', '@angular/common', '@fortawesome/angular-fontawesome', '@theseam/ui-common/buttons', '@theseam/ui-common/checkbox', '@theseam/ui-common/form-field', '@theseam/ui-common/icon', '@theseam/ui-common/menu', '@theseam/ui-common/popover', '@theseam/ui-common/shared', '@theseam/ui-common/table-cell-type'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam['ui-common'] = global.theseam['ui-common'] || {}, global.theseam['ui-common'].datatable = {}), global.ng.animations, global.ng.cdk.coercion, global.ng.core, global.rxjs, global.rxjs.operators, global.ng.cdk.collections, global.freeSolidSvgIcons, global.ngxDatatable, global.theseam['ui-common'].core, global.theseam['ui-common']['data-filters'], global.theseam['ui-common'].utils, global.ng.router, global.theseam['ui-common']['confirm-dialog'], global.ng.forms, global.ngxToastr, global.theseam['ui-common'].dynamic, global.theseam['ui-common'].loading, global.ng.common.http, global.theseam['ui-common']['dynamic-component-loader'], global.theseam['ui-common'].modal, global.ng.cdk.keycodes, global.ng.cdk.overlay, global.ng.cdk.portal, global.theseam['ui-common'].scrollbar, global.ng.cdk.a11y, global.ng.common, global.angularFontawesome, global.theseam['ui-common'].buttons, global.theseam['ui-common'].checkbox, global.theseam['ui-common']['form-field'], global.theseam['ui-common'].icon, global.theseam['ui-common'].menu, global.theseam['ui-common'].popover, global.theseam['ui-common'].shared, global.theseam['ui-common']['table-cell-type']));
-}(this, (function (exports, animations, coercion, i0, rxjs, operators, collections, freeSolidSvgIcons, ngxDatatable, core, dataFilters, utils, router, confirmDialog, forms, ngxToastr, dynamic, loading, http, dynamicComponentLoader, modal, keycodes, overlay, portal, scrollbar, a11y, common, angularFontawesome, buttons, checkbox, formField, icon, menu, popover, shared, tableCellType) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/cdk/coercion'), require('@angular/cdk/collections'), require('@angular/core'), require('rxjs'), require('rxjs/operators'), require('@fortawesome/free-solid-svg-icons'), require('@marklb/ngx-datatable'), require('@theseam/ui-common/core'), require('@theseam/ui-common/data-filters'), require('@theseam/ui-common/utils'), require('@angular/router'), require('@theseam/ui-common/confirm-dialog'), require('@angular/forms'), require('ngx-toastr'), require('@theseam/ui-common/dynamic'), require('@theseam/ui-common/loading'), require('@angular/common/http'), require('@theseam/ui-common/dynamic-component-loader'), require('@theseam/ui-common/modal'), require('@angular/cdk/keycodes'), require('@angular/cdk/overlay'), require('@angular/cdk/portal'), require('@theseam/ui-common/scrollbar'), require('@angular/cdk/a11y'), require('@angular/common'), require('@fortawesome/angular-fontawesome'), require('@theseam/ui-common/buttons'), require('@theseam/ui-common/checkbox'), require('@theseam/ui-common/form-field'), require('@theseam/ui-common/icon'), require('@theseam/ui-common/menu'), require('@theseam/ui-common/popover'), require('@theseam/ui-common/shared'), require('@theseam/ui-common/table-cell-type')) :
+    typeof define === 'function' && define.amd ? define('@theseam/ui-common/datatable', ['exports', '@angular/animations', '@angular/cdk/coercion', '@angular/cdk/collections', '@angular/core', 'rxjs', 'rxjs/operators', '@fortawesome/free-solid-svg-icons', '@marklb/ngx-datatable', '@theseam/ui-common/core', '@theseam/ui-common/data-filters', '@theseam/ui-common/utils', '@angular/router', '@theseam/ui-common/confirm-dialog', '@angular/forms', 'ngx-toastr', '@theseam/ui-common/dynamic', '@theseam/ui-common/loading', '@angular/common/http', '@theseam/ui-common/dynamic-component-loader', '@theseam/ui-common/modal', '@angular/cdk/keycodes', '@angular/cdk/overlay', '@angular/cdk/portal', '@theseam/ui-common/scrollbar', '@angular/cdk/a11y', '@angular/common', '@fortawesome/angular-fontawesome', '@theseam/ui-common/buttons', '@theseam/ui-common/checkbox', '@theseam/ui-common/form-field', '@theseam/ui-common/icon', '@theseam/ui-common/menu', '@theseam/ui-common/popover', '@theseam/ui-common/shared', '@theseam/ui-common/table-cell-type'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.theseam = global.theseam || {}, global.theseam["ui-common"] = global.theseam["ui-common"] || {}, global.theseam["ui-common"].datatable = {}), global.ng.animations, global.ng.cdk.coercion, global.ng.cdk.collections, global.ng.core, global.rxjs, global.rxjs.operators, global.freeSolidSvgIcons, global.ngxDatatable, global.theseam["ui-common"].core, global.theseam["ui-common"]["data-filters"], global.theseam["ui-common"].utils, global.ng.router, global.theseam["ui-common"]["confirm-dialog"], global.ng.forms, global.ngxToastr, global.theseam["ui-common"].dynamic, global.theseam["ui-common"].loading, global.ng.common.http, global.theseam["ui-common"]["dynamic-component-loader"], global.theseam["ui-common"].modal, global.ng.cdk.keycodes, global.ng.cdk.overlay, global.ng.cdk.portal, global.theseam["ui-common"].scrollbar, global.ng.cdk.a11y, global.ng.common, global.angularFontawesome, global.theseam["ui-common"].buttons, global.theseam["ui-common"].checkbox, global.theseam["ui-common"]["form-field"], global.theseam["ui-common"].icon, global.theseam["ui-common"].menu, global.theseam["ui-common"].popover, global.theseam["ui-common"].shared, global.theseam["ui-common"]["table-cell-type"]));
+})(this, (function (exports, animations, coercion, collections, i0, rxjs, operators, freeSolidSvgIcons, ngxDatatable, core, dataFilters, utils, router, confirmDialog, forms, ngxToastr, dynamic, loading, http, dynamicComponentLoader, modal, keycodes, overlay, portal, scrollbar, a11y, common, angularFontawesome, buttons, checkbox, formField, icon, menu, popover, shared, tableCellType) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -13,14 +13,12 @@
                     var d = Object.getOwnPropertyDescriptor(e, k);
                     Object.defineProperty(n, k, d.get ? d : {
                         enumerable: true,
-                        get: function () {
-                            return e[k];
-                        }
+                        get: function () { return e[k]; }
                     });
                 }
             });
         }
-        n['default'] = e;
+        n["default"] = e;
         return Object.freeze(n);
     }
 
@@ -261,7 +259,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -344,48 +342,6 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var DatatableDataSource = /** @class */ (function (_super) {
-        __extends(DatatableDataSource, _super);
-        function DatatableDataSource() {
-            var _this = _super.call(this) || this;
-            _this._datatableSubject = new rxjs.BehaviorSubject(undefined);
-            _this.sorts$ = _this._datatableSubject.pipe(operators.switchMap(function (_datatable) {
-                if (!_datatable) {
-                    return rxjs.of([]);
-                }
-                return _datatable.sort.pipe(operators.map(function (v) { return v.sorts; }), operators.startWith(_datatable.sorts));
-            }));
-            _this.filterStates$ = _this._datatableSubject.pipe(operators.switchMap(function (_datatable) {
-                if (!_datatable) {
-                    return rxjs.of([]);
-                }
-                return _datatable.filterStates;
-            }));
-            _this.page$ = _this._datatableSubject.pipe(operators.switchMap(function (_datatable) {
-                if (!_datatable) {
-                    return rxjs.of({
-                        offset: 0,
-                        pageSize: 0,
-                        limit: undefined,
-                        count: 0
-                    });
-                }
-                return _datatable.page.pipe(operators.startWith(_datatable.pageInfo));
-            }));
-            return _this;
-        }
-        // connect(): Observable<readonly TRow[]> {
-        //   return this.
-        // }
-        // disconnect(): void {
-        //   throw new Error('Method not implemented.')
-        // }
-        DatatableDataSource.prototype.setDatatableAccessor = function (accessor) {
-            this._datatableSubject.next(accessor);
-        };
-        return DatatableDataSource;
-    }(collections.DataSource));
-
     var DatatableActionMenuItemComponent = /** @class */ (function () {
         function DatatableActionMenuItemComponent() {
             this.click = new i0.EventEmitter();
@@ -503,7 +459,7 @@
         { type: i0.Component, args: [{
                     selector: 'seam-datatable-action-menu',
                     template: "<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n\n  <ng-container *ngFor=\"let item of items\">\n    <ng-container *ngIf=\"(item.routerLink || item.href) && !item.confirmDialog; else noRouterLink\">\n      <a *ngIf=\"item.href; else noHref\"\n        seamMenuItem\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        [attr.href]=\"item.href\"\n        [target]=\"item.target\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </a>\n      <ng-template #noHref>\n        <a seamMenuItem\n          class=\"list-group-item list-group-item-action py-1\"\n          [disabled]=\"item.disabled\"\n          [queryParams]=\"item.queryParams\"\n          [fragment]=\"$any(item.fragment)\"\n          [queryParamsHandling]=\"item.queryParamsHandling\"\n          [preserveFragment]=\"$any(item.preserveFragment)\"\n          [skipLocationChange]=\"$any(item.skipLocationChange)\"\n          [replaceUrl]=\"$any(item.replaceUrl)\"\n          [state]=\"$any(item.state)\"\n          [routerLink]=\"item.routerLink\"\n          [target]=\"$any(item.target)\"\n          (click)=\"activateItem($event, item)\">\n          {{ item.label }}\n        </a>\n      </ng-template>\n    </ng-container>\n    <ng-template #noRouterLink>\n      <button seamMenuItem\n        type=\"button\"\n        class=\"list-group-item list-group-item-action py-1\"\n        [disabled]=\"item.disabled\"\n        (click)=\"activateItem($event, item)\">\n        {{ item.label }}\n      </button>\n    </ng-template>\n  </ng-container>\n</seam-menu>\n\n<button type=\"button\" class=\"datatable-action-button btn\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  title=\"Row Actions\">\n  <seam-icon [icon]=\"faEllipsisH\"></seam-icon>\n</button>\n",
-                    styles: [":host{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}"]
+                    styles: [":host{display:block;position:relative}.datatable-action-button{font-size:20px;line-height:20px;width:30px;height:30px;padding:0;border-radius:15px;text-align:center}.datatable-action-button::ng-deep .svg-inline--fa{vertical-align:middle}\n"]
                 },] }
     ];
     DatatableActionMenuComponent.ctorParameters = function () { return [
@@ -744,7 +700,7 @@
                     selector: 'seam-datatable-menu-bar',
                     template: "<div class=\"bg-light border rounded p-2\">\n  <ng-content></ng-content>\n</div>\n",
                     providers: [_THESEAM_DATA_FILTER_CONTAINER],
-                    styles: [":host{display:block}"]
+                    styles: [":host{display:block}\n"]
                 },] }
     ];
     DatatableMenuBarComponent.ctorParameters = function () { return []; };
@@ -854,52 +810,426 @@
         { type: i0.TemplateRef }
     ]; };
 
-    var THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new i0.InjectionToken('ITheSeamDatatablePreferencesAccessor');
+    var DatatableDataSource = /** @class */ (function (_super) {
+        __extends(DatatableDataSource, _super);
+        function DatatableDataSource() {
+            var _this = _super.call(this) || this;
+            _this._datatableSubject = new rxjs.BehaviorSubject(undefined);
+            _this.sorts$ = _this._datatableSubject.pipe(operators.switchMap(function (_datatable) {
+                if (!_datatable) {
+                    return rxjs.of([]);
+                }
+                return _datatable.sort.pipe(operators.map(function (v) { return v.sorts; }), operators.startWith(_datatable.sorts));
+            }));
+            _this.filterStates$ = _this._datatableSubject.pipe(operators.switchMap(function (_datatable) {
+                if (!_datatable) {
+                    return rxjs.of([]);
+                }
+                return _datatable.filterStates;
+            }));
+            _this.page$ = _this._datatableSubject.pipe(operators.switchMap(function (_datatable) {
+                if (!_datatable) {
+                    return rxjs.of({
+                        offset: 0,
+                        pageSize: 0,
+                        limit: undefined,
+                        count: 0
+                    });
+                }
+                return _datatable.page.pipe(operators.startWith(_datatable.pageInfo));
+            }));
+            return _this;
+        }
+        // connect(): Observable<readonly TRow[]> {
+        //   return this.
+        // }
+        // disconnect(): void {
+        //   throw new Error('Method not implemented.')
+        // }
+        DatatableDataSource.prototype.setDatatableAccessor = function (accessor) {
+            this._datatableSubject.next(accessor);
+        };
+        return DatatableDataSource;
+    }(collections.DataSource));
+
+    var ACTION_MENU_COLUMN_PROP = '$$__actionMenu__';
+    function createActionMenuColumn(cellTemplate, headerTemplate) {
+        return {
+            prop: ACTION_MENU_COLUMN_PROP,
+            name: '',
+            width: 50,
+            minWidth: 50,
+            maxWidth: 50,
+            resizeable: false,
+            sortable: false,
+            draggable: false,
+            // TODO: Fix column auto sizing with fixed column and cell overlay before enabling.
+            // frozenRight: true,
+            cellTemplate: cellTemplate,
+            headerTemplate: headerTemplate,
+        };
+    }
 
-    function withStoredColumnInfo(columns, preferenceColumns) {
+    var CHECKBOX_COLUMN_PROP = '$$__checkbox__';
+    function createCheckboxColumn() {
+        return {
+            prop: CHECKBOX_COLUMN_PROP,
+            name: '',
+            width: 40,
+            sortable: false,
+            canAutoResize: false,
+            draggable: false,
+            resizeable: false,
+            headerCheckboxable: true,
+            checkboxable: true,
+        };
+    }
+
+    function getColumnProp(col) {
+        if (!utils.notNullOrUndefined(col.prop) && col.name) {
+            return ngxDatatable.camelCase(col.name);
+        }
+        return col.prop === null ? undefined : col.prop;
+    }
+
+    function setColumnDefaults(columns) {
         var e_1, _a;
-        var _columns = [];
-        var _loop_1 = function (col) {
-            var storedCol = preferenceColumns.find(function (v) { return v.prop === col.prop; });
-            if (storedCol) {
-                var _col = Object.assign({}, col);
-                if (utils.hasProperty(storedCol, 'width')) {
-                    _col.width = Math.max(storedCol.width, 0);
+        try {
+            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                var column = columns_1_1.value;
+                if (!column.hasOwnProperty('hidden')) {
+                    column.hidden = false;
                 }
-                _col.canAutoResize = storedCol.canAutoResize;
-                _columns.push(_col);
             }
-            else {
-                _columns.push(col);
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
             }
-        };
+            finally { if (e_1) throw e_1.error; }
+        }
+        ngxDatatable.setColumnDefaults(columns);
+    }
+
+    // TODO: Replace with a `translateTemplates` function that fits the
+    // wrapper component better.
+    function translateTemplateColumns(v) {
+        var e_1, _a;
+        var cols = ngxDatatable.translateTemplates(v);
         try {
-            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
-                var col = columns_1_1.value;
-                _loop_1(col);
+            for (var cols_1 = __values(cols), cols_1_1 = cols_1.next(); !cols_1_1.done; cols_1_1 = cols_1.next()) {
+                var col = cols_1_1.value;
+                col.prop = getColumnProp(col);
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+                if (cols_1_1 && !cols_1_1.done && (_a = cols_1.return)) _a.call(cols_1);
             }
             finally { if (e_1) throw e_1.error; }
         }
-        return _columns;
+        return cols;
     }
 
+    var ColumnsTypes;
+    (function (ColumnsTypes) {
+        ColumnsTypes[ColumnsTypes["Input"] = 0] = "Input";
+        ColumnsTypes[ColumnsTypes["Template"] = 1] = "Template";
+        ColumnsTypes[ColumnsTypes["Result"] = 2] = "Result";
+    })(ColumnsTypes || (ColumnsTypes = {}));
+    var ColumnsManagerService = /** @class */ (function () {
+        function ColumnsManagerService(_differs, _columnChangesService) {
+            var _this = this;
+            this._differs = _differs;
+            this._columnChangesService = _columnChangesService;
+            this._updateColumns = new rxjs.Subject();
+            this._inputColumns = new rxjs.BehaviorSubject([]);
+            this._templateColumns = new rxjs.BehaviorSubject([]);
+            this._inpColDiffersMap = new Map();
+            this._tplColDiffersMap = new Map();
+            this._resultColDiffersMap = new Map();
+            var templateColumns$ = this._columnChangesService.columnInputChanges$.pipe(operators.startWith(undefined), operators.switchMap(function () {
+                return _this._templateColumns.asObservable().pipe(operators.map(translateTemplateColumns));
+            }));
+            this.columns$ = rxjs.defer(function () {
+                var isFirst = true;
+                return rxjs.combineLatest([
+                    _this._inputColumns.asObservable(),
+                    templateColumns$,
+                    _this._updateColumns.asObservable().pipe(operators.auditTime(0), operators.startWith(undefined))
+                ]).pipe(operators.switchMap(function (_a) {
+                    var _b = __read(_a, 2), inputColumns = _b[0], templateColumns = _b[1];
+                    var cols = _this._mergeColumns(inputColumns, templateColumns);
+                    var hasColumnsChanged = _this._hasColumnsChanged(cols);
+                    // TODO: Look for columns added/removed and remove the removed columns
+                    // differs, not just changes to columns.
+                    var hasAddedOrRemovedColumns = _this._hasAddedOrRemovedColumns(cols);
+                    // NOTE: Both checks need to be run, even though only one needs to be
+                    // true, because their differs need to be called.
+                    if (hasColumnsChanged || hasAddedOrRemovedColumns || isFirst) {
+                        isFirst = false;
+                        return rxjs.of(cols);
+                    }
+                    return rxjs.EMPTY;
+                }));
+            }).pipe(operators.shareReplay({ refCount: true, bufferSize: 1 }));
+        }
+        ColumnsManagerService.prototype.setInputColumns = function (columns) {
+            this._inputColumns.next(columns);
+        };
+        ColumnsManagerService.prototype.setTemplateColumns = function (columns) {
+            this._templateColumns.next(columns);
+        };
+        ColumnsManagerService.prototype.setInternalColumnsGetter = function (getter) {
+            this._internalColumnsGetter = getter || undefined;
+            this._updateColumns.next(undefined);
+        };
+        ColumnsManagerService.prototype.setSelectionType = function (selectionType) {
+            var changed = this._selectionType !== selectionType;
+            this._selectionType = selectionType;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype.getSelectionType = function () {
+            return this._selectionType;
+        };
+        ColumnsManagerService.prototype.setRowActionItem = function (rowActionItem) {
+            var changed = this._rowActionItem !== rowActionItem;
+            this._rowActionItem = rowActionItem;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype.setActionMenuCellTpl = function (actionMenuCellTpl) {
+            var changed = this._actionMenuCellTpl !== actionMenuCellTpl;
+            this._actionMenuCellTpl = actionMenuCellTpl;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype.setBlankHeaderTpl = function (blankHeaderTpl) {
+            var changed = this._blankHeaderTpl !== blankHeaderTpl;
+            this._blankHeaderTpl = blankHeaderTpl;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype.setTreeToggleTpl = function (treeToggleTpl) {
+            var changed = this._treeToggleTpl !== treeToggleTpl;
+            this._treeToggleTpl = treeToggleTpl;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype.setHeaderTpl = function (headerTpl) {
+            var changed = this._headerTpl !== headerTpl;
+            this._headerTpl = headerTpl;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype.setCellTypeSelectorTpl = function (cellTypeSelectorTpl) {
+            var changed = this._cellTypeSelectorTpl !== cellTypeSelectorTpl;
+            this._cellTypeSelectorTpl = cellTypeSelectorTpl;
+            if (changed) {
+                this._updateColumns.next(undefined);
+            }
+        };
+        ColumnsManagerService.prototype._mergeColumns = function (inputColumns, templateColumns) {
+            var e_1, _a;
+            var cols = [];
+            // Add the first column checkbox if 'checkbox' selection is enabled.
+            if (this._shouldAddCheckboxColumn()) {
+                cols.push(createCheckboxColumn());
+            }
+            try {
+                // Column needs to be provided in the inputColumns, so iterate the
+                // inputColumns.
+                for (var inputColumns_1 = __values(inputColumns), inputColumns_1_1 = inputColumns_1.next(); !inputColumns_1_1.done; inputColumns_1_1 = inputColumns_1.next()) {
+                    var inpCol = inputColumns_1_1.value;
+                    var prop = getColumnProp(inpCol);
+                    if (!utils.notNullOrUndefined(prop)) {
+                        throw Error("Column may have 'prop' or 'name' defined.");
+                    }
+                    var internalCol = this._getInternalColumn(prop);
+                    var inpColDif = this._getColDif(inpCol, ColumnsTypes.Input);
+                    if (utils.notNullOrUndefined(inpColDif)) {
+                        this._updateColDif(inpColDif, internalCol, inpCol);
+                    }
+                    var tplCol = this._findColumnByProp(prop, templateColumns);
+                    if (tplCol !== undefined) {
+                        var tplColDif = this._getColDif(tplCol, ColumnsTypes.Template);
+                        if (utils.notNullOrUndefined(tplColDif)) {
+                            this._updateColDif(tplColDif, internalCol, tplCol);
+                        }
+                    }
+                    var _col = Object.assign(Object.assign(Object.assign({}, (internalCol || {})), inpCol), (tplCol || {}));
+                    if (this._shouldAddTreeToggleColumn(_col)) {
+                        _col.treeToggleTemplate = this._treeToggleTpl;
+                    }
+                    if (this._shouldAddHeaderTemplate(_col)) {
+                        _col.headerTemplate = this._headerTpl;
+                    }
+                    if (this._shouldAddCellTypeSelectorTpl(_col)) {
+                        _col.cellTemplate = this._cellTypeSelectorTpl;
+                    }
+                    cols.push(_col);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (inputColumns_1_1 && !inputColumns_1_1.done && (_a = inputColumns_1.return)) _a.call(inputColumns_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            if (this._shouldAddRowActionColumn()) {
+                cols.push(createActionMenuColumn(this._actionMenuCellTpl, this._blankHeaderTpl));
+            }
+            // Make sure the default for any missing props are set.
+            // TODO: Determine if this should be done earlier, because I don't like
+            // how this is done after dif checks.
+            setColumnDefaults(cols);
+            return cols;
+        };
+        ColumnsManagerService.prototype._getInternalColumns = function () {
+            if (this._internalColumnsGetter === undefined) {
+                return undefined;
+            }
+            return this._internalColumnsGetter();
+        };
+        ColumnsManagerService.prototype._getInternalColumn = function (prop) {
+            var internalCols = this._getInternalColumns();
+            if (internalCols === undefined) {
+                return undefined;
+            }
+            return internalCols.find(function (c) { return getColumnProp(c) === prop; });
+        };
+        ColumnsManagerService.prototype._findColumnByProp = function (prop, columns) {
+            return columns.find(function (c) { return getColumnProp(c) === prop; });
+        };
+        ColumnsManagerService.prototype._getDifMapForColumnsType = function (columnsType) {
+            switch (columnsType) {
+                case ColumnsTypes.Input: return this._inpColDiffersMap;
+                case ColumnsTypes.Template: return this._tplColDiffersMap;
+                case ColumnsTypes.Result: return this._resultColDiffersMap;
+            }
+        };
+        ColumnsManagerService.prototype._getColumnDiffer = function (prop, colsType) {
+            var difMap = this._getDifMapForColumnsType(colsType);
+            if (difMap === null) {
+                throw Error("Invalid columns type.");
+            }
+            if (!difMap.has(prop)) {
+                difMap.set(prop, this._differs.find({}).create());
+            }
+            var differ = difMap.get(prop);
+            if (differ === undefined) {
+                throw Error("Differ not found. New differ should have been created.");
+            }
+            return differ;
+        };
+        ColumnsManagerService.prototype._getColDif = function (col, colsType) {
+            var prop = getColumnProp(col);
+            if (prop === undefined) {
+                throw Error("Column prop not found.");
+            }
+            return this._getColumnDiffer(prop, colsType).diff(col);
+        };
+        ColumnsManagerService.prototype._updateColDif = function (colDif, internalColumn, col) {
+            colDif.forEachRemovedItem(function (r) {
+                if (internalColumn && internalColumn.hasOwnProperty(r.key)) {
+                    var k = r.key;
+                    delete internalColumn[k];
+                }
+            });
+            colDif.forEachAddedItem(function (r) { return col[r.key] = r.currentValue; });
+            colDif.forEachChangedItem(function (r) { return col[r.key] = r.currentValue; });
+        };
+        ColumnsManagerService.prototype._hasAddedOrRemovedColumns = function (columns) {
+            if (!this._colPropsDiffer) {
+                this._colPropsDiffer = this._differs.find([]).create();
+            }
+            var props = columns.map(function (c) { return getColumnProp(c); });
+            return this._colPropsDiffer.diff(props) !== null;
+        };
+        ColumnsManagerService.prototype._hasColumnsChanged = function (columns) {
+            var e_2, _a;
+            var colChanged = false;
+            try {
+                for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                    var col = columns_1_1.value;
+                    var resultDif = this._getColDif(col, ColumnsTypes.Result);
+                    if (resultDif) {
+                        // NOTE: Can't return early, because the differs need to be updated.
+                        colChanged = true;
+                    }
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            return colChanged;
+        };
+        ColumnsManagerService.prototype._shouldAddCheckboxColumn = function () {
+            return this._selectionType === ngxDatatable.SelectionType.checkbox;
+        };
+        ColumnsManagerService.prototype._shouldAddRowActionColumn = function () {
+            return this._rowActionItem !== undefined;
+        };
+        ColumnsManagerService.prototype._shouldAddTreeToggleColumn = function (column) {
+            return column.isTreeColumn !== undefined && column.isTreeColumn &&
+                (!utils.hasProperty(column, 'treeToggleTemplate') || !utils.notNullOrUndefined(column.treeToggleTemplate));
+        };
+        ColumnsManagerService.prototype._shouldAddHeaderTemplate = function (column) {
+            return !utils.hasProperty(column, 'headerTemplate');
+        };
+        ColumnsManagerService.prototype._shouldAddCellTypeSelectorTpl = function (column) {
+            return utils.hasProperty(column, 'cellType');
+        };
+        return ColumnsManagerService;
+    }());
+    ColumnsManagerService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ColumnsManagerService.ctorParameters = function () { return [
+        { type: i0.KeyValueDiffers },
+        { type: DatatableColumnChangesService }
+    ]; };
+
+    var CURRENT_DATATABLE_PREFERENCES_VERSION = 2;
+    var EMPTY_DATATABLE_PREFERENCES = {
+        version: 2,
+        alterations: []
+    };
+
+    var THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new i0.InjectionToken('TheSeamDatatablePreferencesAccessor');
+
+    // TODO: Add per key status
     var DatatablePreferencesService = /** @class */ (function () {
         function DatatablePreferencesService(_prefsAccessor) {
             this._prefsAccessor = _prefsAccessor;
             this._tablePrefsMap = new Map();
             this._pending = false;
+            this._loaded = false;
         }
         Object.defineProperty(DatatablePreferencesService.prototype, "pending", {
             get: function () { return this._pending; },
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DatatablePreferencesService.prototype, "loaded", {
+            get: function () { return this._loaded; },
+            enumerable: false,
+            configurable: true
+        });
         DatatablePreferencesService.prototype.preferences = function (preferenceKey) {
             var prefs = this._tablePrefsMap.get(preferenceKey);
             if (!prefs) {
@@ -915,16 +1245,17 @@
         DatatablePreferencesService.prototype._createObservable = function (refreshSubject, prefKey) {
             var _this = this;
             if (!this._prefsAccessor) {
-                return rxjs.of({});
+                return rxjs.of(EMPTY_DATATABLE_PREFERENCES);
             }
-            var accessor = function (key) { return _this._prefsAccessor ? _this._prefsAccessor.get(key) : rxjs.of('{}'); };
-            return refreshSubject.pipe(operators.startWith({}), operators.switchMap(function () { return accessor(prefKey).pipe(operators.map(function (v) {
+            var accessor = function (key) { return _this._prefsAccessor ? _this._prefsAccessor.get(key) : rxjs.of(JSON.stringify(EMPTY_DATATABLE_PREFERENCES)); };
+            return refreshSubject.pipe(operators.startWith(undefined), operators.switchMap(function () { return accessor(prefKey).pipe(operators.map(function (v) {
                 if (!v) {
                     return null;
                 }
                 // TODO: Add a schema validator and migration tool to avoid parsing issues.
                 try {
-                    return JSON.parse(v);
+                    // return JSON.parse(v) as TheSeamDatatablePreferences
+                    return _this._descerializePreferences(v);
                 }
                 catch (error) {
                     if (i0.isDevMode()) {
@@ -932,7 +1263,12 @@
                     }
                     return null;
                 }
-            }), operators.map(function (v) { return !!v ? v : {}; })); }), operators.shareReplay(1));
+            }), operators.map(function (v) { return utils.notNullOrUndefined(v) ? v : EMPTY_DATATABLE_PREFERENCES; }), 
+            // tap(v => console.log('preferences$', v)),
+            operators.tap(function () {
+                _this._pending = false;
+                _this._loaded = true;
+            })); }), operators.shareReplay({ bufferSize: 1, refCount: true }));
         };
         DatatablePreferencesService.prototype.refresh = function (preferenceKey) {
             var prefs = this._tablePrefsMap.get(preferenceKey);
@@ -948,7 +1284,40 @@
         // out of order updates. This shouldn't be an issue, with how fast preferences
         // will most likely be changing, but it could happen in situations, such as
         // network issues.
-        DatatablePreferencesService.prototype.setColumnPreference = function (preferenceKey, column) {
+        // public setColumnPreference(preferenceKey: string, column: TheSeamDatatablePreferencesColumn): void {
+        //   if (!this._prefsAccessor) {
+        //     return
+        //   }
+        //   this._pending = true
+        //   this.preferences(preferenceKey).pipe(
+        //     map(prefs => {
+        //       // Making the preferences immutable may not be necessary, but for now
+        //       // this obj->str->obj will work as a naive clone.
+        //       const columns = JSON.parse(JSON.stringify(prefs.columns || []))
+        //       const _colPref = columns.find((c: any) => c.prop === column.prop)
+        //       // console.log('has', _colPref)
+        //       if (_colPref) {
+        //         // console.log('hasProperty(column, "width"))', hasProperty(column, 'width'))
+        //         if (hasProperty(column, 'width')) { _colPref.width = column.width }
+        //         if (hasProperty(column, 'canAutoResize')) { _colPref.canAutoResize = column.canAutoResize }
+        //         if (hasProperty(column, 'hidden')) { _colPref.hidden = column.hidden }
+        //       } else {
+        //         columns.push({ ...column })
+        //       }
+        //       const newPrefs: TheSeamDatatablePreferences = { ...prefs, columns }
+        //       return newPrefs
+        //     }),
+        //     // tap(v => console.log('newPrefs', v)),
+        //     take(1),
+        //     switchMap(newPrefs => this._prefsAccessor
+        //       ? this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
+        //       : of(newPrefs)
+        //     ),
+        //     tap(() => this.refresh(preferenceKey))
+        //   )
+        //   .subscribe()
+        // }
+        DatatablePreferencesService.prototype.setAlterations = function (preferenceKey, alterations) {
             var _this = this;
             if (!this._prefsAccessor) {
                 return;
@@ -957,71 +1326,547 @@
             this.preferences(preferenceKey).pipe(operators.map(function (prefs) {
                 // Making the preferences immutable may not be necessary, but for now
                 // this obj->str->obj will work as a naive clone.
-                var columns = JSON.parse(JSON.stringify(prefs.columns || []));
-                var _colPref = columns.find(function (c) { return c.prop === column.prop; });
-                // console.log('has', _colPref)
-                if (_colPref) {
-                    // console.log('hasProperty(column, "width"))', hasProperty(column, 'width'))
-                    if (utils.hasProperty(column, 'width')) {
-                        _colPref.width = column.width;
+                // const columns = JSON.parse(JSON.stringify(prefs.columns || []))
+                // const _colPref = columns.find((c: any) => c.prop === column.prop)
+                // // console.log('has', _colPref)
+                // if (_colPref) {
+                //   // console.log('hasProperty(column, "width"))', hasProperty(column, 'width'))
+                //   if (hasProperty(column, 'width')) { _colPref.width = column.width }
+                //   if (hasProperty(column, 'canAutoResize')) { _colPref.canAutoResize = column.canAutoResize }
+                //   if (hasProperty(column, 'hidden')) { _colPref.hidden = column.hidden }
+                // } else {
+                //   columns.push({ ...column })
+                // }
+                // const newPrefs: TheSeamDatatablePreferences = { ...prefs, columns }
+                // return newPrefs
+                var newPrefs = Object.assign(Object.assign({}, EMPTY_DATATABLE_PREFERENCES), { alterations: alterations });
+                return newPrefs;
+            }), 
+            // tap(v => console.log('newPrefs', v)),
+            operators.take(1), operators.switchMap(function (newPrefs) { return _this._prefsAccessor
+                ? _this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
+                : rxjs.of(newPrefs); }), operators.tap(function () { return _this.refresh(preferenceKey); }))
+                .subscribe();
+        };
+        // public withColumnPreferences<T>(preferenceKey: string, columns: T[]): Observable<T[]> {
+        //   return this.preferences(preferenceKey).pipe(
+        //     startWith(EMPTY_DATATABLE_PREFERENCES),
+        //     map(preferences => preferences && preferences.columns
+        //       ? withStoredColumnInfo(columns, preferences.columns) as T[]
+        //       : columns
+        //     )
+        //   )
+        // }
+        DatatablePreferencesService.prototype._descerializePreferences = function (serialized) {
+            var prefs = JSON.parse(serialized);
+            // TODO: Implement migration
+            return prefs;
+        };
+        return DatatablePreferencesService;
+    }());
+    DatatablePreferencesService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DatatablePreferencesService_Factory() { return new DatatablePreferencesService(i0__namespace.ɵɵinject(THESEAM_DATATABLE_PREFERENCES_ACCESSOR, 8)); }, token: DatatablePreferencesService, providedIn: "root" });
+    DatatablePreferencesService.decorators = [
+        { type: i0.Injectable, args: [{
+                    providedIn: 'root'
+                },] }
+    ];
+    DatatablePreferencesService.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_DATATABLE_PREFERENCES_ACCESSOR,] }] }
+    ]; };
+
+    var THESEAM_DATATABLE_ACCESSOR = new i0.InjectionToken('TheSeamDatatableAccessor');
+
+    function removeUnusedDiffs(cols, colDiffersInp, colDiffersTpl) {
+        var inpKeys = Object.keys(colDiffersInp);
+        inpKeys.filter(function (k) { return cols.findIndex(function (c) { return c.prop === k; }) === -1; })
+            .forEach(function (k) { delete colDiffersInp[k]; });
+        var tplKeys = Object.keys(colDiffersTpl);
+        tplKeys.filter(function (k) { return cols.findIndex(function (c) { return c.prop === k; }) === -1; })
+            .forEach(function (k) { delete colDiffersTpl[k]; });
+    }
+
+    /**
+     * Alteration applied to a column or columns that can be persisted.
+     *
+     * Tracking if a column was altered by user or library code can be confusing.
+     * This allows us to store a list of replayable alterations on columns. By
+     * having a defined way to implement alterations, the datatable should be easier
+     * to support external features that want to provide an alteration.
+     *
+     * NOTE: Current, to unapply an alteration you can create an alteration with
+     * `persistent` set to false and the alteration will be removed after `apply()`
+     * is called.
+     */
+    var ColumnsAlteration = /** @class */ (function () {
+        function ColumnsAlteration(
+        /**
+         * Persistable state.
+         *
+         * Returned value should be JSON stringifyable.
+         */
+        state, 
+        /**
+         * If false, the state will not be persisted to a persistent storage and
+         * will be removed after applied.
+         */
+        persistent) {
+            this.state = state;
+            this.persistent = persistent;
+            this.state = state;
+        }
+        ColumnsAlteration.prototype.toJSON = function () {
+            return {
+                id: this.id,
+                type: this.type,
+                state: this.state
+            };
+        };
+        return ColumnsAlteration;
+    }());
+
+    var HideColumnColumnsAlteration = /** @class */ (function (_super) {
+        __extends(HideColumnColumnsAlteration, _super);
+        function HideColumnColumnsAlteration(state, persistent) {
+            var _this = _super.call(this, state, persistent) || this;
+            _this.type = 'hide-column';
+            if (!_this._isValidState(state)) {
+                throw Error("Invalid state: " + JSON.stringify(state));
+            }
+            _this.id = _this.type + "--" + state.columnProp;
+            return _this;
+        }
+        HideColumnColumnsAlteration.prototype.apply = function (columns, datatable) {
+            var e_1, _a;
+            try {
+                for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                    var col = columns_1_1.value;
+                    var prop = getColumnProp(col);
+                    if (prop === this.state.columnProp) {
+                        col.hidden = this.state.hidden;
+                    }
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        HideColumnColumnsAlteration.prototype._isValidState = function (state) {
+            // NOTE: Checking null or undefined, even though the type doesn't allow,
+            // because the state may have been loaded from an invalid persistant
+            // storage.
+            // TODO: Remove when state validation/migration is implemented to happen
+            // when retrieved from storage.
+            if (!utils.notNullOrUndefined(state.columnProp)) {
+                return false;
+            }
+            // TODO: Remove when state validation/migration is implemented to happen
+            // when retrieved from storage.
+            if (!utils.notNullOrUndefined(state.hidden)) {
+                return false;
+            }
+            return true;
+        };
+        return HideColumnColumnsAlteration;
+    }(ColumnsAlteration));
+
+    var SortColumnsAlteration = /** @class */ (function (_super) {
+        __extends(SortColumnsAlteration, _super);
+        function SortColumnsAlteration(state, persistent) {
+            var _this = _super.call(this, state, persistent) || this;
+            _this.type = 'sort';
+            if (!_this._isValidState(state)) {
+                throw Error("Invalid state: " + JSON.stringify(state));
+            }
+            _this.id = "" + _this.type;
+            return _this;
+        }
+        SortColumnsAlteration.prototype.apply = function (columns, datatable) {
+            if (datatable.sortType === ngxDatatable.SortType.single) {
+                datatable.sorts = this.state.sorts.length > 0 ? [this.state.sorts[0]] : [];
+            }
+            else {
+                datatable.sorts = this.state.sorts;
+            }
+        };
+        SortColumnsAlteration.prototype._isValidState = function (state) {
+            // NOTE: Checking null or undefined, even though the type doesn't allow,
+            // because the state may have been loaded from an invalid persistant
+            // storage.
+            // TODO: Remove when state validation/migration is implemented to happen
+            // when retrieved from storage.
+            if (!utils.notNullOrUndefined(state.sorts)) {
+                return false;
+            }
+            return true;
+        };
+        return SortColumnsAlteration;
+    }(ColumnsAlteration));
+
+    var WidthColumnsAlteration = /** @class */ (function (_super) {
+        __extends(WidthColumnsAlteration, _super);
+        function WidthColumnsAlteration(state, persistent) {
+            var _this = _super.call(this, state, persistent) || this;
+            _this.type = 'width';
+            if (!_this._isValidState(state)) {
+                throw Error("Invalid state: " + JSON.stringify(state));
+            }
+            _this.id = _this.type + "--" + state.columnProp;
+            return _this;
+        }
+        WidthColumnsAlteration.prototype.apply = function (columns, datatable) {
+            var e_1, _a;
+            try {
+                for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                    var col = columns_1_1.value;
+                    var prop = getColumnProp(col);
+                    if (prop === this.state.columnProp) {
+                        col.canAutoResize = this.state.canAutoResize;
+                        if (utils.notNullOrUndefined(this.state.width)) {
+                            col.width = this.state.width;
+                        }
                     }
-                    if (utils.hasProperty(column, 'canAutoResize')) {
-                        _colPref.canAutoResize = column.canAutoResize;
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+        };
+        WidthColumnsAlteration.prototype._isValidState = function (state) {
+            // NOTE: Checking null or undefined, even though the type doesn't allow,
+            // because the state may have been loaded from an invalid persistant
+            // storage.
+            // TODO: Remove when state validation/migration is implemented to happen
+            // when retrieved from storage.
+            if (!utils.notNullOrUndefined(state.columnProp)) {
+                return false;
+            }
+            // TODO: Remove when state validation/migration is implemented to happen
+            // when retrieved from storage.
+            if (!utils.notNullOrUndefined(state.canAutoResize)) {
+                return false;
+            }
+            return true;
+        };
+        return WidthColumnsAlteration;
+    }(ColumnsAlteration));
+
+    var ColumnsAlterationsManagerService = /** @class */ (function () {
+        function ColumnsAlterationsManagerService() {
+            this._changesSubject = new rxjs.Subject();
+            this._alterations = [];
+            this.changes = this._changesSubject.asObservable();
+        }
+        ColumnsAlterationsManagerService.prototype.get = function () {
+            return __spreadArray([], __read(this._alterations));
+        };
+        /**
+         * Adds alterations to be applied to columns.
+         *
+         * If an alteration with the same `id` already exists then the existing
+         * alteration will be removed and the new one added.
+         *
+         * NOTE: When there is a duplicate alteration the old alteration is removed,
+         * instead of updated, to maintain the order alterations are applied.
+         */
+        ColumnsAlterationsManagerService.prototype.add = function (alterations, options) {
+            // console.log('add', alterations)
+            var removed = this.remove(alterations, { emitEvent: false });
+            this._alterations = __spreadArray(__spreadArray([], __read(this._alterations)), __read(alterations));
+            var changes = __spreadArray(__spreadArray([], __read(removed)), __read(alterations.map(function (a) {
+                var record = {
+                    type: 'added',
+                    alteration: a
+                };
+                return record;
+            })));
+            if (utils.notNullOrUndefined(options === null || options === void 0 ? void 0 : options.emitEvent) && !(options === null || options === void 0 ? void 0 : options.emitEvent)) {
+                return changes;
+            }
+            this._emitChanges(changes);
+            return changes;
+        };
+        ColumnsAlterationsManagerService.prototype.remove = function (alterations, options) {
+            // console.log('remove', alterations)
+            var removed = [];
+            this._alterations = this._alterations.filter(function (x) {
+                var found = alterations.findIndex(function (y) { return y.id === x.id; }) !== -1;
+                if (found) {
+                    var eventRecord = {
+                        type: 'removed',
+                        alteration: x
+                    };
+                    removed.push(eventRecord);
+                }
+                return !found;
+            });
+            // console.log('removed', removed, this._alterations)
+            if (utils.notNullOrUndefined(options === null || options === void 0 ? void 0 : options.emitEvent) && !(options === null || options === void 0 ? void 0 : options.emitEvent)) {
+                return removed;
+            }
+            this._emitChanges(removed);
+            return removed;
+        };
+        ColumnsAlterationsManagerService.prototype.apply = function (columns, datatable) {
+            var e_1, _a;
+            try {
+                for (var _b = __values(this._alterations), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var a = _c.value;
+                    a.apply(columns, datatable);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            this._removeNonPersistant();
+        };
+        // TODO: Make aware of original column order and properties. This is tricky,
+        // because the datatable does not deal with immutable column/row records and
+        // it is hard to know where changes happened. Just serializing the columns
+        // input is not enough, because the columns input is called anytime the user
+        // makes a column change. We can probably come up with a mostly accurate
+        // implementation, such as "reset original columns cache when preferencesKey
+        // changes" or "number of columns change". There are issues with those rules,
+        // but with some testing/experimenting I think there should be a "good enough"
+        // solution.
+        //
+        // TODO: Find a generic way to clear alterations. I would like to add an
+        // `unapply` method to `ColumnsAlteration`, but since the alterations
+        // themselves are not too generic it may be tricky.
+        ColumnsAlterationsManagerService.prototype.clear = function (options) {
+            var e_2, _a;
+            var changes = [];
+            try {
+                for (var _b = __values(this._alterations), _c = _b.next(); !_c.done; _c = _b.next()) {
+                    var colAlt = _c.value;
+                    switch (colAlt.type) {
+                        case 'hide-column': {
+                            var alteration = new HideColumnColumnsAlteration({ columnProp: colAlt.state.columnProp, hidden: false }, false);
+                            changes.push.apply(changes, __spreadArray([], __read(this.add([alteration]))));
+                            break;
+                        }
+                        case 'order': {
+                            changes.push.apply(changes, __spreadArray([], __read(this.remove([colAlt]))));
+                            break;
+                        }
+                        case 'sort': {
+                            var alteration = new SortColumnsAlteration({ sorts: [] }, false);
+                            changes.push.apply(changes, __spreadArray([], __read(this.add([alteration]))));
+                            break;
+                        }
+                        case 'width': {
+                            var alteration = new WidthColumnsAlteration({ columnProp: colAlt.state.columnProp, canAutoResize: true }, false);
+                            changes.push.apply(changes, __spreadArray([], __read(this.add([alteration]))));
+                            break;
+                        }
                     }
-                    if (utils.hasProperty(column, 'hidden')) {
-                        _colPref.hidden = column.hidden;
+                }
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
+            if (utils.notNullOrUndefined(options === null || options === void 0 ? void 0 : options.emitEvent) && !(options === null || options === void 0 ? void 0 : options.emitEvent)) {
+                return changes;
+            }
+            this._emitChanges(changes);
+            return changes;
+        };
+        ColumnsAlterationsManagerService.prototype._removeNonPersistant = function () {
+            var nonPersistent = this._alterations.filter(function (x) { return !x.persistent; });
+            this.remove(nonPersistent, { emitEvent: false });
+        };
+        ColumnsAlterationsManagerService.prototype._emitChanges = function (changes) {
+            if (changes.length === 0) {
+                return;
+            }
+            var event = {
+                changes: changes
+            };
+            this._changesSubject.next(event);
+        };
+        return ColumnsAlterationsManagerService;
+    }());
+    ColumnsAlterationsManagerService.decorators = [
+        { type: i0.Injectable }
+    ];
+    ColumnsAlterationsManagerService.ctorParameters = function () { return []; };
+
+    /**
+     * Strings used for columns created and managed
+     * by the datatable.
+     */
+    var INTERNAL_COLUMN_PROPS = [
+        ACTION_MENU_COLUMN_PROP,
+        CHECKBOX_COLUMN_PROP
+    ];
+    function isInternalColumn(column) {
+        return INTERNAL_COLUMN_PROPS.findIndex(function (p) { return getColumnProp(column) === p; }) !== -1;
+    }
+
+    var OrderColumnsAlteration = /** @class */ (function (_super) {
+        __extends(OrderColumnsAlteration, _super);
+        function OrderColumnsAlteration(state, persistent) {
+            var _this = _super.call(this, state, persistent) || this;
+            _this.type = 'order';
+            if (!_this._isValidState(state)) {
+                throw Error("Invalid state: " + JSON.stringify(state));
+            }
+            _this.id = "" + _this.type;
+            return _this;
+        }
+        OrderColumnsAlteration.prototype.apply = function (columns, datatable) {
+            var e_1, _a, e_2, _b;
+            if (this.state.columns.length === 0) {
+                return;
+            }
+            var stateColumns = this._stateColumns();
+            // The internal columns are not intended for a user to be able to move them.
+            // Store the internal columns current index, so it can be moved back ofter
+            // sorting. This may not be the best way to do this, but it is easier than
+            // making a sort that avoids them.
+            //
+            // NOTE: If we add an internal column that can be moved then this will need
+            // to be changed.
+            var internalColumns = columns
+                .map(function (column, index) { return ({ column: column, index: index }); })
+                .filter(function (x) { return isInternalColumn(x.column); });
+            var _loop_1 = function (c) {
+                var currentIndex = columns.findIndex(function (x) { return getColumnProp(x) === c.columnProp; });
+                if (currentIndex === c.index || currentIndex === -1) {
+                    return "continue";
+                }
+                utils.arrayMoveMutable(columns, currentIndex, c.index);
+            };
+            try {
+                for (var stateColumns_1 = __values(stateColumns), stateColumns_1_1 = stateColumns_1.next(); !stateColumns_1_1.done; stateColumns_1_1 = stateColumns_1.next()) {
+                    var c = stateColumns_1_1.value;
+                    _loop_1(c);
+                }
+            }
+            catch (e_1_1) { e_1 = { error: e_1_1 }; }
+            finally {
+                try {
+                    if (stateColumns_1_1 && !stateColumns_1_1.done && (_a = stateColumns_1.return)) _a.call(stateColumns_1);
+                }
+                finally { if (e_1) throw e_1.error; }
+            }
+            var _loop_2 = function (c) {
+                var currentIndex = columns.findIndex(function (col) { return col === c.column; });
+                if (currentIndex !== -1) {
+                    utils.arrayMoveMutable(columns, currentIndex, c.index);
+                }
+                else {
+                    if (i0.isDevMode()) {
+                        console.warn("Internal column could not be found after sorting. Was it lost during the sorting?");
                     }
                 }
-                else {
-                    columns.push(Object.assign({}, column));
+            };
+            try {
+                for (var internalColumns_1 = __values(internalColumns), internalColumns_1_1 = internalColumns_1.next(); !internalColumns_1_1.done; internalColumns_1_1 = internalColumns_1.next()) {
+                    var c = internalColumns_1_1.value;
+                    _loop_2(c);
                 }
-                var newPrefs = Object.assign(Object.assign({}, prefs), { columns: columns });
-                return newPrefs;
-            }), 
-            // tap(v => console.log('newPrefs', v)),
-            operators.take(1), operators.switchMap(function (newPrefs) { return _this._prefsAccessor
-                ? _this._prefsAccessor.update(preferenceKey, JSON.stringify(newPrefs))
-                : rxjs.of(newPrefs); }), operators.tap(function () { return _this.refresh(preferenceKey); }))
-                .subscribe();
+            }
+            catch (e_2_1) { e_2 = { error: e_2_1 }; }
+            finally {
+                try {
+                    if (internalColumns_1_1 && !internalColumns_1_1.done && (_b = internalColumns_1.return)) _b.call(internalColumns_1);
+                }
+                finally { if (e_2) throw e_2.error; }
+            }
         };
-        DatatablePreferencesService.prototype.withColumnPreferences = function (preferenceKey, columns) {
-            return this.preferences(preferenceKey).pipe(operators.startWith({}), operators.map(function (preferences) { return preferences && preferences.columns
-                ? withStoredColumnInfo(columns, preferences.columns)
-                : columns; }));
+        OrderColumnsAlteration.prototype._isValidState = function (state) {
+            // NOTE: Checking null or undefined, even though the type doesn't allow,
+            // because the state may have been loaded from an invalid persistant
+            // storage.
+            // TODO: Remove when state validation/migration is implemented to happen
+            // when retrieved from storage.
+            if (!utils.notNullOrUndefined(state.columns)) {
+                return false;
+            }
+            // NOTE: Didn't iterate each column record, because it is probably better to
+            // just skip to invalid column records. It does prevent being able to
+            // validate the whole state though.
+            return true;
         };
-        return DatatablePreferencesService;
-    }());
-    DatatablePreferencesService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function DatatablePreferencesService_Factory() { return new DatatablePreferencesService(i0__namespace.ɵɵinject(THESEAM_DATATABLE_PREFERENCES_ACCESSOR, 8)); }, token: DatatablePreferencesService, providedIn: "root" });
-    DatatablePreferencesService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root'
-                },] }
-    ];
-    DatatablePreferencesService.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [THESEAM_DATATABLE_PREFERENCES_ACCESSOR,] }] }
-    ]; };
-
-    var THESEAM_DATATABLE_ACCESSOR = new i0.InjectionToken('TheSeamDatatableAccessor');
+        OrderColumnsAlteration.prototype._isColumnOrderRecordValid = function (columnOrder) {
+            return utils.notNullOrUndefined(columnOrder.columnProp) && utils.notNullOrUndefined(columnOrder.index);
+        };
+        OrderColumnsAlteration.prototype._stateColumns = function () {
+            var _this = this;
+            return this.state.columns.filter(function (c) {
+                if (!_this._isColumnOrderRecordValid(c)) {
+                    if (i0.isDevMode()) {
+                        console.warn('Invalid column order record', c);
+                    }
+                    return false;
+                }
+                return true;
+            }).sort(function (a, b) { return a.index === b.index ? 0 : a.index > b.index ? 1 : -1; });
+        };
+        return OrderColumnsAlteration;
+    }(ColumnsAlteration));
 
-    function _setColumnDefaults(columns) {
-        var e_1, _h;
+    function mapColumnsAlterationsStates(states) {
+        var e_1, _a;
+        var alterations = [];
         try {
-            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
-                var column = columns_1_1.value;
-                if (!column.hasOwnProperty('hidden')) {
-                    column.hidden = false;
+            for (var states_1 = __values(states), states_1_1 = states_1.next(); !states_1_1.done; states_1_1 = states_1.next()) {
+                var state = states_1_1.value;
+                try {
+                    switch (state.type) {
+                        case 'hide-column':
+                            alterations.push(new HideColumnColumnsAlteration(state.state, true));
+                            break;
+                        case 'width':
+                            alterations.push(new WidthColumnsAlteration(state.state, true));
+                            break;
+                        case 'order':
+                            alterations.push(new OrderColumnsAlteration(state.state, true));
+                            break;
+                        case 'sort':
+                            alterations.push(new SortColumnsAlteration(state.state, true));
+                            break;
+                        default: {
+                            if (i0.isDevMode()) {
+                                console.warn('Unrecognized ColumnsAlteration state', state);
+                            }
+                        }
+                    }
+                }
+                catch (e) {
+                    if (i0.isDevMode()) {
+                        console.warn('Unable to map ColumnsAlteration state', state);
+                        console.warn(e);
+                    }
                 }
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (columns_1_1 && !columns_1_1.done && (_h = columns_1.return)) _h.call(columns_1);
+                if (states_1_1 && !states_1_1.done && (_a = states_1.return)) _a.call(states_1);
             }
             finally { if (e_1) throw e_1.error; }
         }
-        ngxDatatable.setColumnDefaults(columns);
-    }
+        return alterations;
+    }
+
     /**
      * Intended for internal classes declared by the `TheSeamDatatableModule`.
      */
@@ -1036,26 +1881,20 @@
         // tslint:disable-next-line:no-use-before-declare
         useExisting: i0.forwardRef(function () { return DatatableComponent; })
     };
-    // TODO: Reduce reliance on BehaviorSubject based observables, because it should
-    // be easier to avoit over emitting observables.
     var DatatableComponent = /** @class */ (function () {
-        function DatatableComponent(_columnChangesService, _differs, _preferences) {
+        function DatatableComponent(_preferences, _columnsManager, _columnsAlterationsManager) {
             var _this = this;
-            // this.displayColumns$ = this.hiddenColumns$.pipe(
-            //   switchMap(hiddenColumns => this.columns$.pipe(map(cols => cols.filter(c => hiddenColumns.findIndex(hc => hc === c.prop) === -1))))
-            // )
-            this._columnChangesService = _columnChangesService;
-            this._differs = _differs;
             this._preferences = _preferences;
-            this.faChevronDown = freeSolidSvgIcons.faChevronDown;
-            this.faChevronRight = freeSolidSvgIcons.faChevronRight;
-            this.faSpinner = freeSolidSvgIcons.faSpinner;
+            this._columnsManager = _columnsManager;
+            this._columnsAlterationsManager = _columnsAlterationsManager;
+            this._faChevronDown = freeSolidSvgIcons.faChevronDown;
+            this._faChevronRight = freeSolidSvgIcons.faChevronRight;
+            this._faSpinner = freeSolidSvgIcons.faSpinner;
             this._ngUnsubscribe = new rxjs.Subject();
             this._filtersSubject = new rxjs.BehaviorSubject([]);
-            this._columnsObservable = new rxjs.BehaviorSubject(undefined);
             this._dataSourceSubject = new rxjs.BehaviorSubject(undefined);
+            this._resizing = {};
             this._preferencesKey = new rxjs.BehaviorSubject(undefined);
-            this._columns = new rxjs.BehaviorSubject([]);
             this._rows = new rxjs.BehaviorSubject([]);
             this.columnMode = ngxDatatable.ColumnMode.force;
             this.selected = [];
@@ -1067,7 +1906,7 @@
             this.loadingIndicator = false;
             this.reorderable = true;
             this.swapColumns = false;
-            this.sortType = ngxDatatable.SortType.single;
+            this._sortType = ngxDatatable.SortType.single;
             this._sorts = [];
             this.cssClasses = {
                 sortAscending: 'datatable-icon-up',
@@ -1112,27 +1951,50 @@
             this._colDiffersInp = {};
             this._colDiffersTpl = {};
             this._rowDetailToggleSubscription = rxjs.Subscription.EMPTY;
-            var applyPrefs = function (cols) { return _this._preferencesKey.pipe(operators.switchMap(function (name) { return !!name
-                // NOTE: This pending check is temporary to avoid table using previously
-                // retrieved preference while the new one is being updated on the
-                // server.
-                ? !_this._preferences.pending
-                    ? _this._preferences.withColumnPreferences(name, cols)
-                    : rxjs.of(cols)
-                : rxjs.of(cols); })); };
-            this.columns$ = this._columnsObservable.pipe(operators.switchMap(function (colsObs) { return colsObs !== null && colsObs !== void 0 ? colsObs : rxjs.of([]); }));
-            this.displayColumns$ = this.columns$.pipe(operators.map(function (cols) { return cols.filter(function (c) { return !c.hidden; }); }), operators.tap(function (v) { return _this._removeUnusedDiffs(v); }), operators.switchMap(function (cols) { return applyPrefs(cols); }));
+            this._preferencesKey.pipe(operators.distinctUntilChanged(), operators.switchMap(function (key) {
+                if (!utils.notNullOrUndefined(key) || key.length === 0) {
+                    return rxjs.of(undefined);
+                }
+                return rxjs.from(utils.waitOnConditionAsync(function () { return _this._preferences.loaded; })).pipe(operators.switchMap(function () { return _this._columnsAlterationsManager.changes.pipe(operators.startWith(undefined), operators.tap(function () {
+                    _this._preferences.setAlterations(key, _this._columnsAlterationsManager.get());
+                })); }));
+            }), operators.takeUntil(this._ngUnsubscribe)).subscribe();
+            var applyPrefs = function (cols) { return _this._columnsAlterationsManager.changes.pipe(operators.startWith(undefined), operators.map(function () {
+                _this._columnsAlterationsManager.apply(cols, _this);
+                return cols;
+            })); };
+            this._preferencesKey.pipe(operators.distinctUntilChanged(), operators.switchMap(function (prefsKey) {
+                if (!utils.notNullOrUndefined(prefsKey)) {
+                    return rxjs.of(undefined);
+                }
+                return _this._preferences.preferences(prefsKey).pipe(operators.switchMap(function (preferences) { return __awaiter(_this, void 0, void 0, function () {
+                    var _this = this;
+                    return __generator(this, function (_h) {
+                        switch (_h.label) {
+                            case 0: return [4 /*yield*/, utils.waitOnConditionAsync(function () { return _this._preferences.loaded; })];
+                            case 1:
+                                _h.sent();
+                                return [2 /*return*/, preferences];
+                        }
+                    });
+                }); }), operators.take(1), operators.map(function (preferences) {
+                    var alterations = [];
+                    try {
+                        alterations = mapColumnsAlterationsStates(preferences.alterations);
+                    }
+                    catch (e) {
+                        if (i0.isDevMode()) {
+                            console.warn('Unable to map columns alterations states');
+                            console.warn(e);
+                        }
+                    }
+                    _this._columnsAlterationsManager.add(alterations);
+                }));
+            }), operators.takeUntil(this._ngUnsubscribe)).subscribe();
+            this.columns$ = this._columnsManager.columns$;
+            this.displayColumns$ = this.columns$.pipe(operators.switchMap(function (cols) { return applyPrefs(cols); }), operators.map(function (cols) { return cols.filter(function (c) { return !c.hidden; }); }), operators.tap(function (v) { return removeUnusedDiffs(v, _this._colDiffersInp, _this._colDiffersTpl); }));
             this.filters$ = this._filtersSubject.asObservable();
             this.filterStates = this._filtersSubject.asObservable().pipe(operators.switchMap(function (filters) { return dataFilters.composeDataFilterStates(filters); }));
-            // this.rows$ = this._filtersSubject.asObservable()
-            //   .pipe(
-            //     switchMap(filters => {
-            //       if (this.externalFiltering) {
-            //         return this._rows.asObservable()
-            //       }
-            //       return this._rows.asObservable().pipe(composeDataFilters(filters))
-            //     })
-            //   )
             this.rows$ = this._dataSourceSubject.pipe(operators.switchMap(function (dataSource) {
                 // console.log('dataSource', dataSource)
                 var dataStream;
@@ -1168,20 +2030,6 @@
                 // tap(v => console.log('stream', v)),
                 operators.takeUntil(_this._ngUnsubscribe));
             }));
-            // this.hiddenColumns$ = this._hiddenColumns.asObservable()
-            // this._hiddenColumns.pipe(
-            //   skip(1),
-            //   distinctUntilChanged((a, b) => {
-            //     const _a = Array.isArray(a) ? a : []
-            //     const _b = Array.isArray(b) ? b : []
-            //     if (_a.length !== _b.length) { return false }
-            //     const _as = _a.sort()
-            //     const _bs = _b.sort()
-            //     return !_as.sort().every((value: string, index: number) => _bs[index] === value)
-            //   }),
-            //   tap(v => this.hiddenColumnsChange.emit(v)),
-            //   untilDestroyed(this)
-            // ).subscribe(v => console.log('hiddenColumnsChange', v))
             // TODO: Implement viewChange for CollectionViewer.
             this.viewChange = this.page.pipe(operators.map(function (p) { return ({ start: 0, end: p.count }); }));
         }
@@ -1197,22 +2045,45 @@
             configurable: true
         });
         Object.defineProperty(DatatableComponent.prototype, "columns", {
-            get: function () { return this._columns.value; },
             set: function (value) {
-                // console.log('columns input', value)
-                this._columns.next(Array.isArray(value) ? value : []);
+                this._columnsManager.setInputColumns(Array.isArray(value) ? value : []);
             },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(DatatableComponent.prototype, "rows", {
             get: function () { return this._rows.value; },
-            set: function (value) { this._rows.next(value || []); },
+            set: function (value) {
+                this._rows.next(value || []);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "selectionType", {
+            get: function () { return this._columnsManager.getSelectionType(); },
+            set: function (value) {
+                this._columnsManager.setSelectionType(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "sortType", {
+            get: function () { return this._sortType; },
+            set: function (value) {
+                if (utils.notNullOrUndefined(value) && (value === ngxDatatable.SortType.single || value == ngxDatatable.SortType.multi)) {
+                    this._sortType = value;
+                }
+                else {
+                    this._sortType = ngxDatatable.SortType.single;
+                }
+            },
             enumerable: false,
             configurable: true
         });
         Object.defineProperty(DatatableComponent.prototype, "sorts", {
-            get: function () { return this.ngxDatatable ? this.ngxDatatable.sorts : this._sorts; },
+            get: function () {
+                return this.ngxDatatable ? this.ngxDatatable.sorts : this._sorts;
+            },
             set: function (value) {
                 this._sorts = utils.notNullOrUndefined(value) ? coercion.coerceArray(value) : [];
             },
@@ -1229,6 +2100,23 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DatatableComponent.prototype, "columnComponents", {
+            set: function (value) {
+                var _a;
+                this._columnsManager.setTemplateColumns(translateTemplateColumns((_a = value === null || value === void 0 ? void 0 : value.toArray()) !== null && _a !== void 0 ? _a : []));
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "rowActionItem", {
+            get: function () { return this._rowActionItem; },
+            set: function (value) {
+                this._rowActionItem = value;
+                this._columnsManager.setRowActionItem(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DatatableComponent.prototype, "menuBarComponent", {
             get: function () { return this._menuBarComponent; },
             set: function (value) {
@@ -1246,6 +2134,75 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(DatatableComponent.prototype, "actionMenuCellTpl", {
+            get: function () { return this._actionMenuCellTpl; },
+            set: function (value) {
+                this._actionMenuCellTpl = value;
+                this._columnsManager.setActionMenuCellTpl(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "treeToggleTpl", {
+            get: function () { return this._treeToggleTpl; },
+            set: function (value) {
+                this._treeToggleTpl = value;
+                this._columnsManager.setTreeToggleTpl(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "headerTpl", {
+            get: function () { return this._headerTpl; },
+            set: function (value) {
+                this._headerTpl = value;
+                this._columnsManager.setHeaderTpl(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "blankHeaderTpl", {
+            get: function () { return this._blankHeaderTpl; },
+            set: function (value) {
+                this._blankHeaderTpl = value;
+                this._columnsManager.setBlankHeaderTpl(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(DatatableComponent.prototype, "cellTypeSelectorTpl", {
+            get: function () { return this._cellTypeSelectorTpl; },
+            set: function (value) {
+                this._cellTypeSelectorTpl = value;
+                this._columnsManager.setCellTypeSelectorTpl(utils.notNullOrUndefined(value) ? value : undefined);
+            },
+            enumerable: false,
+            configurable: true
+        });
+        // TODO: Remove this DOM-dependent code when a way to property listen for
+        // dblclick on the header reasize handles.
+        DatatableComponent.prototype._dblClick = function (event) {
+            var _this = this;
+            var _a, _b, _c;
+            var isHandle = event.target.classList.contains('resize-handle');
+            if (isHandle) {
+                var isResizeable = (_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('resizeable');
+                if (isResizeable) {
+                    event.stopPropagation();
+                    var id_1 = (_c = (_b = event.target.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector('.datatable-column-header-separator')) === null || _c === void 0 ? void 0 : _c.getAttribute('data-column-id');
+                    this._columnsManager.columns$.pipe(operators.take(1)).subscribe(function (columns) {
+                        var column = columns.find(function (c) { return c.$$id === id_1; });
+                        if (column) {
+                            var columnProp = getColumnProp(column);
+                            if (columnProp) {
+                                var alteration = new WidthColumnsAlteration({ columnProp: columnProp, canAutoResize: true }, false);
+                                _this._columnsAlterationsManager.add([alteration]);
+                            }
+                        }
+                    });
+                }
+            }
+        };
         DatatableComponent.prototype.ngOnInit = function () {
             var _this = this;
             if (this.rowDetail) {
@@ -1259,160 +2216,7 @@
         DatatableComponent.prototype.ngOnDestroy = function () {
             this._rowDetailToggleSubscription.unsubscribe();
         };
-        DatatableComponent.prototype.ngAfterContentInit = function () {
-            var _this = this;
-            var _a, _b;
-            this.columnComponents$ = this._columnChangesService.columnInputChanges$.pipe(operators.map(function () { var _a, _b; return (_b = (_a = _this.columnComponents) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : []; }), operators.startWith((_b = (_a = this.columnComponents) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : []), operators.shareReplay({ bufferSize: 1, refCount: true }));
-            var _columns = rxjs.combineLatest([
-                this.columnComponents$,
-                this._columns
-            ]).pipe(operators.map(function (v) { var _a; return _this._getMergedTplAndInpColumns(v[0], (_a = v[1]) !== null && _a !== void 0 ? _a : []); }), 
-            // tap(v => console.log('cols', v)),
-            operators.shareReplay({ bufferSize: 1, refCount: true }));
-            this._columnsObservable.next(_columns);
-        };
-        DatatableComponent.prototype._getMergedTplAndInpColumns = function (tplCols, inpCols) {
-            var e_2, _h, e_3, _j;
-            var cols = [];
-            if (this.selectionType === 'checkbox') {
-                var checkBoxCol = {
-                    prop: '$$__checkbox__',
-                    name: '',
-                    width: 40,
-                    sortable: false,
-                    canAutoResize: false,
-                    draggable: false,
-                    resizeable: false,
-                    headerCheckboxable: true,
-                    checkboxable: true
-                };
-                cols.push(checkBoxCol);
-            }
-            var _tplCols = ngxDatatable.translateTemplates((tplCols || []));
-            var _loop_1 = function (col) {
-                var tplCol = _tplCols.find(function (t) { return t.prop === col.prop; });
-                // console.log({ col: { ...(col || {}) }, tplCol: { ...(tplCol || {}) } })
-                var dtColumns = (this_1.ngxDatatable && this_1.ngxDatatable._internalColumns) || [];
-                var prev = dtColumns.find(function (c) { return c.prop === col.prop; });
-                var inpColDiff = this_1._getColDiff(col);
-                var _inpCol = inpColDiff ? {} : this_1._hasPrevColDiff(col) ? {} : col;
-                if (inpColDiff) {
-                    inpColDiff.forEachRemovedItem(function (r) {
-                        if (prev && prev.hasOwnProperty(r.key)) {
-                            var k = r.key;
-                            delete prev[k];
-                        }
-                    });
-                    inpColDiff.forEachAddedItem(function (r) { return _inpCol[r.key] = r.currentValue; });
-                    inpColDiff.forEachChangedItem(function (r) { return _inpCol[r.key] = r.currentValue; });
-                }
-                var _tplCol = {};
-                if (tplCol) {
-                    var tplColDiff = tplCol ? this_1._getColDiff(tplCol, true) : undefined;
-                    _tplCol = tplColDiff ? {} : this_1._hasPrevColDiff(col, true) ? {} : tplCol;
-                    if (tplColDiff) {
-                        tplColDiff.forEachRemovedItem(function (r) {
-                            if (prev && prev.hasOwnProperty(r.key)) {
-                                var k = r.key;
-                                delete prev[k];
-                            }
-                        });
-                        tplColDiff.forEachAddedItem(function (r) { return _tplCol[r.key] = r.currentValue; });
-                        tplColDiff.forEachChangedItem(function (r) { return _tplCol[r.key] = r.currentValue; });
-                    }
-                }
-                var _col = Object.assign(Object.assign(Object.assign({}, (prev || {})), _inpCol), _tplCol);
-                cols.push(_col);
-            };
-            var this_1 = this;
-            try {
-                for (var inpCols_1 = __values(inpCols), inpCols_1_1 = inpCols_1.next(); !inpCols_1_1.done; inpCols_1_1 = inpCols_1.next()) {
-                    var col = inpCols_1_1.value;
-                    _loop_1(col);
-                }
-            }
-            catch (e_2_1) { e_2 = { error: e_2_1 }; }
-            finally {
-                try {
-                    if (inpCols_1_1 && !inpCols_1_1.done && (_h = inpCols_1.return)) _h.call(inpCols_1);
-                }
-                finally { if (e_2) throw e_2.error; }
-            }
-            if (this.rowActionItem) {
-                var actionMenuColumn = {
-                    prop: '$$__actionMenu__',
-                    name: '',
-                    width: 50,
-                    minWidth: 50,
-                    maxWidth: 50,
-                    resizeable: false,
-                    sortable: false,
-                    draggable: false,
-                    // TODO: Fix column auto sizing with fixed column and cell overlay before enabling.
-                    // frozenRight: true,
-                    cellTemplate: this.actionMenuCellTpl,
-                    headerTemplate: this.blankHeaderTpl
-                };
-                cols.push(actionMenuColumn);
-            }
-            try {
-                for (var cols_1 = __values(cols), cols_1_1 = cols_1.next(); !cols_1_1.done; cols_1_1 = cols_1.next()) {
-                    var col = cols_1_1.value;
-                    if (col.isTreeColumn && utils.hasProperty(col, 'treeToggleTemplate')) {
-                        col.treeToggleTemplate = this.treeToggleTpl;
-                    }
-                    if (!utils.hasProperty(col, 'headerTemplate')) {
-                        col.headerTemplate = this.headerTpl;
-                    }
-                    if (utils.hasProperty(col, 'cellType')) {
-                        col.cellTemplate = this.cellTypeSelectorTpl;
-                    }
-                }
-            }
-            catch (e_3_1) { e_3 = { error: e_3_1 }; }
-            finally {
-                try {
-                    if (cols_1_1 && !cols_1_1.done && (_j = cols_1.return)) _j.call(cols_1);
-                }
-                finally { if (e_3) throw e_3.error; }
-            }
-            // setColumnDefaults(cols)
-            _setColumnDefaults(cols);
-            // console.log(cols.map(c => ({ prop: c.prop, canAutoResize: c.canAutoResize })))
-            return cols;
-        };
-        DatatableComponent.prototype._hasPrevColDiff = function (col, isTpl) {
-            if (isTpl === void 0) { isTpl = false; }
-            if (!col || !col.prop) {
-                return false;
-            }
-            var differsMap = isTpl ? this._colDiffersTpl : this._colDiffersInp;
-            return !!differsMap;
-        };
-        DatatableComponent.prototype._getColDiff = function (col, isTpl) {
-            if (isTpl === void 0) { isTpl = false; }
-            if (!col || !col.prop) {
-                return;
-            }
-            var differsMap = isTpl ? this._colDiffersTpl : this._colDiffersInp;
-            if (!differsMap[col.prop]) {
-                differsMap[col.prop] = this._differs.find({}).create();
-            }
-            var differ = differsMap[col.prop];
-            var diff = differ.diff(col);
-            return diff;
-        };
-        DatatableComponent.prototype._removeUnusedDiffs = function (cols) {
-            var _this = this;
-            var inpKeys = Object.keys(this._colDiffersInp);
-            inpKeys.filter(function (k) { return cols.findIndex(function (c) { return c.prop === k; }) === -1; })
-                .forEach(function (k) { delete _this._colDiffersInp[k]; });
-            var tplKeys = Object.keys(this._colDiffersTpl);
-            tplKeys.filter(function (k) { return cols.findIndex(function (c) { return c.prop === k; }) === -1; })
-                .forEach(function (k) { delete _this._colDiffersTpl[k]; });
-        };
         DatatableComponent.prototype._setMenuBarFilters = function (filters) {
-            // console.log('_setMenuBarFilters', filters)
             this._filtersSubject.next(filters || []);
         };
         DatatableComponent.prototype.getColumnComponent = function (propName) {
@@ -1446,21 +2250,50 @@
             }
         };
         DatatableComponent.prototype._onResize = function (event) {
-            // console.log('resize', event, event.column.prop)
             this.resize.emit(event);
-            if (event.isDone && this.columns) {
-                var columns = this.columns;
-                var col = columns.find(function (c) { return c.prop === event.column.prop; });
-                if (col) {
-                    col.canAutoResize = false;
+            if (!utils.notNullOrUndefined(event.column)) {
+                return;
+            }
+            var columnProp = getColumnProp(event.column);
+            if (columnProp) {
+                var addAlteration = false;
+                if (!this._resizing[columnProp]) {
+                    this._resizing[columnProp] = true;
+                    addAlteration = true;
+                }
+                if (event.isDone) {
+                    this._resizing[columnProp] = false;
+                    addAlteration = true;
                 }
-                if (this.preferencesKey) {
-                    var pref = { prop: event.column.prop, width: event.column.width, canAutoResize: false };
-                    this._preferences.setColumnPreference(this.preferencesKey, pref);
+                if (addAlteration) {
+                    var alteration = new WidthColumnsAlteration({
+                        columnProp: columnProp,
+                        width: event.column.width,
+                        canAutoResize: false
+                    }, true);
+                    this._columnsAlterationsManager.add([alteration]);
                 }
-                this.columns = __spreadArray([], __read(this.columns));
             }
         };
+        DatatableComponent.prototype._onReorder = function (event) {
+            this.reorder.emit(event);
+            var columnProp = getColumnProp(event.column);
+            if (columnProp) {
+                var currentOrderAlteration = this._columnsAlterationsManager.get().find(function (x) { return x.type === 'order'; });
+                var state = {
+                    columns: __spreadArray(__spreadArray([], __read(((currentOrderAlteration === null || currentOrderAlteration === void 0 ? void 0 : currentOrderAlteration.state.columns) || []))), [
+                        { columnProp: columnProp, index: event.newValue }
+                    ])
+                };
+                var alteration = new OrderColumnsAlteration(state, true);
+                this._columnsAlterationsManager.add([alteration]);
+            }
+        };
+        DatatableComponent.prototype._onSort = function (event) {
+            this.sort.emit(event);
+            var alteration = new SortColumnsAlteration({ sorts: event.sorts }, true);
+            this._columnsAlterationsManager.add([alteration]);
+        };
         DatatableComponent.prototype._onTreeAction = function (event) {
             var index = event.rowIndex;
             var row = event.row;
@@ -1476,6 +2309,9 @@
             this.actionRefreshRequest.emit(undefined);
         };
         Object.defineProperty(DatatableComponent.prototype, "pageInfo", {
+            /**
+             * Returns the page info from the wrapped NgxDatatable instance or defaults.
+             */
             get: function () {
                 var _a, _b, _c, _d, _e, _f, _g;
                 return {
@@ -1493,7 +2329,7 @@
     DatatableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-datatable',
-                    template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"sort.emit($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"reorder.emit($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n",
+                    template: "<div class=\"datatable-wrapper\">\n  <ng-content select=\"seam-datatable-menu-bar\"></ng-content>\n  <div class=\"datatable-table-wrapper\">\n    <ng-container>\n      <ngx-datatable\n        [columnMode]=\"$any(columnMode)\"\n        [scrollbarV]=\"scrollbarV\"\n        [scrollbarH]=\"scrollbarH\"\n        [virtualization]=\"virtualization\"\n        [targetMarkerTemplate]=\"targetMarkerTemplate\"\n        [groupRowsBy]=\"$any(groupRowsBy)\"\n        [groupedRows]=\"$any(groupedRows)\"\n        [selected]=\"$any(selected)\"\n        [externalPaging]=\"externalPaging\"\n        [externalSorting]=\"externalSorting\"\n        [limit]=\"$any(limit)\"\n        [count]=\"$any(count)\"\n        [offset]=\"$any(offset)\"\n        [loadingIndicator]=\"loadingIndicator\"\n        [selectionType]=\"$any(selectionType)\"\n        [reorderable]=\"reorderable\"\n        [swapColumns]=\"swapColumns\"\n        [sortType]=\"$any(sortType)\"\n        [sorts]=\"$any(_sorts)\"\n        [cssClasses]=\"cssClasses\"\n        [messages]=\"messages\"\n        [rowIdentity]=\"$any(rowIdentity)\"\n        [rowClass]=\"rowClass\"\n        [selectCheck]=\"selectCheck\"\n        [displayCheck]=\"$any(displayCheck)\"\n        [groupExpansionDefault]=\"groupExpansionDefault\"\n        [trackByProp]=\"$any(trackByProp)\"\n        [selectAllRowsOnPage]=\"selectAllRowsOnPage\"\n        [treeFromRelation]=\"$any(treeFromRelation)\"\n        [treeToRelation]=\"$any(treeToRelation)\"\n        [summaryRow]=\"summaryRow\"\n        [summaryHeight]=\"$any(summaryHeight)\"\n        [summaryPosition]=\"$any(summaryPosition)\"\n        [rows]=\"rows$ | async\"\n        [columns]=\"$any(displayColumns$ | async)\"\n        [headerHeight]=\"$any(headerHeight)\"\n        [rowHeight]=\"$any(rowHeight)\"\n        [footerHeight]=\"$any(footerHeight)\"\n        (scroll)=\"scroll.emit($event)\"\n        (activate)=\"activate.emit($event)\"\n        (select)=\"select.emit($event)\"\n        (sort)=\"_onSort($event)\"\n        (page)=\"page.emit($event)\"\n        (reorder)=\"_onReorder($event)\"\n        (resize)=\"_onResize($event)\"\n        (tableContextmenu)=\"tableContextmenu.emit($event)\"\n        (treeAction)=\"treeAction.emit($event)\"\n        (seamElemResized)=\"onDatatableResize($event)\"\n        (treeAction)=\"_onTreeAction($event)\">\n\n        <ngx-datatable-group-header [rowHeight]=\"50\" #myGroupHeader *ngIf=\"groupRowsBy\">\n          <ng-template let-group=\"group\" let-expanded=\"expanded\" ngx-datatable-group-header-template>\n            <div\n              class=\"w-100 bg-light p-1\"\n              [class.border-bottom]=\"!expanded\"\n              [class.datatable-icon-right]=\"!expanded\"\n              [class.datatable-icon-down]=\"expanded\"\n              title=\"Expand/Collapse Group\"\n              (click)=\"ngxDatatable?.groupHeader?.toggleExpandGroup(group)\">\n              <b>Age: {{ group.age }}</b>\n            </div>\n          </ng-template>\n        </ngx-datatable-group-header>\n\n        <ngx-datatable-row-detail *ngIf=\"rowDetail && rowDetail.template\"\n          [rowHeight]=\"rowDetail.rowHeight || 0\"\n          [template]=\"$any(rowDetail.template)\"\n          (toggle)=\"rowDetail.toggle.emit($event)\">\n        </ngx-datatable-row-detail>\n\n        <ngx-datatable-footer *ngIf=\"footer && footer.template\"\n          [template]=\"$any(footer.template)\">\n        </ngx-datatable-footer>\n      </ngx-datatable>\n    </ng-container>\n  </div>\n</div>\n\n<ng-template #blankHeaderTpl ngx-datatable-header-template></ng-template>\n\n<ng-template #headerTpl ngx-datatable-header-template\n  let-column=\"column\" let-sortFn=\"sortFn\">\n  <strong *ngIf=\"!column.sortable\" class=\"draggable\">{{column.name}}</strong>\n  <strong *ngIf=\"column.sortable\" class=\"datatable-sort-target draggable\" (click)=\"sortFn()\">{{column.name}}</strong>\n  <div class=\"datatable-column-header-separator\" [attr.data-column-id]=\"column.$$id\"></div>\n</ng-template>\n\n<ng-template #cellTypeSelectorTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\" let-column=\"column\">\n  <seam-table-cell-type-selector *ngIf=\"row\"\n    [type]=\"column.cellType\"\n    [value]=\"value\"\n    [rowIndex]=\"rowIndex\"\n    [row]=\"row\"\n    [colData]=\"column\">\n  </seam-table-cell-type-selector>\n</ng-template>\n\n<ng-template #actionMenuCellTpl ngx-datatable-cell-template\n  let-value=\"value\" let-rowIndex=\"rowIndex\" let-row=\"row\">\n\n  <ng-container *ngIf=\"row && rowActionItem?.template\">\n    <ng-template\n      [ngTemplateOutlet]=\"$any(rowActionItem?.template)\"\n      [ngTemplateOutletContext]=\"{ $implicit: row, row: row, rowIndex: rowIndex }\">\n    </ng-template>\n  </ng-container>\n\n</ng-template>\n\n<ng-template #treeToggleTpl ngx-datatable-tree-toggle let-tree=\"cellContext\">\n  <button\n    class=\"p-0 bg-transparent border-0 btn\"\n    [disabled]=\"tree.treeStatus==='disabled'\"\n    (click)=\"tree.onTreeAction()\">\n    <span *ngIf=\"tree.treeStatus==='loading'\">\n      <fa-icon [icon]=\"_faSpinner\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='collapsed'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='expanded'\">\n      <fa-icon [icon]=\"_faChevronDown\"></fa-icon>\n    </span>\n    <span *ngIf=\"tree.treeStatus==='disabled'\">\n      <fa-icon [icon]=\"_faChevronRight\"></fa-icon>\n    </span>\n  </button>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     animations: [
                         animations.trigger('slideDown', [
@@ -1507,14 +2343,20 @@
                             ])
                         ])
                     ],
-                    providers: [_THESEAM_DATATABLE, DatatableColumnChangesService, _THESEAM_DATATABLE_ACCESSOR],
-                    styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute!important;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}"]
+                    providers: [
+                        _THESEAM_DATATABLE,
+                        DatatableColumnChangesService,
+                        _THESEAM_DATATABLE_ACCESSOR,
+                        ColumnsManagerService,
+                        ColumnsAlterationsManagerService,
+                    ],
+                    styles: [":host{display:flex;flex-grow:1;flex-direction:column}::ng-deep .seam-datatable-action-menu{min-width:auto!important}ngx-datatable{position:absolute!important;top:0;left:0;right:0;bottom:0}.datatable-wrapper{display:flex;flex-direction:column;flex-grow:1}.datatable-wrapper .datatable-table-wrapper{position:relative;flex:1 1 100%}.datatable-column-header-separator{position:absolute}.datatable-sort-target{cursor:pointer}\n"]
                 },] }
     ];
     DatatableComponent.ctorParameters = function () { return [
-        { type: DatatableColumnChangesService },
-        { type: i0.KeyValueDiffers },
-        { type: DatatablePreferencesService }
+        { type: DatatablePreferencesService },
+        { type: ColumnsManagerService },
+        { type: ColumnsAlterationsManagerService }
     ]; };
     DatatableComponent.propDecorators = {
         preferencesKey: [{ type: i0.Input }],
@@ -1582,7 +2424,8 @@
         treeToggleTpl: [{ type: i0.ViewChild, args: ['treeToggleTpl', { static: true },] }],
         headerTpl: [{ type: i0.ViewChild, args: ['headerTpl', { static: true },] }],
         blankHeaderTpl: [{ type: i0.ViewChild, args: ['blankHeaderTpl', { static: true },] }],
-        cellTypeSelectorTpl: [{ type: i0.ViewChild, args: ['cellTypeSelectorTpl', { static: true },] }]
+        cellTypeSelectorTpl: [{ type: i0.ViewChild, args: ['cellTypeSelectorTpl', { static: true },] }],
+        _dblClick: [{ type: i0.HostListener, args: ['dblclick', ['$event'],] }]
     };
     __decorate([
         core.InputBoolean()
@@ -1643,9 +2486,11 @@
     ], DatatableComponent.prototype, "scrollbarH", void 0);
 
     var DatatableColumnPreferencesComponent = /** @class */ (function () {
-        function DatatableColumnPreferencesComponent(_datatable) {
+        function DatatableColumnPreferencesComponent(_datatable, _columnsAlterationsManager) {
+            var _this = this;
             var _a;
             this._datatable = _datatable;
+            this._columnsAlterationsManager = _columnsAlterationsManager;
             this._filterControl = new forms.FormControl();
             this._columns$ = rxjs.combineLatest([
                 (_a = this._datatable.columns$) !== null && _a !== void 0 ? _a : rxjs.of([]),
@@ -1653,53 +2498,99 @@
             ]).pipe(operators.map(function (_b) {
                 var _c = __read(_b, 2), columns = _c[0], filter = _c[1];
                 var _filter = (filter || '').trim().toLowerCase();
-                return columns.filter(function (c) { return ("" + (c.name || c.prop || '')).toLowerCase().indexOf(_filter) !== -1; });
-            }), operators.map(function (cols) { return cols.sort(function (a, b) { return a.prop === b.prop ? 0 : a.prop > b.prop ? 1 : -1; }); }));
+                return columns
+                    .filter(function (c) { return _this._canToggleColumn(c, _filter); });
+            }));
         }
-        DatatableColumnPreferencesComponent.prototype.ngOnInit = function () { };
-        DatatableColumnPreferencesComponent.prototype._onChange = function (event, col) {
-            // TODO: Figure out the right way to update this value. If it is set by
-            // column component input this may not work right.
-            var columns = this._datatable.columns || [];
-            var column = columns.find(function (c) { return c.prop === col.prop; });
-            if (column) {
-                column.hidden = !event.checked;
-                this._datatable.columns = __spreadArray([], __read(columns));
+        DatatableColumnPreferencesComponent.prototype._canToggleColumn = function (column, filter, omitInternalColumns) {
+            if (omitInternalColumns === void 0) { omitInternalColumns = true; }
+            if (omitInternalColumns && isInternalColumn(column)) {
+                return false;
+            }
+            return this._columnMatchesFilter(column, filter);
+        };
+        DatatableColumnPreferencesComponent.prototype._columnMatchesFilter = function (column, filter) {
+            if (filter.length === 0) {
+                return true;
             }
+            return ("" + (getColumnProp(column) || '')).toLowerCase().indexOf(filter) !== -1;
         };
-        DatatableColumnPreferencesComponent.prototype._onCloseClick = function () {
-            // TODO: Implement when PopoverRef is implemented.
+        DatatableColumnPreferencesComponent.prototype._onChange = function (event, col) {
+            var columnProp = getColumnProp(col);
+            var hidden = !event.checked;
+            if (!utils.notNullOrUndefined(columnProp)) {
+                throw Error("Unable to get column prop.");
+            }
+            var alteration = new HideColumnColumnsAlteration({
+                columnProp: columnProp,
+                hidden: hidden
+            }, hidden);
+            this._columnsAlterationsManager.add([alteration]);
         };
         return DatatableColumnPreferencesComponent;
     }());
     DatatableColumnPreferencesComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-datatable-column-preferences',
-                    template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\">\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n",
+                    template: "<h3>Columns</h3>\n\n<seam-form-field [numPaddingErrors]=\"0\" >\n  <input seamInput [formControl]=\"_filterControl\" seamInputSize=\"sm\" placeholder=\"Search\" seamAutoFocus>\n</seam-form-field>\n\n<div seamOverlayScrollbar style=\"min-height: 200px; max-height: 600px; min-width: 250px;\" class=\"flex-grow-1 mb-2\">\n  <div class=\"p-2\">\n    <ng-container *ngFor=\"let col of _columns$ | async\">\n      <seam-checkbox [checked]=\"!col.hidden\" (change)=\"_onChange($event, col)\">{{ col.name || col.prop }}</seam-checkbox>\n    </ng-container>\n  </div>\n\n</div>\n<div class=\"d-flex flex-row justify-content-end\">\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" (click)=\"_onCloseClick()\">Close</button> -->\n  <!-- <button seamButton size=\"sm\" theme=\"lightgray\" class=\"mr-1\">Cancel</button>\n  <button seamButton size=\"sm\" theme=\"success\">Done</button> -->\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:column}"]
+                    styles: [":host{display:flex;flex-direction:column}\n"]
                 },] }
     ];
     DatatableColumnPreferencesComponent.ctorParameters = function () { return [
-        { type: DatatableComponent, decorators: [{ type: i0.Inject, args: [THESEAM_DATATABLE,] }] }
+        { type: DatatableComponent, decorators: [{ type: i0.Inject, args: [THESEAM_DATATABLE,] }] },
+        { type: ColumnsAlterationsManagerService }
     ]; };
 
     var DatatableColumnPreferencesButtonComponent = /** @class */ (function () {
-        function DatatableColumnPreferencesButtonComponent() {
+        function DatatableColumnPreferencesButtonComponent(_columnsAlterationsManager) {
+            this._columnsAlterationsManager = _columnsAlterationsManager;
             this.icon = freeSolidSvgIcons.faColumns;
+            /** @ignore */
+            this._actionMenuPositions = [
+                {
+                    originX: 'start',
+                    originY: 'bottom',
+                    overlayX: 'end',
+                    overlayY: 'top',
+                },
+                {
+                    originX: 'start',
+                    originY: 'top',
+                    overlayX: 'end',
+                    overlayY: 'bottom',
+                },
+                {
+                    originX: 'end',
+                    originY: 'bottom',
+                    overlayX: 'start',
+                    overlayY: 'top',
+                },
+                {
+                    originX: 'end',
+                    originY: 'top',
+                    overlayX: 'start',
+                    overlayY: 'bottom',
+                },
+            ];
         }
         DatatableColumnPreferencesButtonComponent.prototype.ngOnInit = function () { };
+        DatatableColumnPreferencesButtonComponent.prototype._resetColumns = function (event) {
+            this._columnsAlterationsManager.clear();
+        };
         return DatatableColumnPreferencesButtonComponent;
     }());
     DatatableColumnPreferencesButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'seam-datatable-column-preferences-button',
-                    template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n\n<button\n  seamButton\n  [seamPopover]=\"colPrefsTpl\"\n  theme=\"lightgray\"\n  size=\"sm\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Column Preferences\"\n  >\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\n",
+                    template: "<ng-template #colPrefsTpl>\n  <seam-datatable-column-preferences></seam-datatable-column-preferences>\n</ng-template>\n\n<seam-menu #menu\n  menuClass=\"list-group py-0 border-0 seam-datatable-action-menu\"\n  animationType=\"fade\">\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    [seamPopover]=\"colPrefsTpl\">\n    Show/Hide Columns\n  </button>\n\n  <button seamMenuItem\n    type=\"button\"\n    class=\"list-group-item list-group-item-action py-1\"\n    (click)=\"_resetColumns($event)\">\n    Reset Columns\n  </button>\n</seam-menu>\n\n<button type=\"button\" class=\"btn btn-lightgray btn-sm\"\n  [seamMenuToggle]=\"menu\"\n  [positions]=\"_actionMenuPositions || []\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Column Preferences\">\n  <seam-icon [icon]=\"icon\"></seam-icon>\n  <span class=\"sr-only\">Column Preferences</span>\n</button>\n\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     styles: [""]
                 },] }
     ];
-    DatatableColumnPreferencesButtonComponent.ctorParameters = function () { return []; };
+    DatatableColumnPreferencesButtonComponent.ctorParameters = function () { return [
+        { type: ColumnsAlterationsManagerService }
+    ]; };
 
     var DatatableExportButtonComponent = /** @class */ (function () {
         function DatatableExportButtonComponent(_datatable, _toastr, _loading, _valueHelper, _data) {
@@ -1729,12 +2620,15 @@
                     : exporter.label + " export is not available.";
                 this._toastr.error(msg, 'Data Export');
             }
-            var export$ = this._datatable.rows$
-                .pipe(operators.take(1), operators.map(function (rows) {
+            var export$ = rxjs.combineLatest([
+                this._datatable.rows$,
+                this._datatable.columns$.pipe(operators.map(function (cols) { return cols.filter(function (c) { return !isInternalColumn(c); }); }))
+            ]).pipe(operators.take(1), operators.map(function (_a) {
+                var _b = __read(_a, 2), rows = _b[0], columns = _b[1];
                 if (exporter.skipDataMapping) {
                     return rows;
                 }
-                return _this._mapExportData(_this._datatable.columns || [], rows);
+                return _this._mapExportData(columns || [], rows);
             }), operators.concatMap(function (data) { return exporter.export(data); }), operators.catchError(function (err) {
                 console.error(err);
                 return rxjs.of(false);
@@ -1803,7 +2697,7 @@
                     selector: 'seam-datatable-export-button',
                     template: "<seam-menu #menu>\n  <button *ngFor=\"let exp of exporters\"\n    seamMenuItem\n    [icon]=\"exp?.icon\"\n    (click)=\"_onExporterClicked(exp)\">\n    {{ exp.label }}\n  </button>\n</seam-menu>\n<button\n  [seamMenuToggle]=\"menu\"\n  seamButton\n  theme=\"lightgray\"\n  size=\"sm\"\n  class=\"dropdown-toggle\"\n  style=\"padding-left: 10px; padding-right: 10px;\"\n  title=\"Export\"\n  [disabled]=\"disabled\"\n  >\n  <seam-icon [icon]=\"icon\" class=\"mr-2\"></seam-icon>\n</button>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:inline-block}"]
+                    styles: [":host{display:inline-block}\n"]
                 },] }
     ];
     DatatableExportButtonComponent.ctorParameters = function () { return [
@@ -1829,7 +2723,7 @@
                     selector: 'seam-datatable-menu-bar-column-center',
                     template: "<ng-content></ng-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}"]
+                    styles: [":host{display:flex;flex-direction:row;flex:1 1 auto;justify-content:center}\n"]
                 },] }
     ];
     DatatableMenuBarColumnCenterComponent.ctorParameters = function () { return []; };
@@ -1846,7 +2740,7 @@
                     selector: 'seam-datatable-menu-bar-column-left',
                     template: "<ng-content></ng-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}"]
+                    styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-start}\n"]
                 },] }
     ];
     DatatableMenuBarColumnLeftComponent.ctorParameters = function () { return []; };
@@ -1863,7 +2757,7 @@
                     selector: 'seam-datatable-menu-bar-column-right',
                     template: "<ng-content></ng-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}"]
+                    styles: [":host{display:flex;flex-direction:row;flex:1 1 0%;justify-content:flex-end}\n"]
                 },] }
     ];
     DatatableMenuBarColumnRightComponent.ctorParameters = function () { return []; };
@@ -1880,7 +2774,7 @@
                     selector: 'seam-datatable-menu-bar-row',
                     template: "<ng-content></ng-content>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}"]
+                    styles: [":host{display:flex;flex-direction:row;flex-wrap:wrap}\n"]
                 },] }
     ];
     DatatableMenuBarRowComponent.ctorParameters = function () { return []; };
@@ -2158,6 +3052,39 @@
         { type: scrollbar.OverlayScrollbarsService }
     ]; };
 
+    function withStoredColumnInfo(columns, preferenceColumns) {
+        var e_1, _a;
+        var _columns = [];
+        var _loop_1 = function (col) {
+            var storedCol = preferenceColumns.find(function (v) { return v.prop === col.prop; });
+            if (storedCol) {
+                var _col = Object.assign({}, col);
+                if (utils.hasProperty(storedCol, 'width')) {
+                    _col.width = Math.max(storedCol.width, 0);
+                }
+                _col.canAutoResize = storedCol.canAutoResize;
+                _columns.push(_col);
+            }
+            else {
+                _columns.push(col);
+            }
+        };
+        try {
+            for (var columns_1 = __values(columns), columns_1_1 = columns_1.next(); !columns_1_1.done; columns_1_1 = columns_1.next()) {
+                var col = columns_1_1.value;
+                _loop_1(col);
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (columns_1_1 && !columns_1_1.done && (_a = columns_1.return)) _a.call(columns_1);
+            }
+            finally { if (e_1) throw e_1.error; }
+        }
+        return _columns;
+    }
+
     var TheSeamDatatableModule = /** @class */ (function () {
         function TheSeamDatatableModule() {
         }
@@ -2248,6 +3175,7 @@
      * Generated bundle index. Do not edit.
      */
 
+    exports.CURRENT_DATATABLE_PREFERENCES_VERSION = CURRENT_DATATABLE_PREFERENCES_VERSION;
     exports.DatatableActionMenuComponent = DatatableActionMenuComponent;
     exports.DatatableActionMenuItemComponent = DatatableActionMenuItemComponent;
     exports.DatatableActionMenuItemDirective = DatatableActionMenuItemDirective;
@@ -2272,6 +3200,7 @@
     exports.DatatablePreferencesService = DatatablePreferencesService;
     exports.DatatableRowActionItemDirective = DatatableRowActionItemDirective;
     exports.DatatableRowDetailTplDirective = DatatableRowDetailTplDirective;
+    exports.EMPTY_DATATABLE_PREFERENCES = EMPTY_DATATABLE_PREFERENCES;
     exports.THESEAM_DATATABLE = THESEAM_DATATABLE;
     exports.THESEAM_DATATABLE_PREFERENCES_ACCESSOR = THESEAM_DATATABLE_PREFERENCES_ACCESSOR;
     exports.THESEAM_MENUBAR_ITEM_DATA = THESEAM_MENUBAR_ITEM_DATA;
@@ -2282,11 +3211,12 @@
     exports._THESEAM_DATATABLE = _THESEAM_DATATABLE;
     exports._THESEAM_DATATABLE_ACCESSOR = _THESEAM_DATATABLE_ACCESSOR;
     exports._THESEAM_DATA_FILTER_CONTAINER = _THESEAM_DATA_FILTER_CONTAINER;
-    exports._setColumnDefaults = _setColumnDefaults;
     exports.withStoredColumnInfo = withStoredColumnInfo;
-    exports.ɵa = THESEAM_DATATABLE_ACCESSOR;
+    exports["ɵa"] = THESEAM_DATATABLE_ACCESSOR;
+    exports["ɵb"] = ColumnsManagerService;
+    exports["ɵc"] = ColumnsAlterationsManagerService;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 
-})));
+}));
 //# sourceMappingURL=theseam-ui-common-datatable.umd.js.map