diff --git a/addon/components/ember-td/template.hbs b/addon/components/ember-td/template.hbs index 4cbab5045..4678a15d5 100644 --- a/addon/components/ember-td/template.hbs +++ b/addon/components/ember-td/template.hbs @@ -1,30 +1,38 @@ {{#if this.isFirstColumn}}
{{#if this.canSelect}} - - - - + {{#if (has-block "select")}} + {{yield this.rowMeta (action "onSelectionToggled") to="select"}} + {{else}} + + + + + {{/if}} {{/if}} {{#if this.canCollapse}} - - - - + {{#if (has-block "collapse")}} + {{yield this.rowMeta (action "onCollapseToggled") to="collapse"}} + {{else}} + + + + + {{/if}} {{else}}
{{/if}} diff --git a/package.json b/package.json index bd0815487..60fa313f9 100644 --- a/package.json +++ b/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", diff --git a/tests/dummy/app/components/examples/customizing-row-collapse/template.hbs b/tests/dummy/app/components/examples/customizing-row-collapse/template.hbs new file mode 100644 index 000000000..51541c3a4 --- /dev/null +++ b/tests/dummy/app/components/examples/customizing-row-collapse/template.hbs @@ -0,0 +1,26 @@ +{{! BEGIN-SNIPPET docs-example-customizing-row-collapse.hbs }} + + + + + + + <:collapse as |rowMeta onCollapseToggled|> + + + <:default as |value|> + {{value}} + + + + + +{{! END-SNIPPET }} \ No newline at end of file diff --git a/tests/dummy/app/components/examples/customizing-row-selection/template.hbs b/tests/dummy/app/components/examples/customizing-row-selection/template.hbs new file mode 100644 index 000000000..c6b44ee7e --- /dev/null +++ b/tests/dummy/app/components/examples/customizing-row-selection/template.hbs @@ -0,0 +1,26 @@ +{{! BEGIN-SNIPPET docs-example-customizing-row-selection.hbs }} + + + + + + + <:select as |rowMeta onSelectionToggled|> + + + <:default as |value|> + {{value}} + + + + + +{{! END-SNIPPET }} \ No newline at end of file diff --git a/tests/dummy/app/templates/docs/guides/body/row-selection.md b/tests/dummy/app/templates/docs/guides/body/row-selection.md index a9c72c78a..712eab22d 100644 --- a/tests/dummy/app/templates/docs/guides/body/row-selection.md +++ b/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 DDAU 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}} \ No newline at end of file diff --git a/types/components/ember-td/component.d.ts b/types/components/ember-td/component.d.ts index 774b0ffe7..0f2ace0a2 100644 --- a/types/components/ember-td/component.d.ts +++ b/types/components/ember-td/component.d.ts @@ -23,6 +23,14 @@ export interface EmberTdSignature { columnMeta: unknown, rowMeta: TableRowMeta, ]; + select?: [ + rowMeta: unknown, + onSelectionToggled: () => void, + ]; + collapse?: [ + rowMeta: unknown, + onCollapseToggled: () => void, + ]; }; } diff --git a/yarn.lock b/yarn.lock index 8dbb8b29c..d452da44c 100644 --- a/yarn.lock +++ b/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"