enable fillMode to support an nth-column option

addon/-private/column-tree.js

@@ -33,6 +33,7 @@ export const FILL_MODE = {
   EQUAL_COLUMN: 'equal-column',
   FIRST_COLUMN: 'first-column',
   LAST_COLUMN: 'last-column',
+  NTH_COLUMN: 'nth-column',
 };
 
 export const WIDTH_CONSTRAINT = {
@@ -660,6 +661,7 @@ export default class ColumnTree extends EmberObject {
 
     let widthConstraint = get(this, 'widthConstraint');
     let fillMode = get(this, 'fillMode');
+    let fillColumnIndex = get(this, 'fillColumnIndex');
 
     if (
       (widthConstraint === WIDTH_CONSTRAINT.EQ_CONTAINER && treeWidth !== containerWidth) ||
@@ -678,6 +680,17 @@ export default class ColumnTree extends EmberObject {
         let oldWidth = get(columns, 'lastObject.width');
 
         set(columns, 'lastObject.width', oldWidth + delta);
+      } else if (fillMode === FILL_MODE.NTH_COLUMN) {
+        assert("fillMode 'nth-column' must have a fillColumnIndex defined", fillColumnIndex);
+
+        let fillColumn = columns[fillColumnIndex];
+        assert(
+          `Invalid fillColumnIndex, ${fillColumnIndex}, for a table with ${columns.length} columns`,
+          fillColumn
+        );
+
+        let oldWidth = get(fillColumn, 'width');
+        set(fillColumn, 'width', oldWidth + delta);
       }
     }
   };

addon/components/ember-thead/component.js

@@ -110,11 +110,20 @@ export default class EmberTHead extends Component {
     * "equal-column": extra space is distributed equally among all columns
     * "first-column": extra space is added into the first column.
     * "last-column": extra space is added into the last column.
+    * "nth-column": extra space is added into the column defined by `fillColumnIndex`.
   */
   @argument({ defaultIfUndefined: true })
   @type('string')
   fillMode = FILL_MODE.EQUAL_COLUMN;
 
+  /**
+    A configuration that controls how which column shinks (or extends) when `fillMode` is
+    'nth-column'. This is zero indexed.
+  */
+  @argument
+  @type(optional('string'))
+  fillColumnIndex = null;
+
   /**
     Sets a constraint on the table's size, such that it must be greater than, less
     than, or equal to the size of the containing element.
@@ -184,6 +193,7 @@ export default class EmberTHead extends Component {
     this.addObserver('sorts', this._updateColumnTree);
     this.addObserver('columns', this._updateColumnTree);
     this.addObserver('fillMode', this._updateColumnTree);
+    this.addObserver('fillColumnIndex', this._updateColumnTree);
     this.addObserver('resizeMode', this._updateColumnTree);
     this.addObserver('widthConstraint', this._updateColumnTree);
 
@@ -203,6 +213,7 @@ export default class EmberTHead extends Component {
     this.columnTree.set('sorts', this.get('sorts'));
     this.columnTree.set('columns', this.get('columns'));
     this.columnTree.set('fillMode', this.get('fillMode'));
+    this.columnTree.set('fillColumnIndex', this.get('fillColumnIndex'));
     this.columnTree.set('resizeMode', this.get('resizeMode'));
     this.columnTree.set('widthConstraint', this.get('widthConstraint'));
 
@@ -238,7 +249,7 @@ export default class EmberTHead extends Component {
   @notEmpty('onUpdateSorts')
   enableSort;
 
-  @computed('columnTree.rows.[]', 'sorts.[]', 'headerActions.[]', 'fillMode')
+  @computed('columnTree.rows.[]', 'sorts.[]', 'headerActions.[]', 'fillMode', 'fillColumnIndex')
   get wrappedRows() {
     let rows = this.get('columnTree.rows');
     let sorts = this.get('sorts');

tests/dummy/app/pods/docs/guides/header/size-constraints/template.md

@@ -73,6 +73,8 @@ constraint. The options are:
 
 * `last-column`: Puts the delta in the first column
 
+* `nth-column`: Puts the delta in the nth column as defined by `fillColumnIndex`
+
 {{#docs-demo as |demo|}}
   {{#demo.example name='docs-example-header-fill-mode'}}
     {{! BEGIN-SNIPPET docs-example-header-fill-mode.hbs }}
@@ -91,6 +93,10 @@ constraint. The options are:
       {{radio-button name='fill-mode' value='last-column' groupValue=fillMode}}
     </label>
 
+    <label>
+      nth-column
+      {{radio-button name='fill-mode' value='nth-column' groupValue=fillMode}}
+    </label>
 
     <div class="resize-container">
       <EmberTable as |t|>
@@ -99,6 +105,7 @@ constraint. The options are:
           @widthConstraint='eq-container'
           @resizeMode='fluid'
           @fillMode={{fillMode}}
+          @fillColumnIndex=1
         />
 
         <t.body @rows={{rows}} />

tests/helpers/generate-table.js

@@ -18,6 +18,8 @@ const fullTable = hbs`
         enableResize=enableResize
         enableReorder=enableReorder
         widthConstraint=widthConstraint
+        fillColumnIndex=fillColumnIndex
+
 
         onUpdateSorts="onUpdateSorts"
         onReorder="onReorder"

tests/integration/components/headers/main-test.js

@@ -140,12 +140,44 @@ module('Integration | header | main', function() {
 
       assert.ok(
         Math.abs(tableWidth - lastColumnWidth - columnWidth) <= 1,
-        'First column takes extra space in first column resize mode.'
+        'Last column takes extra space in last column resize mode.'
       );
 
       assert.ok(
         Math.abs(table.headers.objectAt(0).width - columnWidth) <= 0,
-        'Other columns keep same width in first column resize mode.'
+        'Other columns keep same width in last column resize mode.'
+      );
+    });
+
+    test('nth column mode', async function(assert) {
+      let columnWidth = 30;
+
+      await generateTable(this, {
+        fillMode: 'nth-column',
+        fillColumnIndex: '1',
+        widthConstraint: 'eq-container',
+        columnCount: 3,
+        columnOptions: {
+          width: columnWidth,
+        },
+      });
+
+      let tableWidth = table.width;
+      let middleColumnWidth = table.headers.objectAt(1).width;
+
+      assert.ok(
+        Math.abs(table.headers.objectAt(0).width - columnWidth) <= 0,
+        'First column keeps same width in nth column resize mode.'
+      );
+
+      assert.ok(
+        Math.abs(table.headers.objectAt(2).width - columnWidth) <= 0,
+        'Last column keeps same width in nth column resize mode.'
+      );
+
+      assert.ok(
+        Math.abs(tableWidth - middleColumnWidth - 2 * columnWidth) <= 1,
+        'nth column takes extra space in nth column resize mode.'
       );
     });
   });