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..2c2ad94fd 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,14 @@ 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}} + ## 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 +100,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