@theseam/ui-common 0.2.12 → 0.2.13

package/fesm2015/theseam-ui-common-datatable.js

@@ -1,16 +1,16 @@
-import { __decorate } from 'tslib';
+import { __awaiter, __decorate } from 'tslib';
 import { trigger, transition, style, animate } from '@angular/animations';
 import { coerceArray } from '@angular/cdk/coercion';
-import * as i0 from '@angular/core';
-import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, Directive, TemplateRef, Injectable, ContentChild, Self, Inject, forwardRef, InjectionToken, isDevMode, Optional, KeyValueDiffers, ViewChild, ElementRef, HostBinding, ViewContainerRef, HostListener, NgZone, NgModule } from '@angular/core';
-import { BehaviorSubject, of, Subject, Subscription, isObservable, combineLatest } from 'rxjs';
-import { switchMap, map, startWith, shareReplay, take, tap, concatMap, takeUntil, catchError } from 'rxjs/operators';
 import { DataSource, isDataSource } from '@angular/cdk/collections';
+import * as i0 from '@angular/core';
+import { EventEmitter, Component, ChangeDetectionStrategy, Input, Output, ContentChildren, Directive, TemplateRef, Injectable, ContentChild, Self, Inject, forwardRef, KeyValueDiffers, InjectionToken, isDevMode, Optional, ViewChild, ElementRef, HostListener, HostBinding, ViewContainerRef, NgZone, NgModule } from '@angular/core';
+import { Subject, BehaviorSubject, of, defer, combineLatest, EMPTY, Subscription, from, isObservable } from 'rxjs';
+import { switchMap, map, startWith, auditTime, shareReplay, tap, take, distinctUntilChanged, takeUntil, concatMap, catchError } from 'rxjs/operators';
 import { faEllipsisH, faChevronDown, faChevronRight, faSpinner, faColumns, faFileDownload } from '@fortawesome/free-solid-svg-icons';
-import { setColumnDefaults, ColumnMode, SortType, translateTemplates, DatatableComponent as DatatableComponent$1, DatatableRowDetailDirective, NgxDatatableModule, ScrollbarHelper } from '@marklb/ngx-datatable';
+import { camelCase, setColumnDefaults as setColumnDefaults$1, translateTemplates, SelectionType, SortType, ColumnMode, DatatableComponent as DatatableComponent$1, DatatableRowDetailDirective, NgxDatatableModule, ScrollbarHelper } from '@marklb/ngx-datatable';
 import { InputBoolean, InputNumber } from '@theseam/ui-common/core';
 import { THESEAM_DATA_FILTER, THESEAM_DATA_FILTER_CONTAINER, composeDataFilterStates, composeDataFilters } from '@theseam/ui-common/data-filters';
-import { notNullOrUndefined, hasProperty, observeControlValue } from '@theseam/ui-common/utils';
+import { notNullOrUndefined, hasProperty, arrayMoveMutable, waitOnConditionAsync, observeControlValue } from '@theseam/ui-common/utils';
 import { Router, RouterModule } from '@angular/router';
 import { SeamConfirmDialogService, TheSeamConfirmDialogModule } from '@theseam/ui-common/confirm-dialog';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -36,45 +36,6 @@ import { TheSeamPopoverModule } from '@theseam/ui-common/popover';
 import { TheSeamSharedModule } from '@theseam/ui-common/shared';
 import { TheSeamTableCellTypeModule } from '@theseam/ui-common/table-cell-type';
 
