@coolon/angular-ui-powerups 12.0.0 → 12.0.1

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', '@coolon/typescript-utilities', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.ResizeObserver, global.typescriptUtilities, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
-}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, ResizeObserver, typescriptUtilities, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('@coolon/typescript-utilities'), require('resize-observer-polyfill'), require('immer'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', '@coolon/typescript-utilities', 'resize-observer-polyfill', 'immer', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.src, global.typescriptStringEnums, global.typescriptUtilities, global.ResizeObserver, global.produce, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
+}(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, src, typescriptStringEnums, typescriptUtilities, ResizeObserver, produce, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -3197,247 +3197,6 @@
         return SelectionColumnModel;
     }(ColumnModel));
 
-    var EditSession = /** @class */ (function (_super) {
-        __extends(EditSession, _super);
-        function EditSession(rowId, row, form, saveCommand) {
-            var _this = _super.call(this) || this;
-            _this.rowId = rowId;
-            _this.form = form;
-            _this.saveCommand = saveCommand;
-            _this._liveRowValue = new pectin.MutableValueModel();
-            _this.liveRowValue = _this._liveRowValue.readonly;
-            _this.form.load(row);
-            _this._liveRowValue.value = row;
-            _this.form.onEdit(function () {
-                // if (!this._liveRowValue.value[immerable]) {
-                //   console.warn()
-                // }
-                _this._liveRowValue.value = produce__default['default'](_this._liveRowValue.value, function (draft) {
-                    _this.form.writeDirtyStateTo(draft);
-                });
-            });
-            return _this;
-        }
-        return EditSession;
-    }(pectin.GarbageCollector));
-
-    // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
-    // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
-    var RowClass = /** @class */ (function () {
-        function RowClass(className, matches) {
-            this.className = className;
-            this.matches = matches;
-        }
-        return RowClass;
-    }());
-    var VisibleColumnListModel = /** @class */ (function (_super) {
-        __extends(VisibleColumnListModel, _super);
-        function VisibleColumnListModel() {
-            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
-            _this.columns = [];
-            return _this;
-        }
-        VisibleColumnListModel.prototype.addColumn = function (column) {
-            var _this = this;
-            this.runInTransaction(function () {
-                _this.columns.push(column);
-                _this.trackSource(column.visible);
-            });
-        };
-        VisibleColumnListModel.prototype.doComputeValue = function () {
-            return this.columns.filter(function (c) { return c.visible.value; });
-        };
-        return VisibleColumnListModel;
-    }(pectin.AbstractComputedListModel));
-    var AbstractTableModel = /** @class */ (function (_super) {
-        __extends(AbstractTableModel, _super);
-        function AbstractTableModel(sourceOfTruth) {
-            var _this = _super.call(this) || this;
-            _this.sourceOfTruth = sourceOfTruth;
-            _this._columns = new pectin.MutableListModel();
-            _this._visibleColumnTracker = new VisibleColumnListModel();
-            _this._editorSessions = new pectin.MutableListModel();
-            _this.rowClassNamePredicates = [];
-            _this.rowClickListeners = new pectin.EventListenerList();
-            _this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
-            _this.trackBy = function (index, item) {
-                return _this.identityOf ? _this.identityOf(item) : index;
-            };
-            _this.identityOf = sourceOfTruth.identityOf;
-            var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.switchOn;
-            _this._columnsById = chain(_this._columns).indexBy('columnId');
-            _this._rowsBeingEdited = new pectin.MutableListModel([], {
-                identifiedWith: _this.identityOf
-            });
-            _this._editorSessionByRowId = chain(_this._editorSessions).indexBy('rowId');
-            _this.editing = chain(_this._editorSessions).count().isGreaterThan(0);
-            _this.dataSource = chain(_this.sourceOfTruth).replaceAll(_this.rowsBeingEdited);
-            _this.firstEditableColumn = chain(_this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
-            _this.firstVisibleColumn = chain(_this._visibleColumnTracker).first();
-            _this.lastVisibleColumn = chain(_this._visibleColumnTracker).last();
-            _this.rowSelectionDisabledOnAllColumns = chain(_this._visibleColumnTracker).select(function (column) { return column.isRowSelectionEnabled(); }).count().equals(0);
-            return _this;
-        }
-        Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
-            get: function () {
-                return this._rowsBeingEdited.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractTableModel.prototype, "columns", {
-            get: function () {
-                return this._columns.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(AbstractTableModel.prototype, "visibleColumns", {
-            get: function () {
-                return this._visibleColumnTracker.readonly;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        AbstractTableModel.prototype.pluck = function (property, options) {
-            var _this = this;
-            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
-            return this.addColumn(new PropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype.pluckList = function (property, options) {
-            var _this = this;
-            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
-            return this.addColumn(new ListPropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel, visible) {
-            var _this = this;
-            pectin.assert.isNil(this.selectionColumnModel);
-            var columnId = 'selection-column';
-            this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
-            this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
-            var selectionColumnModel = this.addColumn(this.selectionColumnModel);
-            if (!___namespace.isNil(visible)) {
-                selectionColumnModel.visibleWhile(visible instanceof pectin.ValueModel ? visible : pectin.ValueModel.constant(visible));
-            }
-            return selectionColumnModel;
-        };
-        AbstractTableModel.prototype.addEditControls = function (saveCommand) {
-            var _this = this;
-            this.saveCommand = saveCommand;
-            var columnId = 'editControls';
-            return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
-            var _this = this;
-            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, dataAccessor));
-        };
-        AbstractTableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
-            var _this = this;
-            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
-        };
-        AbstractTableModel.prototype.addTemplateColumn = function (columnId) {
-            var _this = this;
-            return this.addColumn(new CustomTemplateColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }));
-        };
-        AbstractTableModel.prototype.addRowClass = function (className, predicate) {
-            this.rowClassNamePredicates.push(new RowClass(className, predicate));
-        };
-        AbstractTableModel.prototype.getRowClasses = function (row) {
-            var classNames = [];
-            this.rowClassNamePredicates.forEach(function (i) {
-                if (i.matches(row)) {
-                    classNames.push(i.className);
-                }
-            });
-            return classNames;
-        };
-        AbstractTableModel.prototype.useFormFactory = function (factory) {
-            this._createForm = factory;
-            return this;
-        };
-        AbstractTableModel.prototype.addColumn = function (column) {
-            if (this._columnsById.get(column.columnId)) {
-                pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
-            }
-            else {
-                this._columns.push(column);
-                this._visibleColumnTracker.addColumn(column);
-            }
-            return column;
-        };
-        // removeColumn(column: ColumnModel<Row>) {
-        //
-        // }
-        AbstractTableModel.prototype.columnTextProperties = function (columnTextProperties) {
-            this._columnTextPropertiesLookup = columnTextProperties;
-        };
-        AbstractTableModel.prototype.getColumnTextProperties = function (columnId) {
-            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[columnId] : undefined;
-        };
-        AbstractTableModel.prototype.startEditSession = function (row) {
-            var _this = this;
-            var rowId = this.identityOf(row);
-            if (this._rowsBeingEdited.query().indexOf(row) > -1) {
-                return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
-            }
-            else {
-                var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
-                var when = pectin.Dsl.disposeWith(editSession_1).when;
-                when(editSession_1.liveRowValue).changes(function (editedValue) {
-                    _this._rowsBeingEdited.replaceOrPush(editedValue);
-                }, { initialValue: 'triggerChangeUnlessNil' });
-                this._editorSessions.push(editSession_1);
-                editSession_1.onDispose(function () {
-                    _this._rowsBeingEdited.remove(editSession_1.liveRowValue.value);
-                    _this._editorSessions.remove(editSession_1);
-                });
-                return editSession_1;
-            }
-        };
-        AbstractTableModel.prototype.getEditSessionFor = function (row) {
-            return this._editorSessionByRowId.get(this.identityOf(row));
-        };
-        AbstractTableModel.prototype.cancelAllEditorSessions = function () {
-            var _this = this;
-            this._editorSessions.runInTransaction(function (draft) {
-                _this._rowsBeingEdited.runInTransaction(function () {
-                    draft.value.forEach(function (session) { return session.dispose(); });
-                });
-            });
-        };
-        AbstractTableModel.prototype.isRowSelectionEnabledFor = function (column) {
-            return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
-        };
-        AbstractTableModel.prototype.isRowSelectionEnabled = function () {
-            return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
-        };
-        AbstractTableModel.prototype.hasSelectionModel = function () {
-            var _a;
-            return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
-        };
-        AbstractTableModel.prototype.isHoverEnabled = function () {
-            return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
-        };
-        AbstractTableModel.prototype.isCursorEnabled = function (column) {
-            return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
-        };
-        AbstractTableModel.prototype.selectRow = function (row) {
-            var _a;
-            (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
-        };
-        AbstractTableModel.prototype.onRowClicked = function (callback) {
-            return this.rowClickListeners.add(callback);
-        };
-        AbstractTableModel.prototype._notifyCellClicked = function (columnModel, row) {
-            if (this.isRowSelectionEnabledFor(columnModel)) {
-                this.selectRow(row);
-            }
-            this.rowClickListeners.fire(function (l) { return l(row); });
-        };
-        return AbstractTableModel;
-    }(pectin.GarbageCollector));
-    pectin.TrackExternal.oneTimeBinding(AbstractTableModel);
-
     /**
      * Create your model:
      * @example
@@ -3497,9 +3256,9 @@
      *   }
      * }
      */
-    var TableComponent = /** @class */ (function (_super) {
-        __extends(TableComponent, _super);
-        function TableComponent(elementRef, ngZone) {
+    var AbstractTableComponent = /** @class */ (function (_super) {
+        __extends(AbstractTableComponent, _super);
+        function AbstractTableComponent(elementRef, ngZone) {
             var _this = _super.call(this, elementRef, ngZone) || this;
             /**
              * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
@@ -3510,6 +3269,7 @@
             // TODO: support user defined header and row heights via css vars.
             _this.headerHeight = new pectin.MutableValueModel(56);
             _this.rowHeight = new pectin.MutableValueModel(48);
+            _this.baseCssClass = 'aup-table-component';
             var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, when = _b.when;
             var actualHeaderHeight = chain(_this.showHeaderModel).map(function (show) {
                 return show ? _this.headerHeight.value : 0;
@@ -3517,51 +3277,52 @@
             _this.visibleRowCount = chain(_this.boundsModel).map(function (bounds) {
                 // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.
                 var rawRowCount = (bounds.height - actualHeaderHeight.value) / _this.rowHeight.value;
-                var rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
-                // console.log({rowCount})
-                return rowCount;
+                return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
             }, {
                 dependsOn: [actualHeaderHeight, _this.rowHeight],
                 postponeWhile: chain(_this.boundsModel).pluckNumeric('height').isLessThan(1)
             });
             return _this;
         }
-        Object.defineProperty(TableComponent.prototype, "hideHeader", {
+        Object.defineProperty(AbstractTableComponent.prototype, "hideHeader", {
             get: function () {
                 return !this.showHeader;
             },
             enumerable: false,
             configurable: true
         });
-        TableComponent.prototype.ngOnInit = function () {
+        AbstractTableComponent.prototype.getModel = function () {
+            return typescriptUtilities.lang.abstractMethod(this.constructor);
+        };
+        AbstractTableComponent.prototype.ngOnInit = function () {
             var _b = pectin.Dsl.disposeWith(this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.switchOn;
-            this.columns = chain(this.tableModel.columns);
+            this.columns = chain(this.getModel().columns);
             this.columnIds = chain(this.columns).pluck('columnId');
             this.columnsById = chain(this.columns).indexBy('columnId');
         };
-        TableComponent.prototype.isEditing = function (row) {
-            return !!this.tableModel.getEditSessionFor(row);
+        AbstractTableComponent.prototype.isEditing = function (row) {
+            return !!this.getModel().getEditSessionFor(row);
         };
-        TableComponent.prototype.registerColumnTemplate = function (columnId, templateRef, viewContainer, fillCell, padChild) {
+        AbstractTableComponent.prototype.registerColumnTemplate = function (columnId, templateRef, viewContainer, fillCell, padChild) {
             var column = this.columnsById.get(columnId);
             if (column instanceof CustomTemplateColumnModel) {
                 column.setTemplate(templateRef, viewContainer, fillCell, padChild);
             }
         };
-        TableComponent.prototype.notifyCellClicked = function (columnModel, row) {
-            this.tableModel._notifyCellClicked(columnModel, row);
+        AbstractTableComponent.prototype.notifyCellClicked = function (columnModel, row) {
+            this.getModel()._notifyCellClicked(columnModel, row);
         };
         // @Trace()
-        TableComponent.prototype.isFirstVisibleColumn = function (columnId) {
+        AbstractTableComponent.prototype.isFirstVisibleColumn = function (columnId) {
             var _a;
-            return ((_a = this.tableModel.firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+            return ((_a = this.getModel().firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
         // @Trace()
-        TableComponent.prototype.isLastVisibleColumn = function (columnId) {
+        AbstractTableComponent.prototype.isLastVisibleColumn = function (columnId) {
             var _a;
-            return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
+            return ((_a = this.getModel().lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
-        TableComponent.prototype.getColumnClasses = function (columnId) {
+        AbstractTableComponent.prototype.getColumnClasses = function (columnId) {
             var classes = ["aup-col-" + this.columnsById.get(columnId).dasherisedColumnId];
             if (this.isFirstVisibleColumn(columnId)) {
                 classes.push('first-visible-column');
@@ -3571,38 +3332,33 @@
             }
             return classes;
         };
-        return TableComponent;
+        return AbstractTableComponent;
     }(ResizeAwareComponent));
-    TableComponent.decorators = [
+    AbstractTableComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aup-table',
-                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
-                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}"]
+                    selector: 'aup-abstract-table',
+                    template: ''
                 },] }
     ];
-    TableComponent.ctorParameters = function () { return [
+    AbstractTableComponent.ctorParameters = function () { return [
         { type: i0.ElementRef },
         { type: i0.NgZone }
     ]; };
-    TableComponent.propDecorators = {
-        tableModel: [{ type: i0.Input }],
+    AbstractTableComponent.propDecorators = {
         showHeaderModel: [{ type: i0.Input }],
         showHeader: [{ type: i0.Input }],
         enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }],
+        baseCssClass: [{ type: i0.HostBinding, args: ['class',] }],
         hideHeader: [{ type: i0.HostBinding, args: ['class.hide-header',] }]
     };
-    __decorate([
-        pectin.TrackExternal(),
-        __metadata("design:type", AbstractTableModel)
-    ], TableComponent.prototype, "tableModel", void 0);
     __decorate([
         pectin.TrackExternal({ defaultValue: true }),
         __metadata("design:type", pectin.ValueModel)
-    ], TableComponent.prototype, "showHeaderModel", void 0);
+    ], AbstractTableComponent.prototype, "showHeaderModel", void 0);
     __decorate([
         pectin.StoreInValueModel('showHeaderModel'),
         __metadata("design:type", Boolean)
-    ], TableComponent.prototype, "showHeader", void 0);
+    ], AbstractTableComponent.prototype, "showHeader", void 0);
 
     var ColumnTemplateDirective = /** @class */ (function () {
         function ColumnTemplateDirective(host, templateRef, viewContainer) {
@@ -3625,7 +3381,7 @@
                 },] }
     ];
     ColumnTemplateDirective.ctorParameters = function () { return [
-        { type: TableComponent },
+        { type: AbstractTableComponent },
         { type: i0.TemplateRef },
         { type: i0.ViewContainerRef }
     ]; };
@@ -3721,80 +3477,412 @@
         TableHeaderCellRendererComponent.prototype.ngOnInit = function () {
             this.column.attachHeaderCell(this);
         };
-        // @Trace()
-        TableHeaderCellRendererComponent.prototype.initialiseHeader = function (instance) {
-            this.column.onHeaderAttached(this, instance);
+        // @Trace()
+        TableHeaderCellRendererComponent.prototype.initialiseHeader = function (instance) {
+            this.column.onHeaderAttached(this, instance);
+        };
+        TableHeaderCellRendererComponent.prototype.getPortal = function () {
+            return this[HEADER_CELL_RENDERER_PORTAL];
+        };
+        return TableHeaderCellRendererComponent;
+    }());
+    TableHeaderCellRendererComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-table-header-cell-renderer',
+                    template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
+                },] }
+    ];
+    TableHeaderCellRendererComponent.ctorParameters = function () { return []; };
+    TableHeaderCellRendererComponent.propDecorators = {
+        column: [{ type: i0.Input }],
+        defaultClassNames: [{ type: i0.HostBinding, args: ['class',] }]
+    };
+
+    var MenuItemData = /** @class */ (function () {
+        function MenuItemData(factory, face) {
+            this.factory = factory;
+            this.face = face;
+        }
+        return MenuItemData;
+    }());
+    /**
+     *
+     */
+    var TableRowMenuComponent = /** @class */ (function (_super) {
+        __extends(TableRowMenuComponent, _super);
+        function TableRowMenuComponent() {
+            var _this = _super.call(this) || this;
+            _this.actions = [];
+            _this.moreActions = [];
+            return _this;
+        }
+        TableRowMenuComponent.prototype.registerAction = function (commandFactory, properties) {
+            this.actions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
+            this.moreActions.push(new MenuItemData(commandFactory, properties));
+        };
+        TableRowMenuComponent.prototype.ngOnInit = function () {
+        };
+        TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
+            var _this = this;
+            var when = pectin.Dsl.disposeWith(this).when;
+            var command = item.factory.create(value);
+            when(command.busy).becomesFalsey(function () {
+                _this.closeMoreMenu();
+            });
+            return command;
+        };
+        TableRowMenuComponent.prototype.closeMoreMenu = function () {
+            this.menu.closeMenu();
+        };
+        return TableRowMenuComponent;
+    }(DisposableComponent));
+    TableRowMenuComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-table-row-menu',
+                    template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.face\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.face\"></aup-command>\n          </aup-more-menu>\n      </ng-container>\n  ",
+                    styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+                },] }
+    ];
+    TableRowMenuComponent.ctorParameters = function () { return []; };
+    TableRowMenuComponent.propDecorators = {
+        value: [{ type: i0.Input }],
+        menu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger,] }]
+    };
+
+    var EditSession = /** @class */ (function (_super) {
+        __extends(EditSession, _super);
+        function EditSession(rowId, row, form, saveCommand) {
+            var _this = _super.call(this) || this;
+            _this.rowId = rowId;
+            _this.form = form;
+            _this.saveCommand = saveCommand;
+            _this._liveRowValue = new pectin.MutableValueModel();
+            _this.liveRowValue = _this._liveRowValue.readonly;
+            _this.form.load(row);
+            _this._liveRowValue.value = row;
+            _this.form.onEdit(function () {
+                // if (!this._liveRowValue.value[immerable]) {
+                //   console.warn()
+                // }
+                _this._liveRowValue.value = produce__default['default'](_this._liveRowValue.value, function (draft) {
+                    _this.form.writeDirtyStateTo(draft);
+                });
+            });
+            return _this;
+        }
+        return EditSession;
+    }(pectin.GarbageCollector));
+
+    // export type StringPropertiesOf<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];
+    // export type NumberPropertiesOf<T> = { [K in keyof T]: T[K] extends number ? K : never }[keyof T];
+    var RowClass = /** @class */ (function () {
+        function RowClass(className, matches) {
+            this.className = className;
+            this.matches = matches;
+        }
+        return RowClass;
+    }());
+    var VisibleColumnListModel = /** @class */ (function (_super) {
+        __extends(VisibleColumnListModel, _super);
+        function VisibleColumnListModel() {
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
+            _this.columns = [];
+            return _this;
+        }
+        VisibleColumnListModel.prototype.addColumn = function (column) {
+            var _this = this;
+            this.runInTransaction(function () {
+                _this.columns.push(column);
+                _this.trackSource(column.visible);
+            });
+        };
+        VisibleColumnListModel.prototype.doComputeValue = function () {
+            return this.columns.filter(function (c) { return c.visible.value; });
+        };
+        return VisibleColumnListModel;
+    }(pectin.AbstractComputedListModel));
+    var AbstractTableModel = /** @class */ (function (_super) {
+        __extends(AbstractTableModel, _super);
+        function AbstractTableModel(sourceOfTruth) {
+            var _this = _super.call(this) || this;
+            _this.sourceOfTruth = sourceOfTruth;
+            _this._columns = new pectin.MutableListModel();
+            _this._visibleColumnTracker = new VisibleColumnListModel();
+            _this._editorSessions = new pectin.MutableListModel();
+            _this.rowClassNamePredicates = [];
+            _this.rowClickListeners = new pectin.EventListenerList();
+            _this._createForm = function (row) { return new pectin.DirtyTrackingForm(); };
+            _this.trackBy = function (index, item) {
+                return _this.identityOf ? _this.identityOf(item) : index;
+            };
+            _this.identityOf = sourceOfTruth.identityOf;
+            var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.switchOn;
+            _this._columnsById = chain(_this._columns).indexBy('columnId');
+            _this._rowsBeingEdited = new pectin.MutableListModel([], {
+                identifiedWith: _this.identityOf
+            });
+            _this._editorSessionByRowId = chain(_this._editorSessions).indexBy('rowId');
+            _this.editing = chain(_this._editorSessions).count().isGreaterThan(0);
+            _this.dataSource = chain(_this.sourceOfTruth).replaceAll(_this.rowsBeingEdited);
+            _this.firstEditableColumn = chain(_this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
+            _this.firstVisibleColumn = chain(_this._visibleColumnTracker).first();
+            _this.lastVisibleColumn = chain(_this._visibleColumnTracker).last();
+            _this.rowSelectionDisabledOnAllColumns = chain(_this._visibleColumnTracker).select(function (column) { return column.isRowSelectionEnabled(); }).count().equals(0);
+            return _this;
+        }
+        Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
+            get: function () {
+                return this._rowsBeingEdited.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractTableModel.prototype, "columns", {
+            get: function () {
+                return this._columns.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(AbstractTableModel.prototype, "visibleColumns", {
+            get: function () {
+                return this._visibleColumnTracker.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        AbstractTableModel.prototype.pluck = function (property, options) {
+            var _this = this;
+            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
+            return this.addColumn(new PropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype.pluckList = function (property, options) {
+            var _this = this;
+            var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
+            return this.addColumn(new ListPropertyColumnModel(columnId, property, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype._addSelectionColumn = function (selectionModel, visible) {
+            var _this = this;
+            pectin.assert.isNil(this.selectionColumnModel);
+            var columnId = 'selection-column';
+            this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
+            this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
+            var selectionColumnModel = this.addColumn(this.selectionColumnModel);
+            if (!___namespace.isNil(visible)) {
+                selectionColumnModel.visibleWhile(visible instanceof pectin.ValueModel ? visible : pectin.ValueModel.constant(visible));
+            }
+            return selectionColumnModel;
+        };
+        AbstractTableModel.prototype.addEditControls = function (saveCommand) {
+            var _this = this;
+            this.saveCommand = saveCommand;
+            var columnId = 'editControls';
+            return this.addColumn(new EditorControlColumnModel(columnId, saveCommand, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype.addCustomColumn = function (columnId, dataAccessor) {
+            var _this = this;
+            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, dataAccessor));
+        };
+        AbstractTableModel.prototype.addComponentColumn = function (columnId, component, onComponentInitOrOptions) {
+            var _this = this;
+            return this.addColumn(new CustomValueColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, function (row) { return row; })).cellRenderer(component, onComponentInitOrOptions);
+        };
+        AbstractTableModel.prototype.addTemplateColumn = function (columnId) {
+            var _this = this;
+            return this.addColumn(new CustomTemplateColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }));
+        };
+        AbstractTableModel.prototype.addRowClass = function (className, predicate) {
+            this.rowClassNamePredicates.push(new RowClass(className, predicate));
+        };
+        AbstractTableModel.prototype.getRowClasses = function (row) {
+            var classNames = [];
+            this.rowClassNamePredicates.forEach(function (i) {
+                if (i.matches(row)) {
+                    classNames.push(i.className);
+                }
+            });
+            return classNames;
+        };
+        AbstractTableModel.prototype.useFormFactory = function (factory) {
+            this._createForm = factory;
+            return this;
+        };
+        AbstractTableModel.prototype.addColumn = function (column) {
+            if (this._columnsById.get(column.columnId)) {
+                pectin.lang.illegalState("Column with id=" + column.columnId + " already exists");
+            }
+            else {
+                this._columns.push(column);
+                this._visibleColumnTracker.addColumn(column);
+            }
+            return column;
+        };
+        // removeColumn(column: ColumnModel<Row>) {
+        //
+        // }
+        AbstractTableModel.prototype.columnTextProperties = function (columnTextProperties) {
+            this._columnTextPropertiesLookup = columnTextProperties;
+        };
+        AbstractTableModel.prototype.getColumnTextProperties = function (columnId) {
+            return this._columnTextPropertiesLookup ? this._columnTextPropertiesLookup[columnId] : undefined;
+        };
+        AbstractTableModel.prototype.startEditSession = function (row) {
+            var _this = this;
+            var rowId = this.identityOf(row);
+            if (this._rowsBeingEdited.query().indexOf(row) > -1) {
+                return pectin.lang.illegalState("Row with id=" + rowId + " already being edited");
+            }
+            else {
+                var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
+                var when = pectin.Dsl.disposeWith(editSession_1).when;
+                when(editSession_1.liveRowValue).changes(function (editedValue) {
+                    _this._rowsBeingEdited.replaceOrPush(editedValue);
+                }, { initialValue: 'triggerChangeUnlessNil' });
+                this._editorSessions.push(editSession_1);
+                editSession_1.onDispose(function () {
+                    _this._rowsBeingEdited.remove(editSession_1.liveRowValue.value);
+                    _this._editorSessions.remove(editSession_1);
+                });
+                return editSession_1;
+            }
+        };
+        AbstractTableModel.prototype.getEditSessionFor = function (row) {
+            return this._editorSessionByRowId.get(this.identityOf(row));
+        };
+        AbstractTableModel.prototype.cancelAllEditorSessions = function () {
+            var _this = this;
+            this._editorSessions.runInTransaction(function (draft) {
+                _this._rowsBeingEdited.runInTransaction(function () {
+                    draft.value.forEach(function (session) { return session.dispose(); });
+                });
+            });
+        };
+        AbstractTableModel.prototype.isRowSelectionEnabledFor = function (column) {
+            return this.isRowSelectionEnabled() && column.isRowSelectionEnabled();
+        };
+        AbstractTableModel.prototype.isRowSelectionEnabled = function () {
+            return this.hasSelectionModel() && !this.rowSelectionDisabledOnAllColumns.value;
+        };
+        AbstractTableModel.prototype.hasSelectionModel = function () {
+            var _a;
+            return !!((_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel.getDelegate());
+        };
+        AbstractTableModel.prototype.isHoverEnabled = function () {
+            return this.isRowSelectionEnabled() || this.rowClickListeners.listenerCount > 0;
+        };
+        AbstractTableModel.prototype.isCursorEnabled = function (column) {
+            return this.isRowSelectionEnabledFor(column) || this.rowClickListeners.listenerCount > 0;
         };
-        TableHeaderCellRendererComponent.prototype.getPortal = function () {
-            return this[HEADER_CELL_RENDERER_PORTAL];
+        AbstractTableModel.prototype.selectRow = function (row) {
+            var _a;
+            (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectRow(row);
         };
-        return TableHeaderCellRendererComponent;
-    }());
-    TableHeaderCellRendererComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'aup-table-header-cell-renderer',
-                    template: "<ng-container [cdkPortalOutlet]=\"getPortal()\" (attached)=\"initialiseHeader($event.instance)\"></ng-container>\n",
-                    styles: [":host{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%}"]
-                },] }
-    ];
-    TableHeaderCellRendererComponent.ctorParameters = function () { return []; };
-    TableHeaderCellRendererComponent.propDecorators = {
-        column: [{ type: i0.Input }],
-        defaultClassNames: [{ type: i0.HostBinding, args: ['class',] }]
-    };
+        AbstractTableModel.prototype.onRowClicked = function (callback) {
+            return this.rowClickListeners.add(callback);
+        };
+        AbstractTableModel.prototype._notifyCellClicked = function (columnModel, row) {
+            if (this.isRowSelectionEnabledFor(columnModel)) {
+                this.selectRow(row);
+            }
+            this.rowClickListeners.fire(function (l) { return l(row); });
+        };
+        return AbstractTableModel;
+    }(pectin.GarbageCollector));
+    pectin.TrackExternal.oneTimeBinding(AbstractTableModel);
 
-    var MenuItemData = /** @class */ (function () {
-        function MenuItemData(factory, face) {
-            this.factory = factory;
-            this.face = face;
-        }
-        return MenuItemData;
-    }());
     /**
+     * Create your model:
+     * @example
+     * this.heroTableModel = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     * });
+     *
+     * Create your table
+     * @example
+     * <aup-table [tableModel]="heroTableModel"></aup-table>
+     *
+     * Column templates
+     * @example
+     * this.heroTableModel = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addTemplateColumn("specialColumn");
+     * });
+     * <aup-table [tableModel]="heroTableModel">
+     *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+     *     {{hero.name}}
+     *   </div>
+     * </aup-table>
+     *
+     * Styling
+     * @example
+     *  // global settings
+     * :root {
+     *   --aup-table-column-gap: 10px; // defaults to 24px
+     *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+     *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+     * }
+     *
+     * // per table settings.
+     * aup-table {
+     *   --column-gap: 10px; // defaults to 24px
+     *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --first-column-padding-left: 18px // defaults to --column-gap
+     *   --last-column-padding-right: 18px // defaults to --column-gap
      *
+     *   aup-table-header-cell-renderer,
+     *   aup-table-cell-renderer {
+     *     &.aup-col-my-dasherised-column-id {
+     *       // do stuff
+     *     }
+     *     &.first-visible-column {
+     *       // do stuff
+     *     }
+     *     &.last-visible-column {
+     *       // do stuff
+     *     }
+     *   }
+     * }
      */
-    var TableRowMenuComponent = /** @class */ (function (_super) {
-        __extends(TableRowMenuComponent, _super);
-        function TableRowMenuComponent() {
-            var _this = _super.call(this) || this;
-            _this.actions = [];
-            _this.moreActions = [];
-            return _this;
+    var TableComponent = /** @class */ (function (_super) {
+        __extends(TableComponent, _super);
+        function TableComponent(elementRef, ngZone) {
+            return _super.call(this, elementRef, ngZone) || this;
         }
-        TableRowMenuComponent.prototype.registerAction = function (commandFactory, properties) {
-            this.actions.push(new MenuItemData(commandFactory, properties));
-        };
-        TableRowMenuComponent.prototype.registerMoreAction = function (commandFactory, properties) {
-            this.moreActions.push(new MenuItemData(commandFactory, properties));
-        };
-        TableRowMenuComponent.prototype.ngOnInit = function () {
-        };
-        TableRowMenuComponent.prototype.createMoreMenuCommand = function (item, value) {
-            var _this = this;
-            var when = pectin.Dsl.disposeWith(this).when;
-            var command = item.factory.create(value);
-            when(command.busy).becomesFalsey(function () {
-                _this.closeMoreMenu();
-            });
-            return command;
-        };
-        TableRowMenuComponent.prototype.closeMoreMenu = function () {
-            this.menu.closeMenu();
+        TableComponent.prototype.getModel = function () {
+            return this.tableModel;
         };
-        return TableRowMenuComponent;
-    }(DisposableComponent));
-    TableRowMenuComponent.decorators = [
+        return TableComponent;
+    }(AbstractTableComponent));
+    TableComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: 'aup-table-row-menu',
-                    template: "\n      <aup-tool-bar>\n          <aup-command *ngFor=\"let action of actions\" [command]=\"action.factory.create(value)\"\n                       [face]=\"action.face\"></aup-command>\n      </aup-tool-bar>\n      <ng-container *ngIf=\"moreActions.length > 0\">\n          <aup-more-menu>\n              <aup-command *ngFor=\"let action of moreActions\" [command]=\"action.factory.create(value)\"\n                           [face]=\"action.face\"></aup-command>\n          </aup-more-menu>\n      </ng-container>\n  ",
-                    styles: [":host {\n    display: inline-flex;\n    flex-direction: row;\n    align-items: center;\n  }"]
+                    selector: 'aup-table',
+                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.trackBy]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    providers: [
+                        { provide: AbstractTableComponent, useExisting: TableComponent }
+                    ],
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}"]
                 },] }
     ];
-    TableRowMenuComponent.ctorParameters = function () { return []; };
-    TableRowMenuComponent.propDecorators = {
-        value: [{ type: i0.Input }],
-        menu: [{ type: i0.ViewChild, args: [menu.MatMenuTrigger,] }]
+    TableComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
+    TableComponent.propDecorators = {
+        tableModel: [{ type: i0.Input }]
     };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", AbstractTableModel)
+    ], TableComponent.prototype, "tableModel", void 0);
 
     var SVG_HEIGHT = 60;
     exports.TreeInheritanceIconComponent = /** @class */ (function () {
@@ -4350,30 +4438,29 @@
         };
         return TreeTableModel;
     }(AbstractTableModel));
-    var FlattenStrategy = /** @class */ (function (_super) {
-        __extends(FlattenStrategy, _super);
-        function FlattenStrategy(collapsedIds) {
-            var _this = _super.call(this) || this;
-            _this.collapsedIds = collapsedIds;
-            _this._areas = [];
-            _this._collapsed = new Set(collapsedIds);
-            return _this;
-        }
-        FlattenStrategy.prototype.onVisit = function (it) {
-            this._areas.push(it);
-        };
-        FlattenStrategy.prototype.shouldVisitChildrenOf = function (it) {
-            return !this._collapsed.has(it);
-        };
-        Object.defineProperty(FlattenStrategy.prototype, "flattenedAreas", {
-            get: function () {
-                return this._areas;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return FlattenStrategy;
-    }(exports.SelfAndDescendantsVisitor));
+    // export class FlattenStrategy<T extends VisitableTree<any>> extends SelfAndDescendantsVisitor<T> {
+    //
+    //   private _areas: T[] = [];
+    //   private _collapsed: Set<T>;
+    //
+    //   constructor(private collapsedIds: T[]) {
+    //     super();
+    //     this._collapsed = new Set<T>(collapsedIds);
+    //   }
+    //
+    //   protected onVisit(it: T) {
+    //     this._areas.push(it);
+    //   }
+    //
+    //   protected shouldVisitChildrenOf(it: T): boolean {
+    //     return !this._collapsed.has(it);
+    //   }
+    //
+    //   get flattenedAreas(): T[] {
+    //     return this._areas;
+    //   }
+    //
+    // }
     // class DecoratorCache {
     //
     //     private map = new Map<number, T>();
@@ -4397,83 +4484,97 @@
     //
     // }
 
-    //
-    // const template = `
-    // <table-component list-model="zoneTreeController.visibleAreas"
-    //                  selection-model="zoneTreeController.selectionModel"
-    //                  selection-command="zoneTreeController.selectionCommand"
-    //                  hover-model="zoneTreeController.decoratedHoverModel"
-    //                  no-hover="zoneTreeController.noHover"
-    //                  no-lines="true" no-scroll>
-    //
-    //     <row-attr name="parent-id" value="{{item.parent.id}}"></row-attr>
-    //     <row-attr name="area-id" value="{{item.id}}"></row-attr>
-    //     <row-attr name="area-name" value="{{item.name}}"></row-attr>
-    //     <row-attr name="area-depth" value="{{item.depthFromZone()}}"></row-attr>
-    //     <row-attr name="collapsed" value="{{zoneTreeController.isCollapsed(item)}}"></row-attr>
-    //
-    //     <column class="area" ng-class="{root: item.isZone(), parent: item.isGroup()}" class="allow-squish">
-    //         <!--<label>Rooms in {{zoneTreeController.zoneModel.value.name}}</label>-->
-    //         <label>Rooms</label>
-    //         <div layout="row" layout-align="start center">
-    //             <tree-icons tree-item="item"></tree-icons>
-    //             <area-icon area="item"></area-icon>
-    //             <span ng-if="item.isZone()">Zone ({{item.name}})</span>
-    //             <span ng-if="!item.isZone()">{{item.name}}</span>
-    //         </div>
-    //     </column>
-    //     <column class="expand-collapse" ng-class="{collapsed: zoneTreeController.isCollapsed(item)}">
-    //         <md-button class="md-icon-button"
-    //             ng-if="zoneTreeController.canCollapse(item)"
-    //             ng-click="zoneTreeController.toggleCollapse(item)">
-    //             <md-icon>keyboard_arrow_up</md-icon>
-    //         </md-button>
-    //     </column>
-    //
-    // </table-component>
-    // `;
+    /**
+     * Create your model:
+     * @example
+     * this.heroTableModel = TableTreeModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+     *   table.addTemplateColumn("specialColumn");
+     * });
+     *
+     * Create your table
+     * @example
+     * <aup-tree-table [treeTableModel]="heroTableModel"></aup-table>
+     *
+     * Column templates
+     * @example
+     * this.heroTableModel = TableModel.fromList(heroList, table => {
+     *   table.pluck("firstName");
+     *   table.pluck("lastName");
+     *   table.addTemplateColumn("specialColumn");
+     * });
+     * <aup-table [tableModel]="heroTableModel">
+     *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+     *     {{hero.name}}
+     *   </div>
+     * </aup-table>
+     *
+     * Styling
+     * @example
+     *  // global settings
+     * :root {
+     *   --aup-table-column-gap: 10px; // defaults to 24px
+     *   --aup-table-row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --aup-table-row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --aup-table-first-column-padding-left: 18px // defaults to --column-gap
+     *   --aup-table-last-column-padding-right: 18px // defaults to --column-gap
+     * }
+     *
+     * // per table settings.
+     * aup-table {
+     *   --column-gap: 10px; // defaults to 24px
+     *   --row-hover-background-color, rgba(0, 0, 0, 0.05)
+     *   --row-selected-background-color: rebeccapurple; // defaults to transparent
+     *   --first-column-padding-left: 18px // defaults to --column-gap
+     *   --last-column-padding-right: 18px // defaults to --column-gap
+     *
+     *   aup-table-header-cell-renderer,
+     *   aup-table-cell-renderer {
+     *     &.aup-col-my-dasherised-column-id {
+     *       // do stuff
+     *     }
+     *     &.first-visible-column {
+     *       // do stuff
+     *     }
+     *     &.last-visible-column {
+     *       // do stuff
+     *     }
+     *   }
+     * }
+     */
     var TreeTableComponent = /** @class */ (function (_super) {
         __extends(TreeTableComponent, _super);
-        function TreeTableComponent() {
-            var _this = _super.call(this) || this;
-            /**
-             * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either
-             * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's
-             * containment area.
-             */
-            _this.enableScrolling = false;
-            return _this;
+        function TreeTableComponent(elementRef, ngZone) {
+            return _super.call(this, elementRef, ngZone) || this;
         }
+        TreeTableComponent.prototype.getModel = function () {
+            return this.treeTableModel;
+        };
         return TreeTableComponent;
-    }(DisposableComponent));
+    }(AbstractTableComponent));
     TreeTableComponent.decorators = [
         { type: i0.Component, args: [{
-                    selector: "aup-tree-table",
-                    template: "<aup-table [tableModel]=\"treeTableModel\" [showHeaderModel]=\"showHeaderModel\" [enableScrolling]=\"enableScrolling\"></aup-table>\n",
-                    encapsulation: i0.ViewEncapsulation.None // allow us to target nested table styles
-                    ,
-                    styles: ["td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
+                    selector: 'aup-tree-table',
+                    template: "<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"getModel().dataSource.value\" [trackBy]=\"getModel().trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"getModel().isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"getModel()\"\n                                 [editSession]=\"getModel().getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class]=\"getColumnClasses(column.columnId)\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"getModel().getRowClasses(row)\" [class.enable-hover]=\"getModel().isHoverEnabled()\"\n        [attr.trackBy]=\"getModel().trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n",
+                    providers: [
+                        { provide: AbstractTableComponent, useExisting: TreeTableComponent }
+                    ],
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{flex:1;flex-basis:0;overflow-y:auto;display:flex;flex-direction:column;align-items:stretch}", "td.mat-cell{border-top-width:0!important;border-bottom-width:0!important}td.mat-column-tree-label{width:1px}aup-table-cell-renderer[column-id=tree-label]{padding-left:8px!important}aup-tree-label-cell-renderer{flex:1}"]
                 },] }
     ];
-    TreeTableComponent.ctorParameters = function () { return []; };
+    TreeTableComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: i0.NgZone }
+    ]; };
     TreeTableComponent.propDecorators = {
-        treeTableModel: [{ type: i0.Input }],
-        showHeaderModel: [{ type: i0.Input }],
-        showHeader: [{ type: i0.Input }],
-        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }]
+        treeTableModel: [{ type: i0.Input }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", TreeTableModel)
     ], TreeTableComponent.prototype, "treeTableModel", void 0);
