DOCS: Improve table-customization docs pages

  * Move `getRandomInt` helper to utils/generators
  * Use more explanatory data for table-customization sorting

Previously, the data displayed in the table didn't have any difference,
row-to-row, so it wasn't obvious that clicking the column headers actually
did change the sorting.

This copies over the sortable columns/rows data from the sorting docs example.

  * Interactive sort/resize indicators on customization page

On the table customization page, add checkboxes to turn on/off the
sort/resize indicators in the header columns, so that docs readers
can better understand how they are used.

  * table-customization: More obvious cell/column customizations

Use a SCSS loop to define the `.text-<color>` and `.bg-<color>` style
rules.

Remove the "text-" prefix from the color names used in code, move this
into the template.

Make custom cells use a `text-<color>` class.
Make custom header cells use a `bg-<color>` class, for variety.

Separate some of the reused controller properties so that it's clearer
which property is used for which example.

tests/dummy/app/pods/components/custom-cell/template.hbs

@@ -1,5 +1,5 @@
 {{! BEGIN-SNIPPET custom-cell.hbs }}
-<div class="custom-header {{color}}">
+<div class="custom-header text-{{color}}">
   Cell {{yield}}
 </div>
 {{! END-SNIPPET }}

tests/dummy/app/pods/components/custom-header/template.hbs

@@ -1,5 +1,5 @@
 {{! BEGIN-SNIPPET custom-header.hbs }}
-<div class="custom-header {{color}}">
+<div class="custom-header bg-{{color}}">
   Column {{yield}}
 </div>
 {{! END-SNIPPET }}

tests/dummy/app/pods/docs/guides/header/sorting/controller.js

@@ -1,10 +1,7 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember-decorators/object';
 import faker from 'faker';
