From c2f89da4d1b164592182609b6b2da70923440b81 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 30 Apr 2022 09:26:31 -0700
Subject: [PATCH] docs(data-table): add "Expandable and selectable" example

#662
---
 docs/src/pages/components/DataTable.svx       |  4 ++
 .../DataTableExpandableSelectable.svelte      | 37 +++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 3fef0c40..9f38d71d 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1410,6 +1410,10 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
   </svelte:fragment>
 </DataTable>
 
+### Expandable and selectable
+
+<FileSource src="/framed/DataTable/DataTableExpandableSelectable" />
+
 ### Skeleton
 
 <DataTableSkeleton />
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
new file mode 100644
index 00000000..c65e6ef1
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableSelectable.svelte
@@ -0,0 +1,37 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+
+  let expandedRowIds = [];
+  let selectedRowIds = [];
+
+  $: {
+    console.log("expandedRowIds", expandedRowIds);
+    console.log("selectedRowIds", selectedRowIds);
+  }
+</script>
+
+<DataTable
+  batchExpansion
+  batchSelection
+  bind:expandedRowIds
+  bind:selectedRowIds
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+  ]}"
+  rows="{Array.from({ length: 6 }).map((_, i) => ({
+    id: i,
+    name: 'Load Balancer ' + (i + 1),
+    protocol: 'HTTP',
+    port: i % 3 ? (i % 2 ? 3000 : 80) : 443,
+    rule: i % 3 ? 'Round robin' : 'DNS delegation',
+  }))}"
+>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </svelte:fragment>
+</DataTable>