light-table: add extra property

addon/components/cells/base.js

@@ -66,6 +66,12 @@ const Cell = Component.extend({
    */
   tableActions: null,
 
+  /**
+   * @property extra
+   * @type {Object}
+   */
+  extra: null,
+
   /**
    * @property rawValue
    * @type {Mixed}

addon/components/columns/base.js

@@ -66,6 +66,12 @@ const Column = Component.extend(DraggableColumnMixin, {
    */
   tableActions: null,
 
+  /**
+   * @property extra
+   * @type {Object}
+   */
+  extra: null,
+
   /**
    * @property sortIcons
    * @type {Object}

addon/components/light-table.js

@@ -56,7 +56,7 @@ const LightTable = Component.extend({
   table: null,
 
   /**
-   * This is used to propate custom user defined actions to custom cell and header components.
+   * This is used to propagate custom user defined actions to custom cell and header components.
    * As an example, lets say I have a table with a column defined with `cellComponent: 'delete-user'`
    *
    * ```hbs
@@ -82,6 +82,34 @@ const LightTable = Component.extend({
    */
   tableActions: null,
 
+  /**
+   * Object to store any arbitrary configuration meant to be used by custom
+   * components.
+   *
+   * ```hbs
+   * {{#light-table table
+   *   extra=(hash
+   *     highlightColor="yellow"
+   *    )
+   *    as |t|
+   *  }}
+   *   {{t.head}}
+   *   {{t.body}}
+   *   {{t.foot}}
+   * {{/light-table}}
+   * ```
+   *
+   * Now in all custom components, you can access this value like so:
+   *
+   * ```hbs
+   * <span style="background: {{extra.highlightColor}}">{{value}}<span>
+   * ```
+   *
+   * @property extra
+   * @type {Object}
+   */
+  extra: null,
+
   /**
    * Table height.
    *

addon/components/lt-body.js

@@ -64,6 +64,12 @@ export default Component.extend({
    */
   tableActions: null,
 
+  /**
+   * @property extra
+   * @type {Object}
+   */
+  extra: null,
+
   /**
    * Allows a user to select a row on click. All this will do is apply the necessary
    * CSS classes and add the row to `table.selectedRows`. If `multiSelect` is disabled

addon/components/lt-row.js

@@ -16,6 +16,7 @@ const Row = Component.extend({
   columns: null,
   row: null,
   tableActions: null,
+  extra: null,
   canExpand: false,
   canSelect: false,
   colspan: 1,

addon/mixins/table-header.js

@@ -38,6 +38,12 @@ export default Mixin.create({
    */
   tableActions: null,
 
+  /**
+   * @property extra
+   * @type {Object}
+   */
+  extra: null,
+
   /**
    * @property fixed
    * @type {Boolean}

addon/templates/components/cells/base.hbs

@@ -1,5 +1,5 @@
 {{#if column.cellComponent}}
-  {{component column.cellComponent tableActions=tableActions table=table column=column row=row value=value rawValue=rawValue}}
+  {{component column.cellComponent tableActions=tableActions extra=extra table=table column=column row=row value=value rawValue=rawValue}}
 {{else}}
   {{value}}
 {{/if}}

addon/templates/components/columns/base.hbs

@@ -1,5 +1,5 @@
 {{#if column.component}}
-  {{component column.component column=column table=table tableActions=tableActions sortIcons=sortIcons}}
+  {{component column.component column=column table=table tableActions=tableActions extra=extra sortIcons=sortIcons}}
 {{else}}
   {{label}}
   {{#if column.sorted}}

addon/templates/components/light-table.hbs

@@ -1,23 +1,26 @@
 {{yield (hash
-  head=(component 'lt-head' 
-    tableId=elementId 
-    table=table 
-    tableActions=tableActions 
-    tableClassNames=tableClassNames 
+  head=(component 'lt-head'
+    tableId=elementId
+    table=table
+    tableActions=tableActions
+    extra=extra
+    tableClassNames=tableClassNames
     sharedOptions=sharedOptions
   )
-  body=(component 'lt-body' 
-    tableId=elementId 
-    table=table 
-    tableActions=tableActions 
-    tableClassNames=tableClassNames 
+  body=(component 'lt-body'
+    tableId=elementId
+    table=table
+    tableActions=tableActions
+    extra=extra
+    tableClassNames=tableClassNames
     sharedOptions=sharedOptions
   )
-  foot=(component 'lt-foot' 
-    tableId=elementId 
-    table=table 
-    tableActions=tableActions 
-    tableClassNames=tableClassNames 
+  foot=(component 'lt-foot'
+    tableId=elementId
+    table=table
+    tableActions=tableActions
+    extra=extra
+    tableClassNames=tableClassNames
     sharedOptions=sharedOptions
   )
 )}}

addon/templates/components/lt-body.hbs

@@ -31,6 +31,7 @@
               data-row-id=row.rowId
               table=table
               tableActions=tableActions
+              extra=extra
               enableScaffolding=enableScaffolding
               canExpand=canExpand
               canSelect=canSelect

addon/templates/components/lt-foot.hbs

@@ -15,6 +15,7 @@
             {{component (concat 'light-table/columns/' column.type) column
               table=table
               tableActions=tableActions
+              extra=extra
               sortIcons=sortIcons
               resizeOnDrag=resizeOnDrag
               click=(action 'onColumnClick' column)

addon/templates/components/lt-head.hbs

@@ -21,6 +21,7 @@
             {{component (concat 'light-table/columns/' column.type) column
               table=table
               tableActions=tableActions
+              extra=extra
               sortIcons=sortIcons
               resizeOnDrag=resizeOnDrag
               click=(action 'onColumnClick' column)
@@ -38,6 +39,7 @@
               rowspan=1
               classNames="lt-sub-column"
               tableActions=tableActions
+              extra=extra
               sortIcons=sortIcons
               resizeOnDrag=resizeOnDrag
               click=(action 'onColumnClick' column)

addon/templates/components/lt-row.hbs

@@ -2,5 +2,7 @@
   {{component (concat 'light-table/cells/' column.cellType) column row
     table=table
     rawValue=(get row column.valuePath)
-    tableActions=tableActions}}
+    tableActions=tableActions
+    extra=extra
+  }}
 {{/each}}

tests/integration/components/light-table-test.js

@@ -1,4 +1,4 @@
-import { findAll, find, scrollTo } from 'ember-native-dom-helpers';
+import { findAll, find, scrollTo, click } from 'ember-native-dom-helpers';
 import { moduleForComponent, test } from 'ember-qunit';
 import { skip } from 'qunit';
 import hbs from 'htmlbars-inline-precompile';
@@ -10,6 +10,8 @@ import RowComponent from 'ember-light-table/components/lt-row';
 import { register } from 'ember-owner-test-utils/test-support/register';
 import Ember from 'ember';
 
+const { Component, get } = Ember;
+
 moduleForComponent('light-table', 'Integration | Component | light table', {
   integration: true,
   setup() {
@@ -210,3 +212,45 @@ test('onScroll', async function(assert) {
 
   await scrollTo('.tse-scroll-content', 0, expectedScroll);
 });
+
+test('extra data and tableActions', async function(assert) {
+  assert.expect(4);
+
+  register(this, 'component:some-component', Component.extend({
+    classNames: 'some-component',
+    didReceiveAttrs() {
+      assert.equal(get(this, 'extra.someData'), 'someValue', 'extra data is passed');
+    },
+    click() {
+      get(this, 'tableActions.someAction')();
+    }
+  }));
+
+  const columns = [{
+    component: 'some-component',
+    cellComponent: 'some-component'
+  }];
+
+  this.set('table', new Table(columns, [{}]));
+
+  this.on('someAction', () => {
+    assert.ok(true, 'table action is passed');
+  });
+
+  this.render(hbs `
+    {{#light-table table
+      extra=(hash someData="someValue")
+      tableActions=(hash
+        someAction=(action "someAction")
+      )
+      as |t|
+    }}
+      {{t.head}}
+      {{t.body}}
+    {{/light-table}}
+  `);
+
+  for (const element of findAll('.some-component')) {
+    await click(element);
+  }
+});