Add "slack" width constraint modes

addon-test-support/pages/-private/ember-table-body.js

@@ -37,7 +37,7 @@ export default PageObject.extend({
       List of all cells for the selected row.
     */
     cells: collection({
-      scope: 'td',
+      scope: 'td:not([data-test-ember-table-slack])',
 
       doubleClick: triggerable('dblclick'),
     }),

addon-test-support/pages/-private/ember-table-footer.js

@@ -5,6 +5,6 @@ export default EmberTableBody.extend({
   scope: 'tfoot',
 
   footers: collection({
-    scope: 'td',
+    scope: 'td:not([data-test-ember-table-slack])',
   }),
 });

addon-test-support/pages/-private/ember-table-header.js

@@ -133,7 +133,12 @@ export default {
   /**
    * List of columns in the header.
    */
-  headers: collection('th', Header),
+  headers: collection('th:not([data-test-ember-table-slack])', Header),
+
+  /**
+   * List of columns in the header, excluding slack column if present.
+   */
+  contentHeaders: collection('th:not([data-test-ember-table-slack])', Header),
 
   /**
     Returns the height of the entire thead element.
@@ -149,6 +154,10 @@ export default {
     return Number(findElement(this).getAttribute('data-test-row-count'));
   },
 
+  get slackHeader() {
+    return findElement(this, '[data-test-ember-table-slack]');
+  },
+
   rows: collection({
     scope: 'tr',
   }),

addon-test-support/pages/ember-table.js

@@ -31,6 +31,7 @@ export default PageObject.extend({
   getCell: alias('body.getCell'),
 
   headers: alias('header.headers'),
+  slackHeader: alias('header.slackHeader'),
   footers: alias('footer.footers'),
 
   /**

addon/-private/column-tree.js

@@ -41,7 +41,9 @@ export const FILL_MODE = {
 export const WIDTH_CONSTRAINT = {
   NONE: 'none',
   EQ_CONTAINER: 'eq-container',
+  EQ_CONTAINER_SLACK: 'eq-container-slack',
   GTE_CONTAINER: 'gte-container',
+  GTE_CONTAINER_SLACK: 'gte-container-slack',
   LTE_CONTAINER: 'lte-container',
 };
 
@@ -81,6 +83,8 @@ const TableColumnMeta = EmberObject.extend({
 
   isReorderable: readOnly('_node.isReorderable'),
 
+  isSlack: readOnly('_node.isSlack'),
+
   width: readOnly('_node.width'),
 
   offsetLeft: readOnly('_node.offsetLeft'),
@@ -148,6 +152,8 @@ const TableColumnMeta = EmberObject.extend({
 const ColumnTreeNode = EmberObject.extend({
   _subcolumnNodes: null,
 
+  isSlack: false,
+
   init() {
     this._super(...arguments);
 
@@ -200,7 +206,7 @@ const ColumnTreeNode = EmberObject.extend({
     }
   },
 
-  subcolumnNodes: computed('column.subcolumns.[]', function() {
+  subcolumnNodes: computed('column.subcolumns.[]', 'tree.widthConstraint', function() {
     this.cleanSubcolumnNodes();
 
     if (get(this, 'isLeaf')) {
@@ -214,6 +220,25 @@ const ColumnTreeNode = EmberObject.extend({
       get(this, 'column.subcolumns').map(column => ColumnTreeNode.create({ column, tree, parent }))
     );
 
+    let isRoot = get(this, 'isRoot');
+    let isSlackModeEnabled = get(tree, 'isSlackModeEnabled');
+
+    if (isRoot && isSlackModeEnabled) {
+      let slackColumnNode = ColumnTreeNode.create({
+        column: {
+          isResizable: false,
+          isReorderable: false,
+          minWidth: 0,
+          width: 0,
+        },
+        tree,
+        parent,
+        isSlack: true,
+      });
+
+      this._subcolumnNodes.push(slackColumnNode);
+    }
+
     return this._subcolumnNodes;
   }),
 
@@ -312,7 +337,7 @@ const ColumnTreeNode = EmberObject.extend({
     }, 0);
   }),
 
-  maxWidth: computed('column.minWidth', function() {
+  maxWidth: computed('column.maxWidth', function() {
     if (get(this, 'isLeaf')) {
       let columnMaxWidth = get(this, 'column.maxWidth');
 
@@ -350,8 +375,9 @@ const ColumnTreeNode = EmberObject.extend({
     set(key, newWidth) {
       let oldWidth = get(this, 'width');
       let isResizable = get(this, 'isResizable');
+      let isSlack = get(this, 'isSlack');
 
-      if (!isResizable) {
+      if (!isResizable && !isSlack) {
         return oldWidth;
       }
 
@@ -438,6 +464,12 @@ const ColumnTreeNode = EmberObject.extend({
     },
   }),
 
+  contentWidth: computed('subcolumnNodes.@each.{isSlack,width}', function() {
+    return this.get('subcolumnNodes').reduce((sum, column) => {
+      return column.get('isSlack') ? sum : sum + column.get('width');
+    }, 0);
+  }),
+
   offsetIndex: computed('parent.{offsetIndex,subcolumnNodes.[]}', function() {
     let parent = get(this, 'parent');
 
@@ -588,6 +620,14 @@ export default EmberObject.extend({
     return { containerLeft, containerRight };
   }),
 
+  isSlackModeEnabled: computed('widthConstraint', function() {
+    let widthConstraint = get(this, 'widthConstraint');
+    return (
+      widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER_SLACK ||
+      widthConstraint === WIDTH_CONSTRAINT.GTE_CONTAINER_SLACK
+    );
+  }),
+
   sortColumnsByFixed() {
     // disable observer
     if (this._isSorting) {
@@ -624,39 +664,104 @@ export default EmberObject.extend({
     this._isSorting = false;
   },
 
+  /**
+    Performs initial sizing of the table columns according to tree's
+    `initialFillMode` property, then attempts to satisfy width constraint.
+
+    In `eq-container-slack` and `gte-container-slack` width contraint modes,
+    this allows a default layout to be applied before slack is allocated.
+  */
+  performInitialLayout() {
+    if (!this.container) {
+      return;
+    }
+
+    let isSlackModeEnabled = get(this, 'isSlackModeEnabled');
+    let initialFillMode = get(this, 'initialFillMode');
+
+    if (isSlackModeEnabled && initialFillMode) {
+      this.applyFillMode(initialFillMode);
+    }
+
+    this.ensureWidthConstraint();
+  },
+
+  /**
+    Allocates excess whitespace to slack column (if present), then applies
+    tree's `fillMode` in attempt to satisfy its `widthConstraint`.
+   */
   ensureWidthConstraint() {
     if (!this.container) {
       return;
     }
 
-    let containerWidthAdjustment = get(this, 'containerWidthAdjustment') || 0;
-    let containerWidth =
-      getInnerClientRect(this.container).width * this.scale + containerWidthAdjustment;
-    let treeWidth = get(this, 'root.width');
-    let columns = get(this, 'root.subcolumnNodes');
+    let isSlackModeEnabled = get(this, 'isSlackModeEnabled');
+
+    if (isSlackModeEnabled) {
+      this.updateSlackColumn();
+    }
+
+    this.applyFillMode();
+  },
+
+  /**
+    Resizes the slack column to fill excess whitespace in the container. If
+    table columns exceed the width of the container, the slack column is set to
+    a width of zero.
+
+    The slack column is only present when the `widthConstraint` property is set
+    to `eq-container-slack` or `gte-container-slack`.
+  */
+  updateSlackColumn() {
+    let slackColumn = get(this, 'root.subcolumnNodes').findBy('isSlack');
+
+    if (slackColumn) {
+      let containerWidth = this.getContainerWidth();
+      let contentWidth = get(this, 'root.contentWidth');
+      let width = Math.max(containerWidth - contentWidth, 0);
+      slackColumn.set('width', width);
+    }
+  },
+
+  /**
+    Attempts to satisfy tree's width constraint by resizing columns according
+    to the specifid `fillMode`. If no `fillMode` is specified, the tree's
+    own `fillMode` property will be used.
+
+    @param {String} fillMode
+   */
+  applyFillMode(fillMode) {
+    fillMode = fillMode || get(this, 'fillMode');
 
     let widthConstraint = get(this, 'widthConstraint');
-    let fillMode = get(this, 'fillMode');
-    let fillColumnIndex = get(this, 'fillColumnIndex');
+    let containerWidth = this.getContainerWidth();
+    let contentWidth = get(this, 'root.contentWidth');
+    let delta = containerWidth - contentWidth;
 
     if (
-      (widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER && treeWidth !== containerWidth) ||
-      (widthConstraint === WIDTH_CONSTRAINT.LTE_CONTAINER && treeWidth > containerWidth) ||
-      (widthConstraint === WIDTH_CONSTRAINT.GTE_CONTAINER && treeWidth < containerWidth)
+      (widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER && delta !== 0) ||
+      (widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER_SLACK && delta !== 0) ||
+      (widthConstraint === WIDTH_CONSTRAINT.LTE_CONTAINER && delta < 0) ||
+      (widthConstraint === WIDTH_CONSTRAINT.GTE_CONTAINER && delta > 0) ||
+      (widthConstraint === WIDTH_CONSTRAINT.GTE_CONTAINER_SLACK && delta > 0)
     ) {
-      let delta = containerWidth - treeWidth;
-
       if (fillMode === FILL_MODE.EQUAL_COLUMN) {
         set(this, 'root.width', containerWidth);
       } else if (fillMode === FILL_MODE.FIRST_COLUMN) {
         this.resizeColumn(0, delta);
       } else if (fillMode === FILL_MODE.LAST_COLUMN) {
-        this.resizeColumn(columns.length - 1, delta);
+        let isSlackModeEnabled = get(this, 'isSlackModeEnabled');
+        let columns = get(this, 'root.subcolumnNodes');
+        let lastColumnIndex = isSlackModeEnabled ? columns.length - 2 : columns.length - 1;
+        this.resizeColumn(lastColumnIndex, delta);
       } else if (fillMode === FILL_MODE.NTH_COLUMN) {
+        let fillColumnIndex = get(this, 'fillColumnIndex');
+
         assert(
           "fillMode 'nth-column' must have a fillColumnIndex defined",
           !isEmpty(fillColumnIndex)
         );
+
         this.resizeColumn(fillColumnIndex, delta);
       }
     }
@@ -675,6 +780,11 @@ export default EmberObject.extend({
     set(fillColumn, 'width', oldWidth + delta);
   },
 
+  getContainerWidth() {
+    let containerWidthAdjustment = get(this, 'containerWidthAdjustment') || 0;
+    return getInnerClientRect(this.container).width * this.scale + containerWidthAdjustment;
+  },
+
   getReorderBounds(node) {
     let parent = get(node, 'parent');
     let { scale } = this;

addon/components/-private/base-table-cell.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { equal } from '@ember/object/computed';
+import { equal, readOnly } from '@ember/object/computed';
 import { observer } from '../../-private/utils/observer';
 import { scheduleOnce } from '@ember/runloop';
 import { computed } from '@ember/object';
@@ -9,11 +9,18 @@ export default Component.extend({
   columnMeta: null,
   columnValue: null,
 
+  attributeBindings: ['slackAttribute:data-test-ember-table-slack'],
   classNameBindings: ['isFirstColumn', 'isFixedLeft', 'isFixedRight', 'textAlign'],
 
   isFirstColumn: equal('columnMeta.index', 0),
   isFixedLeft: equal('columnMeta.isFixed', 'left'),
   isFixedRight: equal('columnMeta.isFixed', 'right'),
+  isSlack: readOnly('columnMeta.isSlack'),
+
+  // prevents `data-test-ember-table-slack="false"` on non-slack cells in Ember 2.4
+  slackAttribute: computed('isSlack', function() {
+    return this.get('isSlack') ? true : null;
+  }),
 
   /**
    Indicates the text alignment of this cell
@@ -52,6 +59,12 @@ export default Component.extend({
       } else if (this.get('isFixedRight')) {
         this.element.style.right = `${Math.round(this.get('columnMeta.offsetRight'))}px`;
       }
+
+      if (this.get('isSlack')) {
+        this.element.style.paddingLeft = 0;
+        this.element.style.paddingRight = 0;
+        this.element.style.display = width === '0px' ? 'none' : 'table-cell';
+      }
     }
   },
 

addon/components/-private/scroll-indicators/component.js

@@ -147,6 +147,7 @@ export default Component.extend({
   footerRatio: null,
 
   columnTree: readOnly('api.columnTree'),
+  containerWidthAdjustment: readOnly('api.columnTree.containerWidthAdjustment'),
   scrollIndicators: readOnly('api.scrollIndicators'),
   tableScrollId: readOnly('api.tableId'),
 

addon/components/ember-thead/component.js

@@ -135,6 +135,16 @@ export default Component.extend({
   */
   fillMode: defaultTo(FILL_MODE.EQUAL_COLUMN),
 
+  /**
+    Specifies how columns should be sized when the table is initialized. This only affects
+    `eq-container-slack` and `gte-container-slack` width constraint modes. Permitted values are
+    the same as `fillMode`.
+
+    @argument initialFillMode
+    @type string? ('none')
+  */
+  initialFillMode: defaultTo(FILL_MODE.NONE),
+
   /**
     A configuration that controls which column shrinks (or extends) when `fillMode` is
     'nth-column'. This is zero indexed.
@@ -223,6 +233,7 @@ export default Component.extend({
 
     this._updateApi();
     this._updateColumnTree();
+    scheduleOnce('actions', this.columnTree, 'performInitialLayout');
 
     addObserver(this, 'scrollIndicators', this._updateApi);
     addObserver(this, 'reorderFunction', this._updateApi);
@@ -232,6 +243,7 @@ export default Component.extend({
     addObserver(this, 'sorts', this._updateColumnTree);
     addObserver(this, 'columns.[]', this._onColumnsChange);
     addObserver(this, 'fillMode', this._updateColumnTree);
+    addObserver(this, 'initialFillMode', this._updateColumnTree);
     addObserver(this, 'fillColumnIndex', this._updateColumnTree);
     addObserver(this, 'resizeMode', this._updateColumnTree);
     addObserver(this, 'widthConstraint', this._updateColumnTree);
@@ -254,6 +266,7 @@ export default Component.extend({
     this.columnTree.set('sorts', this.get('sorts'));
     this.columnTree.set('columns', this.get('columns'));
     this.columnTree.set('fillMode', this.get('fillMode'));
+    this.columnTree.set('initialFillMode', this.get('initialFillMode'));
     this.columnTree.set('fillColumnIndex', this.get('fillColumnIndex'));
     this.columnTree.set('resizeMode', this.get('resizeMode'));
     this.columnTree.set('widthConstraint', this.get('widthConstraint'));
@@ -268,6 +281,7 @@ export default Component.extend({
       return;
     }
     this._updateColumnTree();
+
     scheduleOnce('actions', this, this.fillupHandler);
   },