feat: add option to customize row selection and row collapse

addon/components/ember-td/template.hbs

@@ -1,30 +1,38 @@
 {{#if this.isFirstColumn}}
   <div class="et-cell-container">
     {{#if this.canSelect}}
-      <span
-        class="et-toggle-select {{unless this.shouldShowCheckbox 'et-speech-only'}}"
-        data-test-select-row-container
-      >
-        <EmberTableSimpleCheckbox
-          @checked={{this.rowMeta.isGroupSelected}}
-          @onClick={{action "onSelectionToggled"}}
-          @ariaLabel="Select row"
-          @dataTestSelectRow={{this.isTesting}}
-        />
-        <span></span>
-      </span>
+      {{#if (has-block "select")}}
+        {{yield this.rowMeta (action "onSelectionToggled") to="select"}}
+      {{else}}
+        <span
+          class="et-toggle-select {{unless this.shouldShowCheckbox 'et-speech-only'}}"
+          data-test-select-row-container
+        >
+          <EmberTableSimpleCheckbox
+            @checked={{this.rowMeta.isGroupSelected}}
+            @onClick={{action "onSelectionToggled"}}
+            @ariaLabel="Select row"
+            @dataTestSelectRow={{this.isTesting}}
+          />
+          <span></span>
+        </span>
+      {{/if}}
     {{/if}}
 
     {{#if this.canCollapse}}
-      <span class="et-toggle-collapse et-depth-indent {{this.depthClass}}">
-        <EmberTableSimpleCheckbox
-          @checked={{this.rowMeta.isCollapsed}}
-          @onChange={{action "onCollapseToggled"}}
-          @ariaLabel="Collapse row"
-          @dataTestCollapseRow={{this.isTesting}}
-        />
-        <span></span>
-      </span>
+      {{#if (has-block "collapse")}}
+        {{yield this.rowMeta (action "onCollapseToggled") to="collapse"}}
+      {{else}}
+        <span class="et-toggle-collapse et-depth-indent {{this.depthClass}}">
+          <EmberTableSimpleCheckbox
+            @checked={{this.rowMeta.isCollapsed}}
+            @onChange={{action "onCollapseToggled"}}
+            @ariaLabel="Collapse row"
+            @dataTestCollapseRow={{this.isTesting}}
+          />
+          <span></span>
+        </span>
+      {{/if}}
     {{else}}
       <div class="et-depth-indent et-depth-placeholder {{this.depthClass}}"></div>
     {{/if}}

package.json

@@ -70,6 +70,7 @@
     "ember-faker": "^1.5.0",
     "ember-load-initializers": "^2.0.0",
     "ember-math-helpers": "~2.11.3",
+    "ember-named-blocks-polyfill": "^0.2.5",
     "ember-qunit": "^5.1.5",
     "ember-radio-button": "^2.0.0",
     "ember-resolver": "^8.0.2",

tests/dummy/app/components/examples/customizing-row-collapse/template.hbs

@@ -0,0 +1,26 @@
+{{! BEGIN-SNIPPET docs-example-customizing-row-collapse.hbs }}
+<EmberTable as |t|>
+  <t.head @columns={{this.columns}} />
+
+  <t.body
+    @rows={{this.rows}}
+    @onSelect={{action this.selectRows}}
+    @selection={{this.selection}}
+    as |b|
+  >
+    <b.row as |r|>
+      <r.cell>
+        <:collapse as |rowMeta onCollapseToggled|>
+          <YourCustomButtonComponent
+            @icon={{if rowMeta.isCollapsed "expand" "collapse"}}
+            @onClick={{onCollapseToggled}}
+          />
+        </:collapse>
+        <:default as |value|>
+          {{value}}
+        </:default>
+      </r.cell>
+    </b.row>
+  </t.body>
+</EmberTable>
+{{! END-SNIPPET }}

tests/dummy/app/components/examples/customizing-row-selection/template.hbs

@@ -0,0 +1,26 @@
+{{! BEGIN-SNIPPET docs-example-customizing-row-selection.hbs }}
+<EmberTable as |t|>
+  <t.head @columns={{this.columns}} />
+
+  <t.body
+    @rows={{this.rows}}
+    @onSelect={{action this.selectRows}}
+    @selection={{this.selection}}
+    as |b|
+  >
+    <b.row as |r|>
+      <r.cell>
+        <:select as |rowMeta onSelectionToggled|>
+          <YourCustomCheckboxComponent
+            @checked={{rowMeta.isGroupSelected}}
+            @onClick={{onSelectionToggled}}
+          />
+        </:select>
+        <:default as |value|>
+          {{value}}
+        </:default>
+      </r.cell>
+    </b.row>
+  </t.body>
+</EmberTable>
+{{! END-SNIPPET }}

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

@@ -81,6 +81,22 @@ itself.
   {{demo.snippet label='component.js' name='docs-example-selection-modes.js'}}
 {{/docs-demo}}
 
+## Customizing Row Selection
+
+By default, Ember Table renders an input of type `checkbox` alongside an empty `span` element that can be styled to look like a checkbox. If you want to customize the checkbox however, you can pass a named block `:select` to the `EmberTd` component. This block will receive `rowMeta` and the `onSelectionToggled` action as yielded arguments:
+
+{{#docs-demo as |demo|}}
+  {{demo.snippet name='docs-example-customizing-row-selection.hbs'}}
+{{/docs-demo}}
+
+## Customizing Row Collapse
+
+Similarly, you can customize the row collapse behavior by passing a named block `:collapse` to the `EmberTd` component. This block will receive `rowMeta` and the `onCollapseToggled` action as yielded arguments:
+
+{{#docs-demo as |demo|}}
+  {{demo.snippet name='docs-example-customizing-row-collapse.hbs'}}
+{{/docs-demo}}
+
 ## Aborting a Selection
 
 Row selection follows a <a href="https://embermap.com/topics/component-side-effects/data-down-actions-up">DDAU</a> pattern, whereby the `onSelect` action handler supplied to Ember Table has control over which rows become selected. To ignore a user selection, it suffices to simply do nothing in the action handler.
@@ -92,4 +108,4 @@ To reset all internal state relating to an attempted user selection, call the `a
 {{#docs-demo as |demo|}}
   {{demo.snippet name='docs-example-aborting-a-selection.hbs'}}
   {{demo.snippet label='component.js' name='docs-example-aborting-a-selection.js'}}
-{{/docs-demo}}
+{{/docs-demo}}

types/components/ember-td/component.d.ts

@@ -23,6 +23,14 @@ export interface EmberTdSignature<RowType, ColumnType> {
       columnMeta: unknown,
       rowMeta: TableRowMeta,
     ];
+    select?: [
+      rowMeta: unknown,
+      onSelectionToggled: () => void,
+    ];
+    collapse?: [
+      rowMeta: unknown,
+      onCollapseToggled: () => void,
+    ];
   };
 }
 

yarn.lock

@@ -5843,7 +5843,7 @@ ember-cli-babel@^6.6.0, ember-cli-babel@^6.8.2, ember-cli-babel@^6.9.2:
     ember-cli-version-checker "^2.1.2"
     semver "^5.5.0"
 
-ember-cli-babel@^7.0.0, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.20.5, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.24.0, ember-cli-babel@^7.26.11, ember-cli-babel@^7.26.4, ember-cli-babel@^7.26.6, ember-cli-babel@^7.7.3:
+ember-cli-babel@^7.0.0, ember-cli-babel@^7.12.0, ember-cli-babel@^7.13.0, ember-cli-babel@^7.13.2, ember-cli-babel@^7.19.0, ember-cli-babel@^7.20.5, ember-cli-babel@^7.22.1, ember-cli-babel@^7.23.0, ember-cli-babel@^7.24.0, ember-cli-babel@^7.26.11, ember-cli-babel@^7.26.4, ember-cli-babel@^7.26.6, ember-cli-babel@^7.7.3:
   version "7.26.11"
   resolved "https://registry.npmjs.org/ember-cli-babel/-/ember-cli-babel-7.26.11.tgz#50da0fe4dcd99aada499843940fec75076249a9f"
   integrity sha512-JJYeYjiz/JTn34q7F5DSOjkkZqy8qwFOOxXfE6pe9yEJqWGu4qErKxlz8I22JoVEQ/aBUO+OcKTpmctvykM9YA==
@@ -6317,6 +6317,14 @@ ember-math-helpers@~2.11.3:
     ember-cli-babel "^7.7.3"
     ember-cli-htmlbars "^3.0.1"
 
+ember-named-blocks-polyfill@^0.2.5:
+  version "0.2.5"
+  resolved "https://registry.npmjs.org/ember-named-blocks-polyfill/-/ember-named-blocks-polyfill-0.2.5.tgz#d5841406277026a221f479c815cfbac6cdcaeecb"
+  integrity sha512-OVMxzkfqJrEvmiky7gFzmuTaImCGm7DOudHWTdMBPO7E+dQSunrcRsJMgO9ZZ56suqBIz/yXbEURrmGS+avHxA==
+  dependencies:
+    ember-cli-babel "^7.19.0"
+    ember-cli-version-checker "^5.1.1"
+
 ember-qunit@^5.1.5:
   version "5.1.5"
   resolved "https://registry.npmjs.org/ember-qunit/-/ember-qunit-5.1.5.tgz#24a7850f052be24189ff597dfc31b923e684c444"