diff --git a/addon/-private/column-tree.js b/addon/-private/column-tree.js index 483d7a638..c1e04a8e2 100644 --- a/addon/-private/column-tree.js +++ b/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); } } }; diff --git a/addon/components/ember-thead/component.js b/addon/components/ember-thead/component.js index 5a54f2ffa..32dd5c9e4 100644 --- a/addon/components/ember-thead/component.js +++ b/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'); diff --git a/tests/dummy/app/pods/docs/guides/header/size-constraints/template.md b/tests/dummy/app/pods/docs/guides/header/size-constraints/template.md index 62fa7a17a..cf956ed1c 100644 --- a/tests/dummy/app/pods/docs/guides/header/size-constraints/template.md +++ b/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}} +
@@ -99,6 +105,7 @@ constraint. The options are: @widthConstraint='eq-container' @resizeMode='fluid' @fillMode={{fillMode}} + @fillColumnIndex=1 /> diff --git a/tests/helpers/generate-table.js b/tests/helpers/generate-table.js index bf449effa..f9a093dd1 100644 --- a/tests/helpers/generate-table.js +++ b/tests/helpers/generate-table.js @@ -18,6 +18,8 @@ const fullTable = hbs` enableResize=enableResize enableReorder=enableReorder widthConstraint=widthConstraint + fillColumnIndex=fillColumnIndex + onUpdateSorts="onUpdateSorts" onReorder="onReorder" diff --git a/tests/integration/components/headers/main-test.js b/tests/integration/components/headers/main-test.js index 0bc9e32d1..f40900194 100644 --- a/tests/integration/components/headers/main-test.js +++ b/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.' ); }); });