test: add nested headers example

carbon-design-system · May 4, 2024 · 788f517 · 788f517
1 parent 227b9dc
commit 788f517
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/tests/DataTableNestedHeaders.test.svelte b/tests/DataTableNestedHeaders.test.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+  import { DataTable } from "../types";
+</script>
+
+<DataTable
+  headers="{[
+    { key: 'name', value: 'Name' },
+    { key: 'protocol', value: 'Protocol', width: '400px', minWidth: '40%' },
+    { key: 'port', value: 'Port' },
+    { key: 'rule.name', value: 'Rule', sort: false },
+  ]}"
+  rows="{[
+    {
+      id: 'a',
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      'rule.name': 'Round robin',
+    },
+  ]}"
+>
+  <span slot="cell" let:cell let:row>
+    {cell.key === "rule.name"}
+    {#if cell.key === "name"}
+      {row.name} {row.id}
+    {:else}
+      {cell.value}
+    {/if}
+  </span>
+</DataTable>