-
-function getRandomInt(max, min) {
-  return faker.random.number({ min, max });
-}
+import { getRandomInt } from '../../../../../utils/generators';
 
 export default class SimpleController extends Controller {
   // BEGIN-SNIPPET docs-example-sortings.js

tests/dummy/app/pods/docs/guides/header/sorting/empty-values/component.js

@@ -1,10 +1,7 @@
 import Component from '@ember/component';
 import { computed } from '@ember-decorators/object';
 import faker from 'faker';
-
-function getRandomInt(max, min) {
-  return faker.random.number({ min, max });
-}
+import { getRandomInt } from '../../../../../../utils/generators';
 
 export default class EmptyValues extends Component {
   // BEGIN-SNIPPET docs-example-sorting-empty-values.js

tests/dummy/app/pods/docs/guides/main/table-customization/controller.js

@@ -1,6 +1,7 @@
 import Controller from '@ember/controller';
 import { computed } from '@ember-decorators/object';
-import { generateRows } from '../../../../../utils/generators';
+import { generateRows, getRandomInt } from '../../../../../utils/generators';
+import faker from 'faker';
 
 export default class SimpleController extends Controller {
   @computed
@@ -12,36 +13,123 @@ export default class SimpleController extends Controller {
   @computed
   get rowsWithComponents() {
     return [
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-navy' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-blue' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-aqua' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-teal' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-orange' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-red' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-maroon' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-navy' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-blue' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-aqua' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-teal' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-orange' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-red' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-maroon' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-navy' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-blue' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-aqua' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-teal' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-orange' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-red' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-maroon' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-navy' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-blue' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-aqua' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-teal' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-orange' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-red' },
-      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'text-maroon' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'navy' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'blue' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'aqua' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'teal' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'orange' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'red' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'maroon' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'navy' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'blue' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'aqua' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'teal' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'orange' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'red' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'maroon' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'navy' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'blue' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'aqua' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'teal' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'orange' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'red' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'maroon' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'navy' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'blue' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'aqua' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'teal' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'orange' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'red' },
+      { A: 'A', B: 'B', C: 'C', D: 'D', cellComponent: 'custom-cell', color: 'maroon' },
     ];
   }
+
+  @computed
+  get columnsForRowsWithComponents() {
+    return [
+      { name: 'Column A', valuePath: 'A' },
+      { name: 'Column B', valuePath: 'B' },
+      { name: 'Column C', valuePath: 'C' },
+      { name: 'Column D', valuePath: 'D' },
+    ];
+  }
+  // END-SNIPPET
+
+  // BEGIN-SNIPPET table-customization-example-sorting.js
+  showSortIndicator = true;
+  showResizeHandle = true;
+
+  @computed
+  get columnsForSorting() {
+    return [
+      { name: 'Company ▸ Department ▸ Product', valuePath: 'name' },
+      { name: 'Price', valuePath: 'price' },
+      { name: 'Sold', valuePath: 'sold' },
+      { name: 'Unsold', valuePath: 'unsold' },
+      { name: 'Total Revenue', valuePath: 'totalRevenue' },
+    ];
+  }
+
+  @computed
+  get rowsForSorting() {
+    let rows = [];
+
+    for (let i = 0; i < 5; i++) {
+      let companyRow = {
+        name: faker.company.companyName(),
+        price: 'N/A',
+        sold: 0,
+        unsold: 0,
+        totalRevenue: 0,
+        children: [],
+      };
+
+      for (let j = 0; j < getRandomInt(5, 2); j++) {
+        let departmentRow = {
+          name: faker.commerce.department(),
+          price: 'N/A',
+          sold: 0,
+          unsold: 0,
+          totalRevenue: 0,
+          children: [],
+        };
+
+        for (let k = 0; k < getRandomInt(100, 10); k++) {
+          let sold = getRandomInt(100, 10);
+          let unsold = getRandomInt(100, 10);
+          let price = getRandomInt(50, 10);
+          let totalRevenue = price * sold;
+
+          let product = {
+            name: faker.commerce.productName(),
+            price: `$${price}`,
+            sold,
+            unsold,
+            totalRevenue: `$${totalRevenue}`,
+          };
+
+          departmentRow.sold += sold;
+          departmentRow.unsold += unsold;
+          departmentRow.totalRevenue += totalRevenue;
+          departmentRow.children.push(product);
+        }
+
+        companyRow.sold += departmentRow.sold;
+        companyRow.unsold += departmentRow.unsold;
+        companyRow.totalRevenue += departmentRow.totalRevenue;
+
+        departmentRow.totalRevenue = `$${departmentRow.totalRevenue}`;
+
+        companyRow.children.push(departmentRow);
+      }
+
+      companyRow.totalRevenue = `$${companyRow.totalRevenue}`;
+
+      rows.push(companyRow);
+    }
+
+    return rows;
+  }
   // END-SNIPPET
 
   // BEGIN-SNIPPET table-customization-custom-table-components.js
@@ -96,16 +184,6 @@ export default class SimpleController extends Controller {
       },
     ];
   }
-
-  @computed
-  get fewerColumns() {
-    return [
-      { name: 'A', valuePath: 'A', width: 180 },
-      { name: 'B', valuePath: 'B', width: 180 },
-      { name: 'C', valuePath: 'C', width: 180 },
-      { name: 'D', valuePath: 'D', width: 180 },
-    ];
-  }
   // END-SNIPPET
 
   // BEGIN-SNIPPET table-customization-custom-cell-template.js
@@ -132,7 +210,7 @@ export default class SimpleController extends Controller {
         valuePath: 'A',
         headerComponent: 'custom-header',
         cellComponent: 'custom-cell',
-        color: 'text-blue',
+        color: 'blue',
       },
       {
         heading: 'B',
@@ -143,7 +221,7 @@ export default class SimpleController extends Controller {
         valuePath: 'C',
         headerComponent: 'custom-header',
         cellComponent: 'custom-cell',
-        color: 'text-aqua',
+        color: 'aqua',
       },
       {
         heading: 'D',
@@ -154,7 +232,7 @@ export default class SimpleController extends Controller {
         valuePath: 'E',
         headerComponent: 'custom-header',
         cellComponent: 'custom-cell',
-        color: 'text-orange',
+        color: 'orange',
       },
       {
         heading: 'F',
@@ -165,7 +243,7 @@ export default class SimpleController extends Controller {
         valuePath: 'G',
         headerComponent: 'custom-header',
         cellComponent: 'custom-cell',
-        color: 'text-maroon',
+        color: 'maroon',
       },
     ];
   }

tests/dummy/app/pods/docs/guides/main/table-customization/template.md

@@ -48,37 +48,51 @@ components:
 
 {{#docs-demo as |demo|}}
   {{#demo.example}}
-    {{! BEGIN-SNIPPET docs-example-sortings.hbs }}
+    {{! BEGIN-SNIPPET table-customization-example-sorting.hbs }}
+    <div class='demo-options'>
+      <span class='demo-option'>
+        <input type='checkbox' checked={{showSortIndicator}} onclick={{action (mut showSortIndicator) (not showSortIndicator)}}>
+        Show Sort Indicator
+        <span class='small'>(Click header to sort)</span>
+      </span>
+      <span class='demo-option'>
+        <input type='checkbox' checked={{showResizeHandle}} onclick={{action (mut showResizeHandle) (not showResizeHandle)}}>
+        Show Resize Handle <span class='small'>(Only appears on hover)</span>
+      </span>
+    </div>
     <div class="demo-container">
       <EmberTable as |t|>
         <t.head
-          @columns={{columns}}
+          @columns={{columnsForSorting}}
           @sorts={{sorts}}
 
           @onUpdateSorts={{action (mut sorts)}}
-
           @widthConstraint='gte-container'
           @fillMode='first-column'
-        
+
           as |h|
         >
           <h.row as |r|>
             <r.cell as |columnValue columnMeta|>
-              <EmberTh::SortIndicator @columnMeta={{columnMeta}} />
+              {{#if showSortIndicator}}
+                <EmberTh::SortIndicator @columnMeta={{columnMeta}} />
+              {{/if}}
               {{columnValue.name}}
-              <EmberTh::ResizeHandle @columnMeta={{columnMeta}} />
+              {{#if showResizeHandle}}
+                <EmberTh::ResizeHandle @columnMeta={{columnMeta}} />
+              {{/if}}
             </r.cell>
           </h.row>
         </t.head>
 
-        <t.body @rows={{rows}} />
+        <t.body @rows={{rowsForSorting}} />
       </EmberTable>
     </div>
     {{! END-SNIPPET }}
   {{/demo.example}}
 
-  {{demo.snippet name='docs-example-sortings.hbs'}}
-  {{demo.snippet label='component.js' name='docs-example-sortings.js'}}
+  {{demo.snippet name='table-customization-example-sorting.hbs'}}
+  {{demo.snippet label='component.js' name='table-customization-example-sorting.js'}}
 {{/docs-demo}}
 
 Oftentimes you'll want to provide custom components for use in table headers,
@@ -142,7 +156,7 @@ rows), allowing us to customize the template in the same way as columns:
     <div class="demo-container small">
       {{! BEGIN-SNIPPET table-customization-rows-with-components.hbs }}
       <EmberTable as |t|>
-        <t.head @columns={{fewerColumns}} />
+        <t.head @columns={{columnsForRowsWithComponents}} />
 
         <t.body @rows={{rowsWithComponents}} as |b|>
           <b.row as |r|>