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}} +