From 6cb79921bd2573d5474f5481833d60b5dea10964 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Buscht=C3=B6ns?= <buschtoens@gmail.com>
Date: Thu, 8 Jun 2017 09:52:07 +0200
Subject: [PATCH 1/2] lt-body: add enableScaffolding option

Also removes the style attribute binding from cells/base, if enabled.

Also fixes #404.
---
 addon/components/cells/base.js         | 12 ++++++++++--
 addon/components/lt-body.js            | 15 +++++++++++++++
 addon/templates/components/lt-body.hbs |  9 +++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/addon/components/cells/base.js b/addon/components/cells/base.js
index cc819b29..a3243bd0 100644
--- a/addon/components/cells/base.js
+++ b/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() {
diff --git a/addon/components/lt-body.js b/addon/components/lt-body.js
index 47d2e852..b0e00ce9 100644
--- a/addon/components/lt-body.js
+++ b/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
    *
diff --git a/addon/templates/components/lt-body.hbs b/addon/templates/components/lt-body.hbs
index 58bc4dfe..e3400aaf 100644
--- a/addon/templates/components/lt-body.hbs
+++ b/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)

From d79382f5eaad931c1dc84c695f658c690896acc8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Buscht=C3=B6ns?= <buschtoens@gmail.com>
Date: Fri, 23 Jun 2017 13:48:57 +0200
Subject: [PATCH 2/2] tests/lt-body: add tests for scaffolding

---
 tests/integration/components/lt-body-test.js | 38 ++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/tests/integration/components/lt-body-test.js b/tests/integration/components/lt-body-test.js
index 41b25dea..fa76be68 100644
--- a/tests/integration/components/lt-body-test.js
+++ b/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)));