Skip to content

Commit

Permalink
docs: add documentation on customizing row collapse
Browse files Browse the repository at this point in the history
  • Loading branch information
Lukas Nys committed Jul 8, 2024
1 parent dac69c3 commit bdeb367
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -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 }}
8 changes: 8 additions & 0 deletions tests/dummy/app/templates/docs/guides/body/row-selection.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,14 @@ By default, Ember Table renders an input of type `checkbox` alongside an empty `
{{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.
Expand Down

0 comments on commit bdeb367

Please sign in to comment.