Merge pull request #108 from MyPureCloud/expandable-rows

Expandable Rows

Author: michaelmcauley

README.md

@@ -108,7 +108,7 @@ For example:
 
 ```css
 .restrict-height {
-  height: 400px;
+  height: 500px;
 }
 ```
 
@@ -250,7 +250,11 @@ For example, here we have two regular columns and a third "profile" column that
 ]
 ```
 
-Custom cell components will automatically be provided with two properties: `columnDef` and `dataRow`. These properties are exactly what they sound like -- the column definition and data row for the cell, respectively.
+Custom cell components will automatically be provided with three properties:
+
+* `columnDef` - the column definition
+* `dataRow` - the object from the `content` array represented by this row
+* `rowExpanded` - a boolean value indicating whether or not the row is expanded (more on this in the [Row Expansion](#row-expansion) section below)
 
 For example, the Handlebars markup for the example `link-to-profile` component could look like this:
 ```handlebars
@@ -577,7 +581,21 @@ Consumers should keep track of which rows are selected by subscribing to `onSele
 
 ### Row Clicking
 For simple row click interaction without showing the row checkbox `onRowClick` should be bound to an action on the owning controller or component.  The bound action will be called whenever the row is clicked.  It receives the following parameter:
-* `clickedRow` (Object) the data object for the row that was clicked. 
+* `clickedRow` (Object) the data object for the row that was clicked.
+
+### Row Expansion
+
+Fixtable has built-in support for expandable rows, for cases where you may desire to show more information than can comfortably fit on a single row. When a row is "expanded," a second, full-width table row is displayed beneath the normal row. In this expanded space, Fixtable will render whatever custom component you specify in the `expandedRowComponent` property. This component will receive the same `dataRow` binding as any custom cell component in the main row (see [Custom Cell Components](#custom-cell-components) above).
+
+To allow for toggling rows between expanded and collapsed state, you should include a component in one of your column definitions that toggles the `rowExpanded` property. Fixtable includes a simple component, `fixtable-row-toggle`, that you can use for this purpose. You can also make a custom component if you need additional logic or prefer a different design. It's also noteworthy that any custom cell component can read and write the `rowExpanded` property, so you can toggle or react to this value in multiple columns if needed.
+
+Because "expanded" rows are actually rendered as two table rows, Fixtable takes some steps to ensure you can still style them as desired. For one thing, any border between the two rows will be removed by default to maintain the illusion of a single row (this can, naturally, be overridden in your own CSS). Fixtable also applies some helpful CSS classes to each row element:
+
+* `fixtable-row-primary` - the primary, multi-column row (rendered from your column definition)
+* `fixtable-row-secondary` - the second, full-width column that renders your `expandedRowComponent`
+* `expanded` - present on both row elements when the dataRow is expanded
+* `hover` - present on both row elements when the user's cursor is hovering over _either_ row element (you should use this class rather than relying on the `:hover` pseudo-class if you want to use hover styles with expanded rows)
+* `active` - present on both row elements if the row is selected (see [Row Selection](#row-selection) above)
 
 ## Development / Contributing
 

addon/components/fixtable-grid.js

@@ -230,9 +230,19 @@ export default Ember.Component.extend({
         sortedFilteredContent = sortedFilteredContent.slice((currentPage - 1) * pageSize, currentPage * pageSize);
       }
 
-      return sortedFilteredContent;
+      return sortedFilteredContent.map(function (rowObject) {
+          return {
+              object: rowObject,
+              hover: false,
+              expanded: false
+          };
+      });
     }),
 
+  totalColumns: Ember.computed('columns.[]', 'rowSelection', function fixtableGrid$totalColumns() {
+    return this.get('columns').length + (this.get('rowSelection') ? 1 : 0);
+  }),
+
   totalRows: Ember.computed('sortedFilteredContent.[]', 'serverPaging', 'totalRowsOnServer',
     function fixtableGrid$totalRows() {
       if (this.get('serverPaging')) {
@@ -316,7 +326,7 @@ export default Ember.Component.extend({
   notifyRowSelectionChanged(selectedDataRows) {
     let handler = this.get('onSelectionChanged');
     if (typeof handler === 'function') {
-      handler(selectedDataRows);
+      handler(selectedDataRows.map((row) => {return row.object;}));
     }
   },
 

addon/components/fixtable-row-toggle.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import layout from '../templates/components/fixtable-row-toggle';
+
+export default Ember.Component.extend({
+  layout,
+  classNames: ['fixtable-row-toggle'],
+  click: function() {
+    this.toggleProperty('rowExpanded');
+  }
+});

addon/components/fixtable-row.js

@@ -0,0 +1,18 @@
+import Ember from 'ember';
+import layout from '../templates/components/fixtable-row';
+
+export default Ember.Component.extend({
+  layout,
+  tagName: 'tr',
+  classNames: ['fixtable-row'],
+  classNameBindings: ['active', 'expanded', 'hover', 'primary:fixtable-row-primary:fixtable-row-secondary'],
+  click() {
+    this.get('onClick')();
+  },
+  mouseEnter() {
+    this.set('hover', true);
+  },
+  mouseLeave() {
+    this.set('hover', false);
+  }
+});

addon/templates/components/fixtable-grid.hbs

@@ -68,7 +68,7 @@
       <tbody>
         {{#unless isLoading}}
           {{#each visibleContent as |row rowIndex|}}
-            <tr class={{if (get selectedRowMap (concat '' rowIndex)) 'active'}} {{action 'onRowClick' row preventDefault=false}}>
+            {{#fixtable-row primary=true hover=row.hover expanded=row.expanded active=(get selectedRowMap (concat '' rowIndex)) onClick=(action 'onRowClick' row.object)}}
               {{#if rowSelection}}
                 <td>
                   <div class="fixtable-checkbox">
@@ -81,14 +81,23 @@
                 <td class={{column.cellClass}}>
                   {{#if column.component}}
                     {{!-- render the passed-in component --}}
-                    {{component column.component dataRow=row columnDef=column bubbleAction=(action sendAction)}}
+                    {{component column.component dataRow=row.object rowExpanded=row.expanded columnDef=column bubbleAction=(action sendAction)}}
                   {{else}}
                     {{!-- directly render the cell --}}
-                    {{get row column.key}}
+                    <span>{{get row.object column.key}}</span>
                   {{/if}}
                 </td>
               {{/each}}
-            </tr>
+            {{/fixtable-row}}
+            {{#if row.expanded}}
+              {{#if expandedRowComponent}}
+                {{#fixtable-row primary=false hover=row.hover expanded=row.expanded active=(get selectedRowMap (concat '' rowIndex))}}
+                  <td colspan="{{totalColumns}}">
+                    {{component expandedRowComponent dataRow=row.object}}
+                  </td>
+                {{/fixtable-row}}
+              {{/if}}
+            {{/if}}
           {{/each}}
         {{/unless}}
       </tbody>

addon/templates/components/fixtable-row-toggle.hbs

@@ -0,0 +1,5 @@
+{{#if rowExpanded}}
+  <span class="fa fa-minus-square-o"></span>
+{{else}}
+  <span class="fa fa-plus-square-o"></span>
+{{/if}}

addon/templates/components/fixtable-row.hbs

@@ -0,0 +1 @@
+{{yield}}

app/components/fixtable-row-toggle.js

@@ -0,0 +1 @@
+export { default } from 'fixtable-ember/components/fixtable-row-toggle';

app/components/fixtable-row.js

@@ -0,0 +1 @@
+export { default } from 'fixtable-ember/components/fixtable-row';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "fixtable-ember",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "Ember wrapper for the Fixtable table library",
   "directories": {
     "doc": "doc",