diff --git a/addon/components/lt-column-resizer.js b/addon/components/lt-column-resizer.js index 3b5b0c57..5bba7257 100644 --- a/addon/components/lt-column-resizer.js +++ b/addon/components/lt-column-resizer.js @@ -90,9 +90,17 @@ export default Component.extend({ let index = this.get('table.visibleColumns').indexOf(this.get('column')) + 1; let table = closest(this.get('element'), TOP_LEVEL_CLASS); - column.width = width; - table.querySelector(`thead td.lt-scaffolding:nth-child(${index})`).style.width = width; - table.querySelector(`tfoot td.lt-scaffolding:nth-child(${index})`).style.width = width; + column.style.width = width; + const headerScaffoldingCell = table.querySelector(`thead td.lt-scaffolding:nth-child(${index})`); + if (headerScaffoldingCell) { + headerScaffoldingCell.style.width = width; + } + + const footerScaffoldingCell = table.querySelector(`tfoot td.lt-scaffolding:nth-child(${index})`); + if (footerScaffoldingCell) { + footerScaffoldingCell.style.width = width; + } + if (resizeOnDrag) { let cols = table.querySelectorAll(`tbody td:nth-child(${index})`); cols.forEach((col) => { diff --git a/addon/components/lt-scaffolding-row.js b/addon/components/lt-scaffolding-row.js new file mode 100644 index 00000000..23b26343 --- /dev/null +++ b/addon/components/lt-scaffolding-row.js @@ -0,0 +1,8 @@ +import Component from '@ember/component'; +import layout from '../templates/components/lt-scaffolding-row'; + +export default Component.extend({ + classNames: ['lt-scaffolding-row'], + layout, + tagName: 'tr' +}); diff --git a/addon/templates/components/lt-foot.hbs b/addon/templates/components/lt-foot.hbs index 8eb6f273..19a49c94 100644 --- a/addon/templates/components/lt-foot.hbs +++ b/addon/templates/components/lt-foot.hbs @@ -2,13 +2,7 @@
- {{! template-lint-enable no-inline-styles }} - {{/each}} - |
- {{! template-lint-enable no-inline-styles }} - {{/each}} - |
+ {{! template-lint-enable no-inline-styles }} +{{/each}} \ No newline at end of file diff --git a/app/components/lt-scaffolding-row.js b/app/components/lt-scaffolding-row.js new file mode 100644 index 00000000..3174d123 --- /dev/null +++ b/app/components/lt-scaffolding-row.js @@ -0,0 +1 @@ +export { default } from 'ember-light-table/components/lt-scaffolding-row'; diff --git a/tests/integration/components/lt-scaffolding-row-test.js b/tests/integration/components/lt-scaffolding-row-test.js new file mode 100644 index 00000000..da824e37 --- /dev/null +++ b/tests/integration/components/lt-scaffolding-row-test.js @@ -0,0 +1,48 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render, find, findAll } from '@ember/test-helpers'; +import hbs from 'htmlbars-inline-precompile'; + +module('Integration | Component | lt-scaffolding-row', function(hooks) { + setupRenderingTest(hooks); + + test('it has lt-scaffolding-row class', async function(assert) { + await render(hbs`{{lt-scaffolding-row}}`); + assert.ok(find('.lt-scaffolding-row')); + }); + + test('it renders |
for each column', async function(assert) { + const columns = [{ + label: 'Avatar', + valuePath: 'avatar', + width: '60px', + sortable: false, + cellComponent: 'user-avatar' + }, { + label: 'First Name', + valuePath: 'firstName', + width: '150px' + }, { + label: 'Last Name', + valuePath: 'lastName', + width: '150px' + }, { + label: 'Address', + valuePath: 'address' + }, { + label: 'State', + valuePath: 'state' + }, { + label: 'Country', + valuePath: 'country' + }]; + this.set('columns', columns); + await render(hbs`{{lt-scaffolding-row columns=columns}}`); + assert.equal(findAll('td').length, columns.length); + }); +}); |