[DOCS] Add interactive row-selection demo

addon/components/ember-tbody/component.js

@@ -85,15 +85,17 @@ export default Component.extend({
   selectingChildrenSelectsParent: defaultTo(true),
 
   /**
-    The currently selected rows. Can either be an array or and individual row.
+    The currently selected rows. Can either be an array or an individual row.
 
     @argument selection
-    @type object?
+    @type array|object|null
   */
   selection: null,
 
   /**
-    An action that triggers when the row selection of the table changes.
+    An action that is called when the row selection of the table changes.
+    Will be called with either an array or individual row, depending on the
+    checkboxSelectionMode.
 
     @argument onSelect
     @type Action?

tests/dummy/app/pods/docs/guides/body/row-selection/controller.js

@@ -75,44 +75,43 @@ export default class SimpleController extends Controller {
 
   @computed
   get rowsWithChildren() {
-    return [
-      {
-        A: 'A',
-        B: 'B',
-        C: 'C',
-        D: 'D',
-
-        children: [
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-        ],
-      },
-      {
-        A: 'A',
+    let makeRow = (id, { children } = { children: [] }) => {
+      return {
+        A: `A${id}`,
         B: 'B',
         C: 'C',
         D: 'D',
-
-        children: [
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-        ],
-      },
-      {
-        A: 'A',
-        B: 'B',
-        C: 'C',
-        D: 'D',
-
+        children,
+      };
+    };
+    return [
+      makeRow(1, {
         children: [
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
-          { A: 'A', B: 'B', C: 'C', D: 'D' },
+          makeRow(2, {
+            children: [makeRow(3), makeRow(4), makeRow(5)],
+          }),
+          makeRow(6),
+          makeRow(7),
+          makeRow(8, {
+            children: [makeRow(9), makeRow(10), makeRow(11)],
+          }),
         ],
-      },
+      }),
     ];
   }
+
+  @computed('selection')
+  get currentSelection() {
+    if (!this.selection || this.selection.length === 0) {
+      return 'Nothing selected';
+    } else {
+      if (Array.isArray(this.selection)) {
+        return `Array: [${this.selection.map(row => row.A).join(',')}]`;
+      } else {
+        let row = this.selection;
+        return `Single: ${row.A}`;
+      }
+    }
+  }
   // END-SNIPPET
 }

tests/dummy/app/pods/docs/guides/body/row-selection/template.md

@@ -25,7 +25,7 @@ to control the selection using DDAU:
   {{demo.snippet label='component.js' name='docs-example-row-selection.js'}}
 {{/docs-demo}}
 
-# Selected Rows
+## Selected Rows
 
 `selection` can either be a single row, or a group of rows. Selecting a row also
 marks all of its children as selected.
@@ -62,12 +62,12 @@ in the `selection` group. It makes other tasks much easier though, like finding
 all of the groups that are selected, and selecting a group manually, external to
 the table.
 
-# Selection Modes
+## Selection Modes
 
 There are three different properties you can use to control the behavior of
 row selection:
 
-1. `checkboxSelectionMode`: This controls the behavior of the checkbox which
+1. `checkboxSelectionMode`: This controls the behavior of the checkbox that
 appears in the first cell of a row. It can be either `multiple`, `single`, or
 `none`. Checkbox selection is always a group selection - it will always pass an
 array to `onSelect`. In `multiple` mode it allows more than one checkbox to be
@@ -88,7 +88,7 @@ itself.
 {{#docs-demo as |demo|}}
   {{#demo.example name='selection-modes'}}
     {{! BEGIN-SNIPPET docs-example-selection-modes.hbs }}
-    <div class="demo-container small">
+    <div class="demo-container">
       <EmberTable as |t|>
         <t.head @columns={{columns}} />
 
@@ -104,6 +104,10 @@ itself.
         />
       </EmberTable>
     </div>
+    <div class="demo-options-group">
+      <h4>Current selection</h4>
+      <div class="demo-current-selection">{{currentSelection}}</div>
+    </div>
     <div class="demo-options-group">
       <h4>rowSelectionMode</h4>
       <label> <RadioButton @name='row-selection-mode' @value='multiple' @groupValue={{rowSelectionMode}} /> multiple </label>

tests/dummy/app/styles/tables.scss

@@ -4,11 +4,19 @@
   }
 }
 
+.demo-current-selection {
+  font-weight: bold;
+}
+
 .demo-options-group {
+  h4 {
+    font-weight: normal;
+    font-size: larger;
+  }
+
   display: flex;
 
   & *:first-child {
-    text-align: right;
     flex-basis: 40%;
   }