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,28 @@ const ColumnTreeNode = EmberObject.extend({
       get(this, 'column.subcolumns').map(column => ColumnTreeNode.create({ column, tree, parent }))
     );
 
+    let widthConstraint = tree.get('widthConstraint');
+
+    if (
+      (widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER_SLACK ||
+        widthConstraint === WIDTH_CONSTRAINT.GTE_CONTAINER_SLACK) &&
+      get(this, 'isRoot')
+    ) {
+      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 +340,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 +378,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;
       }
 
@@ -624,42 +653,68 @@ export default EmberObject.extend({
     this._isSorting = false;
   },
 
-  ensureWidthConstraint() {
+  ensureWidthConstraint(isInitialRun = false) {
     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');
 
+    // excludes slack column
+    let contentWidth = columns.reduce((sum, column) => {
+      return column.get('isSlack') ? sum : sum + column.get('width');
+    }, 0);
+
     let widthConstraint = get(this, 'widthConstraint');
-    let fillMode = get(this, 'fillMode');
-    let fillColumnIndex = get(this, 'fillColumnIndex');
+
+    let isSlackEnabled =
+      widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER_SLACK ||
+      widthConstraint === WIDTH_CONSTRAINT.GTE_CONTAINER_SLACK;
+
+    let delta = containerWidth - contentWidth;
+
+    // allocate slack before fill, unless this is very first run
+    if (isSlackEnabled && !isInitialRun) {
+      let slackColumn = columns.findBy('isSlack');
+      slackColumn.set('width', Math.max(delta, 0));
+    }
 
     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;
+      let fillMode =
+        isSlackEnabled && isInitialRun ? get(this, 'initialFillMode') : get(this, 'fillMode');
 
       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 lastColumnIndex = isSlackEnabled ? 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);
       }
     }
+
+    if (isSlackEnabled && isInitialRun) {
+      // initial layout complete; run again to fill excess space with slack
+      this.ensureWidthConstraint();
+    }
   },
 
   resizeColumn(index, delta) {

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,13 @@ export default Component.extend({
   columnMeta: null,
   columnValue: null,
 
+  attributeBindings: ['isSlack: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'),
 
   /**
    Indicates the text alignment of this cell
@@ -52,6 +54,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, this.fillupHandler, true);
 
     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,7 +281,8 @@ export default Component.extend({
       return;
     }
     this._updateColumnTree();
-    scheduleOnce('actions', this, this.fillupHandler);
+
+    scheduleOnce('actions', this, this.fillupHandler, true);
   },
 
   didInsertElement() {
@@ -333,11 +347,11 @@ export default Component.extend({
     this.onUpdateSorts?.(newSorts);
   },
 
-  fillupHandler() {
+  fillupHandler(isInitialRun = false) {
     if (this.isDestroying) {
       return;
     }
 
-    this.get('columnTree').ensureWidthConstraint();
+    this.get('columnTree').ensureWidthConstraint(isInitialRun);
   },
 });

tests/dummy/app/pods/docs/guides/header/size-constraints/controller.js

@@ -1,14 +1,39 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember/object';
+import { addObserver } from '@ember/object/observers'; // eslint-disable-line no-restricted-imports
 import { generateRows } from '../../../../../utils/generators';
 
+const defaultResizeMode = {
+  'eq-container': 'fluid',
+  'eq-container-slack': 'standard',
+  'gte-container': 'standard',
+  'gte-container-slack': 'standard',
+  'lte-container': 'standard',
+};
+
 export default Controller.extend({
   rows: computed(function() {
     return generateRows(100);
   }),
 
   widthConstraint: 'eq-container',
   fillMode: 'equal-column',
+  resizeMode: 'fluid',
+
+  init() {
+    this._super(...arguments);
+
+    addObserver(this, 'widthConstraint', this.setDefaultResizeMode);
+  },
+
+  setDefaultResizeMode() {
+    let widthConstraint = this.get('widthConstraint');
+    let resizeMode = defaultResizeMode[widthConstraint];
+
+    if (resizeMode) {
+      this.set('resizeMode', resizeMode);
+    }
+  },
 
   // BEGIN-SNIPPET docs-example-header-size-constraints.js
   columns: computed(function() {