fix(occlusion): tbody sizing via flexbox, dynamic column widths

Also uses the correct scrollbar width from the  service.

addon/components/light-table.js

@@ -42,6 +42,7 @@ const LightTable = Component.extend({
   attributeBindings: ['style'],
 
   media: service(),
+  scrollbarThickness: service(),
 
   /**
    * @property table
@@ -241,12 +242,18 @@ const LightTable = Component.extend({
     return `${totalWidth}${unit}`;
   }),
 
-  style: computed('totalWidth', 'height', function() {
+  style: computed('totalWidth', 'height', 'occlusion', function() {
     let totalWidth = this.get('totalWidth');
     let style = this.getProperties(['height']);
 
     if (totalWidth) {
-      style.width = totalWidth;
+      if (this.get('occlusion')) {
+        const scrollbarThickness = this.get('scrollbarThickness.thickness');
+        style.width = `calc(${totalWidth} + ${scrollbarThickness}px)`;
+      } else {
+        style.width = totalWidth;
+      }
+
       style.overflowX = 'auto';
     }
 

addon/components/lt-body.js

@@ -316,35 +316,12 @@ export default Component.extend({
     this.setupScrollOffset();
   },
 
-  didInsertElement() {
-    this._super(...arguments);
-    if (this.get('sharedOptions.occlusion')) {
-      this._setupScrollAreaDimensions();
-    }
-  },
-
   destroy() {
     this._super(...arguments);
     run.cancel(this._checkTargetOffsetTimer);
     run.cancel(this._setTargetOffsetTimer);
   },
 
-  /**
-   * Calculates the available height remaining in the body of the table by taking the table height defined
-   * on the light table component and subtracting the rendered height of the header.
-   * May need to extend this to include the footer.
-   *
-   * @method _setupScrollAreaDimensions
-   * @private
-   */
-  _setupScrollAreaDimensions() {
-    const lightTableContainer = this.element.parentElement;
-    const { height: totalHeight } = lightTableContainer.getBoundingClientRect();
-    const headerElem = lightTableContainer.querySelector('.lt-head-wrap');
-    const { height: headerHeight } = headerElem.getBoundingClientRect();
-    this.set('height', totalHeight - headerHeight);
-  },
-
   _setupVirtualScrollbar() {
     let { fixedHeader, fixedFooter } = this.get('sharedOptions');
     this.set('useVirtualScrollbar', fixedHeader || fixedFooter);

addon/mixins/table-header.js

@@ -2,6 +2,8 @@ import Mixin from '@ember/object/mixin';
 import { computed } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 import { warn } from '@ember/debug';
+import { inject as service } from '@ember/service';
+import cssStyleify from 'ember-light-table/utils/css-styleify';
 
 /**
  * @module Light Table
@@ -14,6 +16,10 @@ import { warn } from '@ember/debug';
  */
 
 export default Mixin.create({
+  attributeBindings: ['style'],
+
+  scrollbarThickness: service(),
+
   /**
    * @property table
    * @type {Table}
@@ -130,6 +136,13 @@ export default Mixin.create({
     return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending', 'iconComponent']);
   }).readOnly(),
 
+  style: computed('sharedOptions.occlusion', function() {
+    if (this.get('sharedOptions.occlusion')) {
+      const scrollbarThickness = this.get('scrollbarThickness.thickness');
+      return cssStyleify({ paddingRight: `${scrollbarThickness}px` });
+    }
+  }).readOnly(),
+
   init() {
     this._super(...arguments);
 

addon/styles/addon.css

@@ -14,6 +14,7 @@
   table-layout: fixed;
   border-collapse: collapse;
   width: 100%;
+  box-sizing: border-box;
 }
 
 .ember-light-table .lt-scaffolding {
@@ -30,16 +31,15 @@
 .ember-light-table .lt-foot-wrap {
   overflow-y: auto;
   overflow-x: hidden;
-}
 
-.ember-light-table .lt-head-wrap,
-.ember-light-table .lt-foot-wrap {
   -webkit-box-flex: 0;
-      -ms-flex: 0 1 auto;
-          flex: 0 1 auto;
+      -ms-flex: 0 0 auto;
+          flex: 0 0 auto;
 }
 
 .ember-light-table .lt-body-wrap {
+  overflow-y: hidden;
+
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -48,8 +48,8 @@
       -ms-flex-direction: column;
           flex-direction: column;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
 }
 
 .ember-light-table .lt-column {
@@ -59,24 +59,16 @@
 .ember-light-table .lt-scrollable {
   width: 100%;
   -webkit-box-flex: 1;
-      -ms-flex: 1 0 auto;
-          flex: 1 0 auto;
+      -ms-flex: 1 1 auto;
+          flex: 1 1 auto;
 }
 
 .ember-light-table .lt-scrollable.vertical-collection {
   overflow-y: auto;
 }
 
-/* This is for when useVirtualScrollbar is disabled */
-.ember-light-table.occlusion .lt-head-wrap {
-  padding-right: 14px;
-}
-
-.ember-light-table.occlusion .lt-head-wrap table {
-  display: inline
-}
-
 .ember-light-table vertical-collection {
+  width: 100%;
   display: table;
   table-layout: fixed;
 }

addon/templates/components/lt-body.hbs

@@ -62,7 +62,7 @@
       <div id={{concat tableId '_inline_foot'}} class="lt-inline lt-foot"></div>
     {{/lt-scrollable}}
   {{else}}
-    <div class="lt-scrollable tse-scrollable vertical-collection" style="{{html-safe (concat 'height:' height 'px')}}">
+    <div class="lt-scrollable tse-scrollable vertical-collection">
       <div id="{{concat tableId '_inline_head'}}" class="lt-inline lt-head"></div>
 
       <table class={{tableClassNames}}>

tests/dummy/app/components/cookbook/occluded-table.js

@@ -22,16 +22,13 @@ export default Component.extend(TableCommon, {
       width: '150px'
     }, {
       label: 'Address',
-      valuePath: 'address',
-      width: '150px'
+      valuePath: 'address'
     }, {
       label: 'State',
-      valuePath: 'state',
-      width: '100px'
+      valuePath: 'state'
     }, {
       label: 'Country',
-      valuePath: 'country',
-      width: '100px'
+      valuePath: 'country'
     }];
   }),
 

tests/dummy/app/templates/components/cookbook/occluded-table.hbs

@@ -26,5 +26,9 @@
       {{/body.loader}}
     {{/if}}
   {{/t.body}}
+
+  {{t.foot
+    fixed=true
+  }}
 {{/light-table}}
 {{!-- END-SNIPPET --}}