From ed3a3956fb2bf4e396e085901d995320dcd11076 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 4 May 2024 12:54:00 -0700
Subject: [PATCH] test: add nested headers example

---
 tests/DataTableNestedHeaders.test.svelte | 30 ++++++++++++++++++++++++
 1 file changed, 30 insertions(+)
 create mode 100644 tests/DataTableNestedHeaders.test.svelte

diff --git a/tests/DataTableNestedHeaders.test.svelte b/tests/DataTableNestedHeaders.test.svelte
new file mode 100644
index 00000000..0b24d31b
--- /dev/null
+++ 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>