-class DatatableDataSource extends DataSource {
-    constructor() {
-        super();
-        this._datatableSubject = new BehaviorSubject(undefined);
-        this.sorts$ = this._datatableSubject.pipe(switchMap(_datatable => {
-            if (!_datatable) {
-                return of([]);
-            }
-            return _datatable.sort.pipe(map(v => v.sorts), startWith(_datatable.sorts));
-        }));
-        this.filterStates$ = this._datatableSubject.pipe(switchMap(_datatable => {
-            if (!_datatable) {
-                return of([]);
-            }
-            return _datatable.filterStates;
-        }));
-        this.page$ = this._datatableSubject.pipe(switchMap(_datatable => {
-            if (!_datatable) {
-                return of({
-                    offset: 0,
-                    pageSize: 0,
-                    limit: undefined,
-                    count: 0
-                });
-            }
-            return _datatable.page.pipe(startWith(_datatable.pageInfo));
-        }));
-    }
-    // connect(): Observable<readonly TRow[]> {
-    //   return this.
-    // }
-    // disconnect(): void {
-    //   throw new Error('Method not implemented.')
-    // }
-    setDatatableAccessor(accessor) {
-        this._datatableSubject.next(accessor);
-    }
-}
-
 class DatatableActionMenuItemComponent {
     constructor() {
         this.click = new EventEmitter();
@@ -189,7 +150,7 @@ DatatableActionMenuComponent.decorators = [
     { type: 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 = () => [
@@ -401,7 +362,7 @@ DatatableMenuBarComponent.decorators = [
                 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 = () => [];
@@ -504,34 +465,368 @@ DatatableRowActionItemDirective.ctorParameters = () => [
     { type: TemplateRef }
 ];
 
-const THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new InjectionToken('ITheSeamDatatablePreferencesAccessor');
+class DatatableDataSource extends DataSource {
+    constructor() {
+        super();
+        this._datatableSubject = new BehaviorSubject(undefined);
+        this.sorts$ = this._datatableSubject.pipe(switchMap(_datatable => {
+            if (!_datatable) {
+                return of([]);
+            }
+            return _datatable.sort.pipe(map(v => v.sorts), startWith(_datatable.sorts));
+        }));
+        this.filterStates$ = this._datatableSubject.pipe(switchMap(_datatable => {
+            if (!_datatable) {
+                return of([]);
+            }
+            return _datatable.filterStates;
+        }));
+        this.page$ = this._datatableSubject.pipe(switchMap(_datatable => {
+            if (!_datatable) {
+                return of({
+                    offset: 0,
+                    pageSize: 0,
+                    limit: undefined,
+                    count: 0
+                });
+            }
+            return _datatable.page.pipe(startWith(_datatable.pageInfo));
+        }));
+    }
+    // connect(): Observable<readonly TRow[]> {
+    //   return this.
+    // }
+    // disconnect(): void {
+    //   throw new Error('Method not implemented.')
+    // }
+    setDatatableAccessor(accessor) {
+        this._datatableSubject.next(accessor);
+    }
+}
+
+const 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,
+        headerTemplate,
+    };
+}
 
-function withStoredColumnInfo(columns, preferenceColumns) {
-    const _columns = [];
-    for (const col of columns) {
-        const storedCol = preferenceColumns.find(v => v.prop === col.prop);
-        if (storedCol) {
-            const _col = Object.assign({}, col);
-            if (hasProperty(storedCol, 'width')) {
-                _col.width = Math.max(storedCol.width, 0);
+const 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 (!notNullOrUndefined(col.prop) && col.name) {
+        return camelCase(col.name);
+    }
+    return col.prop === null ? undefined : col.prop;
+}
+
+function setColumnDefaults(columns) {
+    for (const column of columns) {
+        if (!column.hasOwnProperty('hidden')) {
+            column.hidden = false;
+        }
+    }
+    setColumnDefaults$1(columns);
+}
+
+// TODO: Replace with a `translateTemplates` function that fits the
+// wrapper component better.
+function translateTemplateColumns(v) {
+    const cols = translateTemplates(v);
+    for (const col of cols) {
+        col.prop = getColumnProp(col);
+    }
+    return cols;
+}
+
+var ColumnsTypes;
+(function (ColumnsTypes) {
+    ColumnsTypes[ColumnsTypes["Input"] = 0] = "Input";
+    ColumnsTypes[ColumnsTypes["Template"] = 1] = "Template";
+    ColumnsTypes[ColumnsTypes["Result"] = 2] = "Result";
+})(ColumnsTypes || (ColumnsTypes = {}));
+class ColumnsManagerService {
+    constructor(_differs, _columnChangesService) {
+        this._differs = _differs;
+        this._columnChangesService = _columnChangesService;
+        this._updateColumns = new Subject();
+        this._inputColumns = new BehaviorSubject([]);
+        this._templateColumns = new BehaviorSubject([]);
+        this._inpColDiffersMap = new Map();
+        this._tplColDiffersMap = new Map();
+        this._resultColDiffersMap = new Map();
+        const templateColumns$ = this._columnChangesService.columnInputChanges$.pipe(startWith(undefined), switchMap(() => {
+            return this._templateColumns.asObservable().pipe(map(translateTemplateColumns));
+        }));
+        this.columns$ = defer(() => {
+            let isFirst = true;
+            return combineLatest([
+                this._inputColumns.asObservable(),
+                templateColumns$,
+                this._updateColumns.asObservable().pipe(auditTime(0), startWith(undefined))
+            ]).pipe(switchMap(([inputColumns, templateColumns]) => {
+                const cols = this._mergeColumns(inputColumns, templateColumns);
+                const hasColumnsChanged = this._hasColumnsChanged(cols);
+                // TODO: Look for columns added/removed and remove the removed columns
+                // differs, not just changes to columns.
+                const 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 of(cols);
+                }
+                return EMPTY;
+            }));
+        }).pipe(shareReplay({ refCount: true, bufferSize: 1 }));
+    }
+    setInputColumns(columns) {
+        this._inputColumns.next(columns);
+    }
+    setTemplateColumns(columns) {
+        this._templateColumns.next(columns);
+    }
+    setInternalColumnsGetter(getter) {
+        this._internalColumnsGetter = getter || undefined;
+        this._updateColumns.next(undefined);
+    }
+    setSelectionType(selectionType) {
+        const changed = this._selectionType !== selectionType;
+        this._selectionType = selectionType;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    getSelectionType() {
+        return this._selectionType;
+    }
+    setRowActionItem(rowActionItem) {
+        const changed = this._rowActionItem !== rowActionItem;
+        this._rowActionItem = rowActionItem;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    setActionMenuCellTpl(actionMenuCellTpl) {
+        const changed = this._actionMenuCellTpl !== actionMenuCellTpl;
+        this._actionMenuCellTpl = actionMenuCellTpl;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    setBlankHeaderTpl(blankHeaderTpl) {
+        const changed = this._blankHeaderTpl !== blankHeaderTpl;
+        this._blankHeaderTpl = blankHeaderTpl;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    setTreeToggleTpl(treeToggleTpl) {
+        const changed = this._treeToggleTpl !== treeToggleTpl;
+        this._treeToggleTpl = treeToggleTpl;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    setHeaderTpl(headerTpl) {
+        const changed = this._headerTpl !== headerTpl;
+        this._headerTpl = headerTpl;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    setCellTypeSelectorTpl(cellTypeSelectorTpl) {
+        const changed = this._cellTypeSelectorTpl !== cellTypeSelectorTpl;
+        this._cellTypeSelectorTpl = cellTypeSelectorTpl;
+        if (changed) {
+            this._updateColumns.next(undefined);
+        }
+    }
+    _mergeColumns(inputColumns, templateColumns) {
+        const cols = [];
+        // Add the first column checkbox if 'checkbox' selection is enabled.
+        if (this._shouldAddCheckboxColumn()) {
+            cols.push(createCheckboxColumn());
+        }
+        // Column needs to be provided in the inputColumns, so iterate the
+        // inputColumns.
+        for (const inpCol of inputColumns) {
+            const prop = getColumnProp(inpCol);
+            if (!notNullOrUndefined(prop)) {
+                throw Error(`Column may have 'prop' or 'name' defined.`);
             }
-            _col.canAutoResize = storedCol.canAutoResize;
-            _columns.push(_col);
+            const internalCol = this._getInternalColumn(prop);
+            const inpColDif = this._getColDif(inpCol, ColumnsTypes.Input);
+            if (notNullOrUndefined(inpColDif)) {
+                this._updateColDif(inpColDif, internalCol, inpCol);
+            }
+            const tplCol = this._findColumnByProp(prop, templateColumns);
+            if (tplCol !== undefined) {
+                const tplColDif = this._getColDif(tplCol, ColumnsTypes.Template);
+                if (notNullOrUndefined(tplColDif)) {
+                    this._updateColDif(tplColDif, internalCol, tplCol);
+                }
+            }
+            const _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);
         }
-        else {
-            _columns.push(col);
+        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;
     }
-    return _columns;
-}
+    _getInternalColumns() {
+        if (this._internalColumnsGetter === undefined) {
+            return undefined;
+        }
+        return this._internalColumnsGetter();
+    }
+    _getInternalColumn(prop) {
+        const internalCols = this._getInternalColumns();
+        if (internalCols === undefined) {
+            return undefined;
+        }
+        return internalCols.find(c => getColumnProp(c) === prop);
+    }
+    _findColumnByProp(prop, columns) {
+        return columns.find(c => getColumnProp(c) === prop);
+    }
+    _getDifMapForColumnsType(columnsType) {
+        switch (columnsType) {
+            case ColumnsTypes.Input: return this._inpColDiffersMap;
+            case ColumnsTypes.Template: return this._tplColDiffersMap;
+            case ColumnsTypes.Result: return this._resultColDiffersMap;
+        }
+    }
+    _getColumnDiffer(prop, colsType) {
+        const difMap = this._getDifMapForColumnsType(colsType);
+        if (difMap === null) {
+            throw Error(`Invalid columns type.`);
+        }
+        if (!difMap.has(prop)) {
+            difMap.set(prop, this._differs.find({}).create());
+        }
+        const differ = difMap.get(prop);
+        if (differ === undefined) {
+            throw Error(`Differ not found. New differ should have been created.`);
+        }
+        return differ;
+    }
+    _getColDif(col, colsType) {
+        const prop = getColumnProp(col);
+        if (prop === undefined) {
+            throw Error(`Column prop not found.`);
+        }
+        return this._getColumnDiffer(prop, colsType).diff(col);
+    }
+    _updateColDif(colDif, internalColumn, col) {
+        colDif.forEachRemovedItem(r => {
+            if (internalColumn && internalColumn.hasOwnProperty(r.key)) {
+                const k = r.key;
+                delete internalColumn[k];
+            }
+        });
+        colDif.forEachAddedItem(r => col[r.key] = r.currentValue);
+        colDif.forEachChangedItem(r => col[r.key] = r.currentValue);
+    }
+    _hasAddedOrRemovedColumns(columns) {
+        if (!this._colPropsDiffer) {
+            this._colPropsDiffer = this._differs.find([]).create();
+        }
+        const props = columns.map(c => getColumnProp(c));
+        return this._colPropsDiffer.diff(props) !== null;
+    }
+    _hasColumnsChanged(columns) {
+        let colChanged = false;
+        for (const col of columns) {
+            const resultDif = this._getColDif(col, ColumnsTypes.Result);
+            if (resultDif) {
+                // NOTE: Can't return early, because the differs need to be updated.
+                colChanged = true;
+            }
+        }
+        return colChanged;
+    }
+    _shouldAddCheckboxColumn() {
+        return this._selectionType === SelectionType.checkbox;
+    }
+    _shouldAddRowActionColumn() {
+        return this._rowActionItem !== undefined;
+    }
+    _shouldAddTreeToggleColumn(column) {
+        return column.isTreeColumn !== undefined && column.isTreeColumn &&
+            (!hasProperty(column, 'treeToggleTemplate') || !notNullOrUndefined(column.treeToggleTemplate));
+    }
+    _shouldAddHeaderTemplate(column) {
+        return !hasProperty(column, 'headerTemplate');
+    }
+    _shouldAddCellTypeSelectorTpl(column) {
+        return hasProperty(column, 'cellType');
+    }
+}
+ColumnsManagerService.decorators = [
+    { type: Injectable }
+];
+ColumnsManagerService.ctorParameters = () => [
+    { type: KeyValueDiffers },
+    { type: DatatableColumnChangesService }
+];
 
+const CURRENT_DATATABLE_PREFERENCES_VERSION = 2;
+const EMPTY_DATATABLE_PREFERENCES = {
+    version: 2,
+    alterations: []
+};
+
+const THESEAM_DATATABLE_PREFERENCES_ACCESSOR = new InjectionToken('TheSeamDatatablePreferencesAccessor');
+
+// TODO: Add per key status
 class DatatablePreferencesService {
     constructor(_prefsAccessor) {
         this._prefsAccessor = _prefsAccessor;
         this._tablePrefsMap = new Map();
         this._pending = false;
+        this._loaded = false;
     }
     get pending() { return this._pending; }
+    get loaded() { return this._loaded; }
     preferences(preferenceKey) {
         let prefs = this._tablePrefsMap.get(preferenceKey);
         if (!prefs) {
@@ -546,16 +841,17 @@ class DatatablePreferencesService {
     }
     _createObservable(refreshSubject, prefKey) {
         if (!this._prefsAccessor) {
-            return of({});
+            return of(EMPTY_DATATABLE_PREFERENCES);
         }
-        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of('{}');
-        return refreshSubject.pipe(startWith({}), switchMap(() => accessor(prefKey).pipe(map(v => {
+        const accessor = (key) => this._prefsAccessor ? this._prefsAccessor.get(key) : of(JSON.stringify(EMPTY_DATATABLE_PREFERENCES));
+        return refreshSubject.pipe(startWith(undefined), switchMap(() => accessor(prefKey).pipe(map(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 (isDevMode()) {
@@ -563,7 +859,12 @@ class DatatablePreferencesService {
                 }
                 return null;
             }
-        }), map(v => !!v ? v : {}))), shareReplay(1));
+        }), map(v => notNullOrUndefined(v) ? v : EMPTY_DATATABLE_PREFERENCES), 
+        // tap(v => console.log('preferences$', v)),
+        tap(() => {
+            this._pending = false;
+            this._loaded = true;
+        }))), shareReplay({ bufferSize: 1, refCount: true }));
     }
     refresh(preferenceKey) {
         const prefs = this._tablePrefsMap.get(preferenceKey);
@@ -579,7 +880,40 @@ class DatatablePreferencesService {
     // 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.
-    setColumnPreference(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()
+    // }
+    setAlterations(preferenceKey, alterations) {
         if (!this._prefsAccessor) {
             return;
         }
@@ -587,25 +921,20 @@ class DatatablePreferencesService {
         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) => 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(Object.assign({}, column));
-            }
-            const newPrefs = Object.assign(Object.assign({}, prefs), { columns });
+            // 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
+            const newPrefs = Object.assign(Object.assign({}, EMPTY_DATATABLE_PREFERENCES), { alterations });
             return newPrefs;
         }), 
         // tap(v => console.log('newPrefs', v)),
@@ -614,10 +943,19 @@ class DatatablePreferencesService {
             : of(newPrefs)), tap(() => this.refresh(preferenceKey)))
             .subscribe();
     }
-    withColumnPreferences(preferenceKey, columns) {
-        return this.preferences(preferenceKey).pipe(startWith({}), map(preferences => preferences && preferences.columns
-            ? withStoredColumnInfo(columns, preferences.columns)
-            : columns));
+    // 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
+    //     )
+    //   )
+    // }
+    _descerializePreferences(serialized) {
+        const prefs = JSON.parse(serialized);
+        // TODO: Implement migration
+        return prefs;
     }
 }
 DatatablePreferencesService.ɵprov = i0.ɵɵdefineInjectable({ factory: function DatatablePreferencesService_Factory() { return new DatatablePreferencesService(i0.ɵɵinject(THESEAM_DATATABLE_PREFERENCES_ACCESSOR, 8)); }, token: DatatablePreferencesService, providedIn: "root" });
@@ -632,14 +970,406 @@ DatatablePreferencesService.ctorParameters = () => [
 
 const THESEAM_DATATABLE_ACCESSOR = new InjectionToken('TheSeamDatatableAccessor');
 
-function _setColumnDefaults(columns) {
-    for (const column of columns) {
-        if (!column.hasOwnProperty('hidden')) {
-            column.hidden = false;
+function removeUnusedDiffs(cols, colDiffersInp, colDiffersTpl) {
+    const inpKeys = Object.keys(colDiffersInp);
+    inpKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
+        .forEach(k => { delete colDiffersInp[k]; });
+    const tplKeys = Object.keys(colDiffersTpl);
+    tplKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
+        .forEach(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.
+ */
+class ColumnsAlteration {
+    constructor(
+    /**
+     * 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;
+    }
+    toJSON() {
+        return {
+            id: this.id,
+            type: this.type,
+            state: this.state
+        };
+    }
+}
+
+class HideColumnColumnsAlteration extends ColumnsAlteration {
+    constructor(state, persistent) {
+        super(state, persistent);
+        this.type = 'hide-column';
+        if (!this._isValidState(state)) {
+            throw Error(`Invalid state: ${JSON.stringify(state)}`);
         }
+        this.id = `${this.type}--${state.columnProp}`;
+    }
+    apply(columns, datatable) {
+        for (const col of columns) {
+            const prop = getColumnProp(col);
+            if (prop === this.state.columnProp) {
+                col.hidden = this.state.hidden;
+            }
+        }
+    }
+    _isValidState(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 (!notNullOrUndefined(state.columnProp)) {
+            return false;
+        }
+        // TODO: Remove when state validation/migration is implemented to happen
+        // when retrieved from storage.
+        if (!notNullOrUndefined(state.hidden)) {
+            return false;
+        }
+        return true;
+    }
+}
+
+class SortColumnsAlteration extends ColumnsAlteration {
+    constructor(state, persistent) {
+        super(state, persistent);
+        this.type = 'sort';
+        if (!this._isValidState(state)) {
+            throw Error(`Invalid state: ${JSON.stringify(state)}`);
+        }
+        this.id = `${this.type}`;
+    }
+    apply(columns, datatable) {
+        if (datatable.sortType === SortType.single) {
+            datatable.sorts = this.state.sorts.length > 0 ? [this.state.sorts[0]] : [];
+        }
+        else {
+            datatable.sorts = this.state.sorts;
+        }
+    }
+    _isValidState(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 (!notNullOrUndefined(state.sorts)) {
+            return false;
+        }
+        return true;
+    }
+}
+
+class WidthColumnsAlteration extends ColumnsAlteration {
+    constructor(state, persistent) {
+        super(state, persistent);
+        this.type = 'width';
+        if (!this._isValidState(state)) {
+            throw Error(`Invalid state: ${JSON.stringify(state)}`);
+        }
+        this.id = `${this.type}--${state.columnProp}`;
+    }
+    apply(columns, datatable) {
+        for (const col of columns) {
+            const prop = getColumnProp(col);
+            if (prop === this.state.columnProp) {
+                col.canAutoResize = this.state.canAutoResize;
+                if (notNullOrUndefined(this.state.width)) {
+                    col.width = this.state.width;
+                }
+            }
+        }
+    }
+    _isValidState(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 (!notNullOrUndefined(state.columnProp)) {
+            return false;
+        }
+        // TODO: Remove when state validation/migration is implemented to happen
+        // when retrieved from storage.
+        if (!notNullOrUndefined(state.canAutoResize)) {
+            return false;
+        }
+        return true;
+    }
+}
+
+class ColumnsAlterationsManagerService {
+    constructor() {
+        this._changesSubject = new Subject();
+        this._alterations = [];
+        this.changes = this._changesSubject.asObservable();
+    }
+    get() {
+        return [...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.
+     */
+    add(alterations, options) {
+        // console.log('add', alterations)
+        const removed = this.remove(alterations, { emitEvent: false });
+        this._alterations = [...this._alterations, ...alterations];
+        const changes = [
+            ...removed,
+            ...alterations.map(a => {
+                const record = {
+                    type: 'added',
+                    alteration: a
+                };
+                return record;
+            })
+        ];
+        if (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;
+    }
+    remove(alterations, options) {
+        // console.log('remove', alterations)
+        const removed = [];
+        this._alterations = this._alterations.filter(x => {
+            const found = alterations.findIndex(y => y.id === x.id) !== -1;
+            if (found) {
+                const eventRecord = {
+                    type: 'removed',
+                    alteration: x
+                };
+                removed.push(eventRecord);
+            }
+            return !found;
+        });
+        // console.log('removed', removed, this._alterations)
+        if (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;
+    }
+    apply(columns, datatable) {
+        for (const a of this._alterations) {
+            a.apply(columns, datatable);
+        }
+        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.
+    clear(options) {
+        const changes = [];
+        for (const colAlt of this._alterations) {
+            switch (colAlt.type) {
+                case 'hide-column': {
+                    const alteration = new HideColumnColumnsAlteration({ columnProp: colAlt.state.columnProp, hidden: false }, false);
+                    changes.push(...this.add([alteration]));
+                    break;
+                }
+                case 'order': {
+                    changes.push(...this.remove([colAlt]));
+                    break;
+                }
+                case 'sort': {
+                    const alteration = new SortColumnsAlteration({ sorts: [] }, false);
+                    changes.push(...this.add([alteration]));
+                    break;
+                }
+                case 'width': {
+                    const alteration = new WidthColumnsAlteration({ columnProp: colAlt.state.columnProp, canAutoResize: true }, false);
+                    changes.push(...this.add([alteration]));
+                    break;
+                }
+            }
+        }
+        if (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;
+    }
+    _removeNonPersistant() {
+        const nonPersistent = this._alterations.filter(x => !x.persistent);
+        this.remove(nonPersistent, { emitEvent: false });
+    }
+    _emitChanges(changes) {
+        if (changes.length === 0) {
+            return;
+        }
+        const event = {
+            changes
+        };
+        this._changesSubject.next(event);
     }
-    setColumnDefaults(columns);
 }
+ColumnsAlterationsManagerService.decorators = [
+    { type: Injectable }
+];
+ColumnsAlterationsManagerService.ctorParameters = () => [];
+
+/**
+ * Strings used for columns created and managed
+ * by the datatable.
+ */
+const INTERNAL_COLUMN_PROPS = [
+    ACTION_MENU_COLUMN_PROP,
+    CHECKBOX_COLUMN_PROP
+];
+function isInternalColumn(column) {
+    return INTERNAL_COLUMN_PROPS.findIndex(p => getColumnProp(column) === p) !== -1;
+}
+
+class OrderColumnsAlteration extends ColumnsAlteration {
+    constructor(state, persistent) {
+        super(state, persistent);
+        this.type = 'order';
+        if (!this._isValidState(state)) {
+            throw Error(`Invalid state: ${JSON.stringify(state)}`);
+        }
+        this.id = `${this.type}`;
+    }
+    apply(columns, datatable) {
+        if (this.state.columns.length === 0) {
+            return;
+        }
+        const 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.
+        const internalColumns = columns
+            .filter(c => isInternalColumn(c))
+            .map((column, index) => ({ column, index }));
+        for (const c of stateColumns) {
+            const currentIndex = columns.findIndex(x => getColumnProp(x) === c.columnProp);
+            if (currentIndex === c.index || currentIndex === -1) {
+                // Skip if already at correct index.
+                // Skip columns not found. It may be a column that was removed from the
+                // table, but we still want to handle the other columns.
+                continue;
+            }
+            arrayMoveMutable(columns, currentIndex, c.index);
+        }
+        for (const c of internalColumns) {
+            const currentIndex = columns.findIndex(col => col === c.column);
+            if (currentIndex !== -1) {
+                arrayMoveMutable(columns, currentIndex, c.index);
+            }
+            else {
+                if (isDevMode()) {
+                    console.warn(`Internal column could not be found after sorting. Was it lost during the sorting?`);
+                }
+            }
+        }
+    }
+    _isValidState(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 (!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;
+    }
+    _isColumnOrderRecordValid(columnOrder) {
+        return notNullOrUndefined(columnOrder.columnProp) && notNullOrUndefined(columnOrder.index);
+    }
+    _stateColumns() {
+        return this.state.columns.filter(c => {
+            if (!this._isColumnOrderRecordValid(c)) {
+                if (isDevMode()) {
+                    console.warn('Invalid column order record', c);
+                }
+                return false;
+            }
+            return true;
+        }).sort((a, b) => a.index === b.index ? 0 : a.index > b.index ? 1 : -1);
+    }
+}
+
+function mapColumnsAlterationsStates(states) {
+    const alterations = [];
+    for (const state of states) {
+        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 (isDevMode()) {
+                        console.warn('Unrecognized ColumnsAlteration state', state);
+                    }
+                }
+            }
+        }
+        catch (e) {
+            if (isDevMode()) {
+                console.warn('Unable to map ColumnsAlteration state', state);
+                console.warn(e);
+            }
+        }
+    }
+    return alterations;
+}
+
 /**
  * Intended for internal classes declared by the `TheSeamDatatableModule`.
  */
@@ -654,25 +1384,19 @@ const _THESEAM_DATATABLE_ACCESSOR = {
     // tslint:disable-next-line:no-use-before-declare
     useExisting: forwardRef(() => DatatableComponent)
 };
-// TODO: Reduce reliance on BehaviorSubject based observables, because it should
-// be easier to avoit over emitting observables.
 class DatatableComponent {
-    constructor(_columnChangesService, _differs, _preferences) {
-        // 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;
+    constructor(_preferences, _columnsManager, _columnsAlterationsManager) {
         this._preferences = _preferences;
-        this.faChevronDown = faChevronDown;
-        this.faChevronRight = faChevronRight;
-        this.faSpinner = faSpinner;
+        this._columnsManager = _columnsManager;
+        this._columnsAlterationsManager = _columnsAlterationsManager;
+        this._faChevronDown = faChevronDown;
+        this._faChevronRight = faChevronRight;
+        this._faSpinner = faSpinner;
         this._ngUnsubscribe = new Subject();
         this._filtersSubject = new BehaviorSubject([]);
-        this._columnsObservable = new BehaviorSubject(undefined);
         this._dataSourceSubject = new BehaviorSubject(undefined);
+        this._resizing = {};
         this._preferencesKey = new BehaviorSubject(undefined);
-        this._columns = new BehaviorSubject([]);
         this._rows = new BehaviorSubject([]);
         this.columnMode = ColumnMode.force;
         this.selected = [];
@@ -684,7 +1408,7 @@ class DatatableComponent {
         this.loadingIndicator = false;
         this.reorderable = true;
         this.swapColumns = false;
-        this.sortType = SortType.single;
+        this._sortType = SortType.single;
         this._sorts = [];
         this.cssClasses = {
             sortAscending: 'datatable-icon-up',
@@ -729,27 +1453,43 @@ class DatatableComponent {
         this._colDiffersInp = {};
         this._colDiffersTpl = {};
         this._rowDetailToggleSubscription = Subscription.EMPTY;
-        const applyPrefs = (cols) => this._preferencesKey.pipe(switchMap(name => !!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)
-                : of(cols)
-            : of(cols)));
-        this.columns$ = this._columnsObservable.pipe(switchMap(colsObs => colsObs !== null && colsObs !== void 0 ? colsObs : of([])));
-        this.displayColumns$ = this.columns$.pipe(map(cols => cols.filter(c => !c.hidden)), tap(v => this._removeUnusedDiffs(v)), switchMap(cols => applyPrefs(cols)));
+        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(key => {
+            if (!notNullOrUndefined(key) || key.length === 0) {
+                return of(undefined);
+            }
+            return from(waitOnConditionAsync(() => this._preferences.loaded)).pipe(switchMap(() => this._columnsAlterationsManager.changes.pipe(startWith(undefined), tap(() => {
+                this._preferences.setAlterations(key, this._columnsAlterationsManager.get());
+            }))));
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        const applyPrefs = (cols) => this._columnsAlterationsManager.changes.pipe(startWith(undefined), map(() => {
+            this._columnsAlterationsManager.apply(cols, this);
+            return cols;
+        }));
+        this._preferencesKey.pipe(distinctUntilChanged(), switchMap(prefsKey => {
+            if (!notNullOrUndefined(prefsKey)) {
+                return of(undefined);
+            }
+            return this._preferences.preferences(prefsKey).pipe(switchMap((preferences) => __awaiter(this, void 0, void 0, function* () {
+                yield waitOnConditionAsync(() => this._preferences.loaded);
+                return preferences;
+            })), take(1), map(preferences => {
+                let alterations = [];
+                try {
+                    alterations = mapColumnsAlterationsStates(preferences.alterations);
+                }
+                catch (e) {
+                    if (isDevMode()) {
+                        console.warn('Unable to map columns alterations states');
+                        console.warn(e);
+                    }
+                }
+                this._columnsAlterationsManager.add(alterations);
+            }));
+        }), takeUntil(this._ngUnsubscribe)).subscribe();
+        this.columns$ = this._columnsManager.columns$;
+        this.displayColumns$ = this.columns$.pipe(switchMap(cols => applyPrefs(cols)), map(cols => cols.filter(c => !c.hidden)), tap(v => removeUnusedDiffs(v, this._colDiffersInp, this._colDiffersTpl)));
         this.filters$ = this._filtersSubject.asObservable();
         this.filterStates = this._filtersSubject.asObservable().pipe(switchMap(filters => 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(switchMap(dataSource => {
             // console.log('dataSource', dataSource)
             let dataStream;
@@ -785,34 +1525,35 @@ class DatatableComponent {
             // tap(v => console.log('stream', v)),
             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(map(p => ({ start: 0, end: p.count })));
     }
     get filters() { return this._filtersSubject.value; }
     get preferencesKey() { return this._preferencesKey.value; }
     set preferencesKey(value) { this._preferencesKey.next(value || undefined); }
-    get columns() { return this._columns.value; }
     set columns(value) {
-        // console.log('columns input', value)
-        this._columns.next(Array.isArray(value) ? value : []);
+        this._columnsManager.setInputColumns(Array.isArray(value) ? value : []);
     }
     get rows() { return this._rows.value; }
-    set rows(value) { this._rows.next(value || []); }
-    get sorts() { return this.ngxDatatable ? this.ngxDatatable.sorts : this._sorts; }
+    set rows(value) {
+        this._rows.next(value || []);
+    }
+    get selectionType() { return this._columnsManager.getSelectionType(); }
+    set selectionType(value) {
+        this._columnsManager.setSelectionType(notNullOrUndefined(value) ? value : undefined);
+    }
+    get sortType() { return this._sortType; }
+    set sortType(value) {
+        if (notNullOrUndefined(value) && (value === SortType.single || value == SortType.multi)) {
+            this._sortType = value;
+        }
+        else {
+            this._sortType = SortType.single;
+        }
+    }
+    get sorts() {
+        return this.ngxDatatable ? this.ngxDatatable.sorts : this._sorts;
+    }
     set sorts(value) {
         this._sorts = notNullOrUndefined(value) ? coerceArray(value) : [];
     }
@@ -822,6 +1563,15 @@ class DatatableComponent {
         }
         this._dataSourceSubject.next(value || undefined);
     }
+    set columnComponents(value) {
+        var _a;
+        this._columnsManager.setTemplateColumns(translateTemplateColumns((_a = value === null || value === void 0 ? void 0 : value.toArray()) !== null && _a !== void 0 ? _a : []));
+    }
+    get rowActionItem() { return this._rowActionItem; }
+    set rowActionItem(value) {
+        this._rowActionItem = value;
+        this._columnsManager.setRowActionItem(notNullOrUndefined(value) ? value : undefined);
+    }
     get menuBarComponent() { return this._menuBarComponent; }
     set menuBarComponent(value) {
         var _a;
@@ -834,6 +1584,54 @@ class DatatableComponent {
             this._menuBarSub = (_a = this._menuBarComponent) === null || _a === void 0 ? void 0 : _a.filtersChanged.subscribe(v => { this._setMenuBarFilters(value.filters()); });
         }
     }
+    get actionMenuCellTpl() { return this._actionMenuCellTpl; }
+    set actionMenuCellTpl(value) {
+        this._actionMenuCellTpl = value;
+        this._columnsManager.setActionMenuCellTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    get treeToggleTpl() { return this._treeToggleTpl; }
+    set treeToggleTpl(value) {
+        this._treeToggleTpl = value;
+        this._columnsManager.setTreeToggleTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    get headerTpl() { return this._headerTpl; }
+    set headerTpl(value) {
+        this._headerTpl = value;
+        this._columnsManager.setHeaderTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    get blankHeaderTpl() { return this._blankHeaderTpl; }
+    set blankHeaderTpl(value) {
+        this._blankHeaderTpl = value;
+        this._columnsManager.setBlankHeaderTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    get cellTypeSelectorTpl() { return this._cellTypeSelectorTpl; }
+    set cellTypeSelectorTpl(value) {
+        this._cellTypeSelectorTpl = value;
+        this._columnsManager.setCellTypeSelectorTpl(notNullOrUndefined(value) ? value : undefined);
+    }
+    // TODO: Remove this DOM-dependent code when a way to property listen for
+    // dblclick on the header reasize handles.
+    _dblClick(event) {
+        var _a, _b, _c;
+        const isHandle = event.target.classList.contains('resize-handle');
+        if (isHandle) {
+            const isResizeable = (_a = event.target.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains('resizeable');
+            if (isResizeable) {
+                event.stopPropagation();
+                const id = (_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(take(1)).subscribe(columns => {
+                    const column = columns.find(c => c.$$id === id);
+                    if (column) {
+                        const columnProp = getColumnProp(column);
+                        if (columnProp) {
+                            const alteration = new WidthColumnsAlteration({ columnProp, canAutoResize: true }, false);
+                            this._columnsAlterationsManager.add([alteration]);
+                        }
+                    }
+                });
+            }
+        }
+    }
     ngOnInit() {
         if (this.rowDetail) {
             this._rowDetailToggleSubscription = this.rowDetail._toggle.subscribe(event => {
@@ -846,131 +1644,7 @@ class DatatableComponent {
     ngOnDestroy() {
         this._rowDetailToggleSubscription.unsubscribe();
     }
-    ngAfterContentInit() {
-        var _a, _b;
-        this.columnComponents$ = this._columnChangesService.columnInputChanges$.pipe(map(() => { var _a, _b; return (_b = (_a = this.columnComponents) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : []; }), startWith((_b = (_a = this.columnComponents) === null || _a === void 0 ? void 0 : _a.toArray()) !== null && _b !== void 0 ? _b : []), shareReplay({ bufferSize: 1, refCount: true }));
-        const _columns = combineLatest([
-            this.columnComponents$,
-            this._columns
-        ]).pipe(map(v => { var _a; return this._getMergedTplAndInpColumns(v[0], (_a = v[1]) !== null && _a !== void 0 ? _a : []); }), 
-        // tap(v => console.log('cols', v)),
-        shareReplay({ bufferSize: 1, refCount: true }));
-        this._columnsObservable.next(_columns);
-    }
-    _getMergedTplAndInpColumns(tplCols, inpCols) {
-        const cols = [];
-        if (this.selectionType === 'checkbox') {
-            const checkBoxCol = {
-                prop: '$$__checkbox__',
-                name: '',
-                width: 40,
-                sortable: false,
-                canAutoResize: false,
-                draggable: false,
-                resizeable: false,
-                headerCheckboxable: true,
-                checkboxable: true
-            };
-            cols.push(checkBoxCol);
-        }
-        const _tplCols = translateTemplates((tplCols || []));
-        for (const col of inpCols) {
-            const tplCol = _tplCols.find(t => t.prop === col.prop);
-            // console.log({ col: { ...(col || {}) }, tplCol: { ...(tplCol || {}) } })
-            const dtColumns = (this.ngxDatatable && this.ngxDatatable._internalColumns) || [];
-            const prev = dtColumns.find(c => c.prop === col.prop);
-            const inpColDiff = this._getColDiff(col);
-            const _inpCol = inpColDiff ? {} : this._hasPrevColDiff(col) ? {} : col;
-            if (inpColDiff) {
-                inpColDiff.forEachRemovedItem(r => {
-                    if (prev && prev.hasOwnProperty(r.key)) {
-                        const k = r.key;
-                        delete prev[k];
-                    }
-                });
-                inpColDiff.forEachAddedItem(r => _inpCol[r.key] = r.currentValue);
-                inpColDiff.forEachChangedItem(r => _inpCol[r.key] = r.currentValue);
-            }
-            let _tplCol = {};
-            if (tplCol) {
-                const tplColDiff = tplCol ? this._getColDiff(tplCol, true) : undefined;
-                _tplCol = tplColDiff ? {} : this._hasPrevColDiff(col, true) ? {} : tplCol;
-                if (tplColDiff) {
-                    tplColDiff.forEachRemovedItem(r => {
-                        if (prev && prev.hasOwnProperty(r.key)) {
-                            const k = r.key;
-                            delete prev[k];
-                        }
-                    });
-                    tplColDiff.forEachAddedItem(r => _tplCol[r.key] = r.currentValue);
-                    tplColDiff.forEachChangedItem(r => _tplCol[r.key] = r.currentValue);
-                }
-            }
-            const _col = Object.assign(Object.assign(Object.assign({}, (prev || {})), _inpCol), _tplCol);
-            cols.push(_col);
-        }
-        if (this.rowActionItem) {
-            const 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);
-        }
-        for (const col of cols) {
-            if (col.isTreeColumn && hasProperty(col, 'treeToggleTemplate')) {
-                col.treeToggleTemplate = this.treeToggleTpl;
-            }
-            if (!hasProperty(col, 'headerTemplate')) {
-                col.headerTemplate = this.headerTpl;
-            }
-            if (hasProperty(col, 'cellType')) {
-                col.cellTemplate = this.cellTypeSelectorTpl;
-            }
-        }
-        // setColumnDefaults(cols)
-        _setColumnDefaults(cols);
-        // console.log(cols.map(c => ({ prop: c.prop, canAutoResize: c.canAutoResize })))
-        return cols;
-    }
-    _hasPrevColDiff(col, isTpl = false) {
-        if (!col || !col.prop) {
-            return false;
-        }
-        const differsMap = isTpl ? this._colDiffersTpl : this._colDiffersInp;
-        return !!differsMap;
-    }
-    _getColDiff(col, isTpl = false) {
-        if (!col || !col.prop) {
-            return;
-        }
-        const differsMap = isTpl ? this._colDiffersTpl : this._colDiffersInp;
-        if (!differsMap[col.prop]) {
-            differsMap[col.prop] = this._differs.find({}).create();
-        }
-        const differ = differsMap[col.prop];
-        const diff = differ.diff(col);
-        return diff;
-    }
-    _removeUnusedDiffs(cols) {
-        const inpKeys = Object.keys(this._colDiffersInp);
-        inpKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
-            .forEach(k => { delete this._colDiffersInp[k]; });
-        const tplKeys = Object.keys(this._colDiffersTpl);
-        tplKeys.filter(k => cols.findIndex(c => c.prop === k) === -1)
-            .forEach(k => { delete this._colDiffersTpl[k]; });
-    }
     _setMenuBarFilters(filters) {
-        // console.log('_setMenuBarFilters', filters)
         this._filtersSubject.next(filters || []);
     }
     getColumnComponent(propName) {
@@ -1004,21 +1678,51 @@ class DatatableComponent {
         }
     }
     _onResize(event) {
-        // console.log('resize', event, event.column.prop)
         this.resize.emit(event);
-        if (event.isDone && this.columns) {
-            const columns = this.columns;
-            const col = columns.find(c => c.prop === event.column.prop);
-            if (col) {
-                col.canAutoResize = false;
+        if (!notNullOrUndefined(event.column)) {
+            return;
+        }
+        const columnProp = getColumnProp(event.column);
+        if (columnProp) {
+            let addAlteration = false;
+            if (!this._resizing[columnProp]) {
+                this._resizing[columnProp] = true;
+                addAlteration = true;
+            }
+            if (event.isDone) {
+                this._resizing[columnProp] = false;
+                addAlteration = true;
             }
-            if (this.preferencesKey) {
-                const pref = { prop: event.column.prop, width: event.column.width, canAutoResize: false };
-                this._preferences.setColumnPreference(this.preferencesKey, pref);
+            if (addAlteration) {
+                const alteration = new WidthColumnsAlteration({
+                    columnProp,
+                    width: event.column.width,
+                    canAutoResize: false
+                }, true);
+                this._columnsAlterationsManager.add([alteration]);
             }
-            this.columns = [...this.columns];
         }
     }
+    _onReorder(event) {
+        this.reorder.emit(event);
+        const columnProp = getColumnProp(event.column);
+        if (columnProp) {
+            const currentOrderAlteration = this._columnsAlterationsManager.get().find(x => x.type === 'order');
+            const state = {
+                columns: [
+                    ...((currentOrderAlteration === null || currentOrderAlteration === void 0 ? void 0 : currentOrderAlteration.state.columns) || []),
+                    { columnProp, index: event.newValue }
+                ]
+            };
+            const alteration = new OrderColumnsAlteration(state, true);
+            this._columnsAlterationsManager.add([alteration]);
+        }
+    }
+    _onSort(event) {
+        this.sort.emit(event);
+        const alteration = new SortColumnsAlteration({ sorts: event.sorts }, true);
+        this._columnsAlterationsManager.add([alteration]);
+    }
     _onTreeAction(event) {
         const index = event.rowIndex;
         const row = event.row;
@@ -1033,6 +1737,9 @@ class DatatableComponent {
     triggerActionRefreshRequest() {
         this.actionRefreshRequest.emit(undefined);
     }
+    /**
+     * Returns the page info from the wrapped NgxDatatable instance or defaults.
+     */
     get pageInfo() {
         var _a, _b, _c, _d, _e, _f, _g;
         return {
@@ -1046,7 +1753,7 @@ class DatatableComponent {
 DatatableComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 animations: [
                     trigger('slideDown', [
@@ -1060,14 +1767,20 @@ DatatableComponent.decorators = [
                         ])
                     ])
                 ],
-                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 = () => [
-    { type: DatatableColumnChangesService },
-    { type: KeyValueDiffers },
-    { type: DatatablePreferencesService }
+    { type: DatatablePreferencesService },
+    { type: ColumnsManagerService },
+    { type: ColumnsAlterationsManagerService }
 ];
 DatatableComponent.propDecorators = {
     preferencesKey: [{ type: Input }],
@@ -1135,7 +1848,8 @@ DatatableComponent.propDecorators = {
     treeToggleTpl: [{ type: ViewChild, args: ['treeToggleTpl', { static: true },] }],
     headerTpl: [{ type: ViewChild, args: ['headerTpl', { static: true },] }],
     blankHeaderTpl: [{ type: ViewChild, args: ['blankHeaderTpl', { static: true },] }],
-    cellTypeSelectorTpl: [{ type: ViewChild, args: ['cellTypeSelectorTpl', { static: true },] }]
+    cellTypeSelectorTpl: [{ type: ViewChild, args: ['cellTypeSelectorTpl', { static: true },] }],
+    _dblClick: [{ type: HostListener, args: ['dblclick', ['$event'],] }]
 };
 __decorate([
     InputBoolean()
@@ -1196,60 +1910,112 @@ __decorate([
 ], DatatableComponent.prototype, "scrollbarH", void 0);
 
 class DatatableColumnPreferencesComponent {
-    constructor(_datatable) {
+    constructor(_datatable, _columnsAlterationsManager) {
         var _a;
         this._datatable = _datatable;
+        this._columnsAlterationsManager = _columnsAlterationsManager;
         this._filterControl = new FormControl();
+        this._alphabeticalColumnCompareFn = (a, b) => {
+            const aProp = getColumnProp(a);
+            const bProp = getColumnProp(b);
+            return aProp === bProp ? 0 : aProp > bProp ? 1 : -1;
+        };
         this._columns$ = combineLatest([
             (_a = this._datatable.columns$) !== null && _a !== void 0 ? _a : of([]),
             observeControlValue(this._filterControl)
         ]).pipe(map(([columns, filter]) => {
             const _filter = (filter || '').trim().toLowerCase();
-            return columns.filter(c => `${(c.name || c.prop || '')}`.toLowerCase().indexOf(_filter) !== -1);
-        }), map(cols => cols.sort((a, b) => a.prop === b.prop ? 0 : a.prop > b.prop ? 1 : -1)));
+            return columns
+                .filter(c => this._canToggleColumn(c, _filter))
+                .sort(this._alphabeticalColumnCompareFn);
+        }));
     }
-    ngOnInit() { }
-    _onChange(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.
-        const columns = this._datatable.columns || [];
-        const column = columns.find(c => c.prop === col.prop);
-        if (column) {
-            column.hidden = !event.checked;
-            this._datatable.columns = [...columns];
+    _canToggleColumn(column, filter, omitInternalColumns = true) {
+        if (omitInternalColumns && isInternalColumn(column)) {
+            return false;
         }
+        return this._columnMatchesFilter(column, filter);
     }
-    _onCloseClick() {
-        // TODO: Implement when PopoverRef is implemented.
+    _columnMatchesFilter(column, filter) {
+        if (filter.length === 0) {
+            return true;
+        }
+        return `${(getColumnProp(column) || '')}`.toLowerCase().indexOf(filter) !== -1;
+    }
+    _onChange(event, col) {
+        const columnProp = getColumnProp(col);
+        const hidden = !event.checked;
+        if (!notNullOrUndefined(columnProp)) {
+            throw Error(`Unable to get column prop.`);
+        }
+        const alteration = new HideColumnColumnsAlteration({
+            columnProp,
+            hidden
+        }, hidden);
+        this._columnsAlterationsManager.add([alteration]);
     }
 }
 DatatableColumnPreferencesComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:flex;flex-direction:column}"]
+                styles: [":host{display:flex;flex-direction:column}\n"]
             },] }
 ];
 DatatableColumnPreferencesComponent.ctorParameters = () => [
-    { type: DatatableComponent, decorators: [{ type: Inject, args: [THESEAM_DATATABLE,] }] }
+    { type: DatatableComponent, decorators: [{ type: Inject, args: [THESEAM_DATATABLE,] }] },
+    { type: ColumnsAlterationsManagerService }
 ];
 
 class DatatableColumnPreferencesButtonComponent {
-    constructor() {
+    constructor(_columnsAlterationsManager) {
+        this._columnsAlterationsManager = _columnsAlterationsManager;
         this.icon = 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',
+            },
+        ];
     }
     ngOnInit() { }
+    _resetColumns(event) {
+        this._columnsAlterationsManager.clear();
+    }
 }
 DatatableColumnPreferencesButtonComponent.decorators = [
     { type: 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: ChangeDetectionStrategy.OnPush,
                 styles: [""]
             },] }
 ];
-DatatableColumnPreferencesButtonComponent.ctorParameters = () => [];
+DatatableColumnPreferencesButtonComponent.ctorParameters = () => [
+    { type: ColumnsAlterationsManagerService }
+];
 
 class DatatableExportButtonComponent {
     constructor(_datatable, _toastr, _loading, _valueHelper, _data) {
@@ -1326,7 +2092,7 @@ DatatableExportButtonComponent.decorators = [
                 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: ChangeDetectionStrategy.OnPush,
-                styles: [":host{display:inline-block}"]
+                styles: [":host{display:inline-block}\n"]
             },] }
 ];
 DatatableExportButtonComponent.ctorParameters = () => [
@@ -1350,7 +2116,7 @@ DatatableMenuBarColumnCenterComponent.decorators = [
                 selector: 'seam-datatable-menu-bar-column-center',
                 template: "<ng-content></ng-content>\n",
                 changeDetection: 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 = () => [];
@@ -1365,7 +2131,7 @@ DatatableMenuBarColumnLeftComponent.decorators = [
                 selector: 'seam-datatable-menu-bar-column-left',
                 template: "<ng-content></ng-content>\n",
                 changeDetection: 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 = () => [];
@@ -1380,7 +2146,7 @@ DatatableMenuBarColumnRightComponent.decorators = [
                 selector: 'seam-datatable-menu-bar-column-right',
                 template: "<ng-content></ng-content>\n",
                 changeDetection: 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 = () => [];
@@ -1395,7 +2161,7 @@ DatatableMenuBarRowComponent.decorators = [
                 selector: 'seam-datatable-menu-bar-row',
                 template: "<ng-content></ng-content>\n",
                 changeDetection: 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 = () => [];
@@ -1658,6 +2424,25 @@ TheSeamDatatableScrollbarHelperService.ctorParameters = () => [
     { type: OverlayScrollbarsService }
 ];
 
+function withStoredColumnInfo(columns, preferenceColumns) {
+    const _columns = [];
+    for (const col of columns) {
+        const storedCol = preferenceColumns.find(v => v.prop === col.prop);
+        if (storedCol) {
+            const _col = Object.assign({}, col);
+            if (hasProperty(storedCol, 'width')) {
+                _col.width = Math.max(storedCol.width, 0);
+            }
+            _col.canAutoResize = storedCol.canAutoResize;
+            _columns.push(_col);
+        }
+        else {
+            _columns.push(col);
+        }
+    }
+    return _columns;
+}
+
 class TheSeamDatatableModule {
 }
 TheSeamDatatableModule.decorators = [
@@ -1745,5 +2530,5 @@ TheSeamDatatableModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, THESEAM_DATATABLE, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, _setColumnDefaults, withStoredColumnInfo, THESEAM_DATATABLE_ACCESSOR as ɵa };
+export { CURRENT_DATATABLE_PREFERENCES_VERSION, DatatableActionMenuComponent, DatatableActionMenuItemComponent, DatatableActionMenuItemDirective, DatatableActionMenuToggleDirective, DatatableCellTplDirective, DatatableColumnChangesService, DatatableColumnComponent, DatatableColumnPreferencesButtonComponent, DatatableColumnPreferencesComponent, DatatableComponent, DatatableDataSource, DatatableExportButtonComponent, DatatableFilterDirective, DatatableFooterTplDirective, DatatableGqlDataSource, DatatableMenuBarColumnCenterComponent, DatatableMenuBarColumnLeftComponent, DatatableMenuBarColumnRightComponent, DatatableMenuBarComponent, DatatableMenuBarRowComponent, DatatableMenuBarTextComponent, DatatablePreferencesService, DatatableRowActionItemDirective, DatatableRowDetailTplDirective, EMPTY_DATATABLE_PREFERENCES, THESEAM_DATATABLE, THESEAM_DATATABLE_PREFERENCES_ACCESSOR, THESEAM_MENUBAR_ITEM_DATA, TheSeamDatatableFooterDirective, TheSeamDatatableModule, TheSeamDatatableRowDetailDirective, TheSeamDatatableScrollbarHelperService, _THESEAM_DATATABLE, _THESEAM_DATATABLE_ACCESSOR, _THESEAM_DATA_FILTER_CONTAINER, withStoredColumnInfo, THESEAM_DATATABLE_ACCESSOR as ɵa, ColumnsManagerService as ɵb, ColumnsAlterationsManagerService as ɵc };
 //# sourceMappingURL=theseam-ui-common-datatable.js.map