From bdeb367bc6f92d22b5fa448c7cd1fb95862c20ec Mon Sep 17 00:00:00 2001
From: Lukas Nys <lukas.nys@otainsight.com>
Date: Mon, 8 Jul 2024 09:41:54 +0200
Subject: [PATCH] docs: add documentation on customizing row collapse

---
 .../customizing-row-collapse/template.hbs     | 26 +++++++++++++++++++
 .../docs/guides/body/row-selection.md         |  8 ++++++
 2 files changed, 34 insertions(+)
 create mode 100644 tests/dummy/app/components/examples/customizing-row-collapse/template.hbs

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 }}
+<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 }}
\ 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 2c2ad94fd..712eab22d 100644
--- a/tests/dummy/app/templates/docs/guides/body/row-selection.md
+++ b/tests/dummy/app/templates/docs/guides/body/row-selection.md
@@ -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.