From ea91f44eda264705c21c177dfff1677f2b6129b7 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Wed, 23 Mar 2022 07:56:06 -0700
Subject: [PATCH] docs(data-table): add "Expandable (zebra styles)" example

---
 docs/src/pages/components/DataTable.svx       |  4 ++
 .../DataTable/DataTableExpandableZebra.svelte | 65 +++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index fe68f893..0df89167 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -1139,6 +1139,10 @@ Use `nonExpandableRowIds` to specify the ids for rows that should not be expanda
 
 <FileSource src="/framed/DataTable/DataTableNonExpandableRows" />
 
+### Expandable (zebra styles)
+
+<FileSource src="/framed/DataTable/DataTableExpandableZebra" />
+
 ### Expandable (compact size)
 
 <DataTable size="compact" expandable
diff --git a/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
new file mode 100644
index 00000000..ed18370d
--- /dev/null
+++ b/docs/src/pages/framed/DataTable/DataTableExpandableZebra.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+</script>
+
+<DataTable
+  zebra
+  expandable
+  nonExpandableRowIds="{['a', 'd']}"
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule', value: 'Rule' },
+  ]}"
+  rows="{[
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'b',
+      name: 'Load Balancer 1',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'c',
+      name: 'Load Balancer 2',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+    {
+      id: 'd',
+      name: 'Load Balancer 6',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+    },
+    {
+      id: 'e',
+      name: 'Load Balancer 4',
+      protocol: 'HTTP',
+      port: 443,
+      rule: 'Round robin',
+    },
+    {
+      id: 'f',
+      name: 'Load Balancer 5',
+      protocol: 'HTTP',
+      port: 80,
+      rule: 'DNS delegation',
+    },
+  ]}"
+>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </svelte:fragment>
+</DataTable>