@coolon/angular-ui-powerups 3.12.0 → 3.14.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [3.14.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.13.0...v3.14.0) (2021-02-23)
+
+
+### Features
+
+* added aup-table column visibility and late selection model binding ([29ffa80](https://bitbucket.org/coolon/angular-ui-powerups/commit/29ffa803bc627b0c0b33777ebed13dbbb14ade97))
+
+## [3.13.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.12.0...v3.13.0) (2021-02-22)
+
+
+### Features
+
+* added [showHeader] property to aup-table ([1146932](https://bitbucket.org/coolon/angular-ui-powerups/commit/11469328c1b7381a32bad67b09caef194823ea6e))
+
 ## [3.12.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.11.2...v3.12.0) (2021-02-22)
 
 

package/assets/table.scss

@@ -3,7 +3,18 @@ aup-table {
   --resolved-row-selected-background-color: var(--row-selected-background-color, rgba(0, 0, 255, 0.04));
   --resolved-row-hover-background-color: var(--row-hover-background-color, rgba(0, 0, 0, 0.05));
 
+  &.hide-header {
+    .mat-table thead {
+      display: none;
+    }
+  }
+
   .mat-table {
+    td, th {
+      &.hide {
+        display: none;
+      }
+    }
 
     th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type {
       padding-left: 0;

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

@@ -729,7 +729,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
                     template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                    styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
+                    styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px;margin-bottom:var(--default-padding)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead,aup-table .mat-table td.hide,aup-table .mat-table th.hide{display:none}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
                 },] }
     ];
     CardContainerComponent.ctorParameters = function () { return []; };
@@ -2389,10 +2389,10 @@
         }
         ResizeAwareComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
-            this.updateBounds();
+            this._updateBounds();
             var element = this.elementRef.nativeElement;
             var ro = new ResizeObserver__default['default'](function (entries, observer) {
-                _this.ngZone.run(function () { return _this.updateBounds(); });
+                _this.ngZone.run(function () { return _this._updateBounds(); });
             });
             ro.observe(element);
             this.onDispose(function () { return ro.disconnect(); });
@@ -2422,7 +2422,7 @@
             enumerable: false,
             configurable: true
         });
-        ResizeAwareComponent.prototype.updateBounds = function () {
+        ResizeAwareComponent.prototype._updateBounds = function () {
             this._boundsModel.value = exports.Bounds.ofElement(this.nativeElement);
         };
         return ResizeAwareComponent;
@@ -2639,12 +2639,14 @@
         function SelectCellRendererComponent() {
             var _this = _super.call(this) || this;
             _this.selectCommand = pectin.Command.create(function () {
-                _this.selectionModel.selectCommand.execute(_this.row);
+                var _a;
+                (_a = _this.selectionModel) === null || _a === void 0 ? void 0 : _a.selectCommand.execute(_this.row);
             });
             return _this;
         }
         SelectCellRendererComponent.prototype.isSelected = function () {
-            return this.selectionModel.isSelected(this.row);
+            var _a;
+            return (_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.isSelected(this.row);
         };
         return SelectCellRendererComponent;
     }(DisposableComponent));
@@ -2677,12 +2679,15 @@
             var _a;
             return ((_a = this.selectionModel) === null || _a === void 0 ? void 0 : _a.someSelected.value) || false;
         };
+        SelectHeaderCellRendererComponent.prototype.isVisible = function () {
+            return this.enableHeaderControls && this.selectionModel.getDelegate() instanceof pectin.MultipleSelectionModel;
+        };
         return SelectHeaderCellRendererComponent;
     }(DisposableComponent));
     SelectHeaderCellRendererComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-select-header-cell-renderer',
-                    template: "<mat-checkbox *ngIf=\"enableHeaderControls\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
+                    template: "<mat-checkbox *ngIf=\"isVisible()\" [pectinCommand]=\"selectCommand\" [checked]=\"isSelected()\" [indeterminate]=\"this.isIntermediate()\"></mat-checkbox>\n",
                     styles: [""]
                 },] }
     ];
@@ -2691,13 +2696,14 @@
     var noop = function () {
     };
     var ɵ0 = noop;