-    __decorate([
-        pectin.TrackExternal({ defaultValue: true }),
-        __metadata("design:type", pectin.ValueModel)
-    ], TreeTableComponent.prototype, "showHeaderModel", void 0);
-    __decorate([
-        pectin.StoreInValueModel('showHeaderModel'),
-        __metadata("design:type", Boolean)
-    ], TreeTableComponent.prototype, "showHeader", void 0);
 
     var VerticalFocusContainerComponent = /** @class */ (function (_super) {
         __extends(VerticalFocusContainerComponent, _super);
@@ -4649,6 +4750,7 @@
                         BusyOverlayComponent,
                         EmptyStateComponent,
                         PaginatorComponent,
+                        AbstractTableComponent
                     ],
                     imports: [
                         i2.CommonModule,
@@ -9579,6 +9681,7 @@
     exports.AbstractPlaceNavigationComponent = AbstractPlaceNavigationComponent;
     exports.AbstractPopStateNavigation = AbstractPopStateNavigation;
     exports.AbstractPopupMenuComponent = AbstractPopupMenuComponent;
+    exports.AbstractTableComponent = AbstractTableComponent;
     exports.AbstractTableModel = AbstractTableModel;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
@@ -9627,7 +9730,6 @@
     exports.EditorControlColumnModel = EditorControlColumnModel;
     exports.EmptyStateComponent = EmptyStateComponent;
     exports.EventCleanUpSession = EventCleanUpSession;
-    exports.FlattenStrategy = FlattenStrategy;
     exports.FlexComponent = FlexComponent;
     exports.FocusBinding = FocusBinding;
     exports.FocusBindingDirective = FocusBindingDirective;