Merge pull request #421 from buschtoens/body-scaffolding

lt-body: add enableScaffolding option

addon/components/cells/base.js

@@ -24,10 +24,18 @@ const Cell = Component.extend({
   attributeBindings: ['style'],
   classNameBindings: ['align', 'isSorted', 'column.cellClassNames'],
 
+  enableScaffolding: false,
+
   isSorted: computed.readOnly('column.sorted'),
 
-  style: computed('column.width', function() {
-    return cssStyleify(this.get('column').getProperties(['width']));
+  style: computed('enableScaffolding', 'column.width', function() {
+    let column = this.get('column');
+
+    if (this.get('enableScaffolding') || !column) {
+      return '';
+    }
+
+    return cssStyleify(column.getProperties(['width']));
   }),
 
   align: computed('column.align', function() {

addon/components/lt-body.js

@@ -162,6 +162,21 @@ export default Component.extend({
    */
   overwrite: false,
 
+  /**
+   * If true, the body will prepend an invisible `<tr>` that scaffolds the
+   * widths of the table cells.
+   *
+   * ember-light-table uses [`table-layout: fixed`](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout).
+   * This means, that the widths of the columns are defined by the first row
+   * only. By prepending this scaffolding row, widths of columns only need to
+   * be specified once.
+   *
+   * @property enableScaffolding
+   * @type {Boolean}
+   * @default false
+   */
+  enableScaffolding: false,
+
   /**
    * ID of main table component. Used to generate divs for ember-wormhole
    *

addon/templates/components/lt-body.hbs

@@ -15,6 +15,14 @@
 
     <table class={{tableClassNames}}>
       <tbody class="lt-body">
+        {{#if enableScaffolding}}
+          <tr class="lt-scaffolding-row">
+            {{#each columns as |column|}}
+              <td style={{html-safe (if column.width (concat 'width: ' column.width))}} class="lt-scaffolding"></td>
+            {{/each}}
+          </tr>
+        {{/if}}
+
         {{#if overwrite}}
           {{yield columns rows}}
         {{else}}
@@ -23,6 +31,7 @@
               data-row-id=row.rowId
               table=table
               tableActions=tableActions
+              enableScaffolding=enableScaffolding
               canExpand=canExpand
               canSelect=canSelect
               click=(action 'onRowClick' row)

tests/integration/components/lt-body-test.js

@@ -191,6 +191,44 @@ test('hidden rows', function(assert) {
   assert.equal(this.$('tbody > tr').length, 4);
 });
 
+test('scaffolding', function(assert) {
+  const users = createUsers(1);
+  this.set('table', new Table(Columns, users));
+
+  this.render(hbs `{{lt-body table=table sharedOptions=sharedOptions enableScaffolding=true}}`);
+
+  const scaffoldingRow = this.$('tr:eq(0)');
+  const userRow = this.$('tr:eq(1)');
+  const userCells = userRow.children('.lt-cell');
+
+  assert.ok(
+    scaffoldingRow.hasClass('lt-scaffolding-row'),
+    'the first row of the <tbody> is a scaffolding row'
+  );
+  assert.ok(
+    !userRow.hasClass('lt-scaffolding-row'),
+    'the second row of the <tbody> is not a scaffolding row'
+  );
+
+  assert.equal(
+    userRow.attr('style'),
+    null,
+    'the second row of the <tbody> has no `style` attribute'
+  );
+
+  assert.ok(
+    Columns
+      .map((c, i) => {
+        const configuredWidth = Number.parseInt(c.width, 10);
+        const actualWidth = userCells.eq(i).width();
+
+        return configuredWidth ? configuredWidth === actualWidth : true;
+      })
+      .every(Boolean),
+    'the first actual data row has the correct widths'
+  );
+});
+
 test('overwrite', function(assert) {
   this.set('table', new Table(Columns, createUsers(5)));