-    var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol("aup-cell-renderer:row-data-cache");
+    var CELL_RENDERER_COMPONENT_ROW_CACHE = Symbol('aup-cell-renderer:row-data-cache');
     var ColumnModel = /** @class */ (function () {
         function ColumnModel(columnId, textPropertiesProvider) {
             this.columnId = columnId;
             this.textPropertiesProvider = textPropertiesProvider;
             this._selectRowOnClick = undefined;
             this._flex = false;
+            this._visibleModel = new pectin.DelegatingValueModel().withDefault(true);
             this.installHeaderRenderer();
         }
         ColumnModel.prototype.installHeaderRenderer = function () {
@@ -2709,6 +2715,20 @@
             var _a;
             return ((_a = this.getColumnTextProperties()) === null || _a === void 0 ? void 0 : _a.headerText()) || this.getDefaultHeaderText();
         };
+        ColumnModel.prototype.isVisible = function () {
+            return this.visible.value;
+        };
+        Object.defineProperty(ColumnModel.prototype, "visible", {
+            get: function () {
+                return this._visibleModel.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ColumnModel.prototype.visibleWhile = function (visible) {
+            this._visibleModel.setDelegate(visible);
+            return this;
+        };
         ColumnModel.prototype.getDefaultHeaderText = function () {
             return this.columnId;
         };
@@ -2998,21 +3018,26 @@
         __extends(SelectionColumnModel, _super);
         function SelectionColumnModel(columnId, defaults, selectionModel) {
             var _this = _super.call(this, columnId, defaults) || this;
-            _this.selectionModel = selectionModel;
             _this._enableHeaderControls = true;
+            _this.selectionModel = pectin.DelegatingSelectionModel.createDelegate();
+            _this.hasSelectionModel = new pectin.MutableValueModel(false);
             _this.selectOnRowClick(false);
-            if (selectionModel instanceof pectin.MultipleSelectionModel) {
-                _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
-                    component.selectionModel = selectionModel;
-                    component.enableHeaderControls = _this._enableHeaderControls;
-                });
-            }
+            _this.cellHeaderRenderer(SelectHeaderCellRendererComponent, function (component) {
+                component.selectionModel = _this.selectionModel;
+                component.enableHeaderControls = _this._enableHeaderControls;
+            });
             _this.configureCellRenderer(new ComponentCellRendererPortalRef(SelectCellRendererComponent, function (component, rowData) {
                 component.row = rowData.row;
-                component.selectionModel = selectionModel;
+                component.selectionModel = _this.selectionModel;
             }));
+            _this.setSelectionModel(selectionModel);
+            _this.visibleWhile(_this.hasSelectionModel);
             return _this;
         }
+        SelectionColumnModel.prototype.setSelectionModel = function (selectionModel) {
+            this.selectionModel.setDelegate(selectionModel);
+            this.hasSelectionModel.value = !!selectionModel;
+        };
         SelectionColumnModel.prototype.getDefaultHeaderText = function () {
             return '';
         };
@@ -3031,6 +3056,9 @@
         SelectionColumnModel.prototype.selectRow = function (row) {
             this.selectionModel.selectCommand.execute(row);
         };
+        SelectionColumnModel.prototype.isSelected = function (row) {
+            return this.selectionModel.isSelected(row);
+        };
         return SelectionColumnModel;
     }(ColumnModel));
 
@@ -3122,7 +3150,7 @@
             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 selectionModel.isSelected(row); });
+            this.addRowClass("aup-row-selected", function (row) { return _this.selectionColumnModel.isSelected(row); });
             return this.addColumn(this.selectionColumnModel);
         };
         AbstractTableModel.prototype.addEditControls = function (saveCommand) {
@@ -3168,14 +3196,6 @@
             }
             return column;
         };
-        Object.defineProperty(AbstractTableModel.prototype, "selectionModel", {
-            get: function () {
-                var _a;
-                return (_a = this.selectionColumnModel) === null || _a === void 0 ? void 0 : _a.selectionModel;
-            },
-            enumerable: false,
-            configurable: true
-        });
         // removeColumn(column: ColumnModel<Row>) {
         //
         // }
@@ -3288,17 +3308,27 @@
             // TODO: support user defined header and row heights via css vars.
             _this.headerHeight = new pectin.MutableValueModel(56);
             _this.rowHeight = new pectin.MutableValueModel(48);
-            var chain = pectin.Dsl.disposeWith(_this).chain;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, when = _a.when;
+            var actualHeaderHeight = chain(_this.showHeaderModel).map(function (show) {
+                return show ? _this.headerHeight.value : 0;
+            }, { dependsOn: _this.headerHeight });
             _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 - _this.headerHeight.value) / _this.rowHeight.value;
+                var rawRowCount = (bounds.height - actualHeaderHeight.value) / _this.rowHeight.value;
                 return rawRowCount < 1 ? 0 : Math.floor(rawRowCount);
             }, {
-                dependsOn: [_this.headerHeight, _this.rowHeight],
+                dependsOn: [actualHeaderHeight, _this.rowHeight],
                 postponeWhile: chain(_this.boundsModel).pluckNumeric('height').isLessThan(1)
             });
             return _this;
         }
+        Object.defineProperty(TableComponent.prototype, "hideHeader", {
+            get: function () {
+                return !this.showHeader;
+            },
+            enumerable: false,
+            configurable: true
+        });
         TableComponent.prototype.ngOnInit = function () {
             var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
             this.columns = chain(this.tableModel.columns);
@@ -3322,8 +3352,8 @@
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-table',
-                    template: "<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()\">\n      <aup-table-header-cell-renderer [column]=\"column\"\n                                      [attr.column-index]=\"index\"\n                                      [attr.column-id]=\"column.columnId\"\n                                      [class.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\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    >\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.first-column]=\"first\"\n                               [class.last-column]=\"last\"\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",
-                    styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{flex:1;width:100%}"]
+                    template: "<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.first-column]=\"first\"\n                                      [class.last-column]=\"last\"\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.first-column]=\"first\"\n                               [class.last-column]=\"last\"\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",
+                    styles: [":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}"]
                 },] }
     ];
     TableComponent.ctorParameters = function () { return [
@@ -3331,12 +3361,23 @@
         { type: i0.NgZone }
     ]; };
     TableComponent.propDecorators = {
-        tableModel: [{ type: i0.Input }]
+        tableModel: [{ type: i0.Input }],
+        showHeaderModel: [{ type: i0.Input }],
+        showHeader: [{ type: i0.Input }],
+        hideHeader: [{ type: i0.HostBinding, args: ["class.hide-header",] }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", exports.AbstractTableModel)
     ], TableComponent.prototype, "tableModel", void 0);
+    __decorate([
+        pectin.TrackExternal({ defaultValue: true }),
+        __metadata("design:type", pectin.ValueModel)
+    ], TableComponent.prototype, "showHeaderModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel("showHeaderModel"),
+        __metadata("design:type", Boolean)
+    ], TableComponent.prototype, "showHeader", void 0);
 
     var ColumnTemplateDirective = /** @class */ (function () {
         function ColumnTemplateDirective(host, templateRef, viewContainer) {