diff --git a/tests/DataTable.test.svelte b/tests/DataTable.test.svelte
index 9b81625d..3bd17cc7 100644
--- a/tests/DataTable.test.svelte
+++ b/tests/DataTable.test.svelte
@@ -285,3 +285,66 @@
 <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="short" />
 
 <DataTableSkeleton showHeader="{false}" showToolbar="{false}" size="compact" />
+
+<DataTable
+  rows="{[
+    {
+      name: 'Load Balancer 3',
+      protocol: 'HTTP',
+      port: 3000,
+      rule: 'Round robin',
+      id: '-',
+    },
+  ]}"
+  headers="{[
+    {
+      key: 'name',
+      value: 'Name',
+    },
+    {
+      key: 'protocol',
+      value: 'Protocol',
+      display: (value) => {
+        return value + ' Protocol';
+      },
+    },
+    {
+      key: 'port',
+      value: 'Port',
+      display: (value, row) => {
+        return value + ' €';
+      },
+      sort: (a, b) => {
+        if (a > b) return 1;
+        return 0;
+      },
+    },
+    {
+      key: 'rule',
+      value: 'Rule',
+    },
+  ]}"
+  sortKey="name"
+  on:click:row="{(e) => {
+    const detail = e.detail;
+    detail.name;
+    detail.port;
+  }}"
+  on:click:cell="{(e) => {
+    const detail = e.detail;
+    switch (detail.key) {
+      case 'name':
+        detail.value;
+        break;
+    }
+  }}"
+  on:click="{(e) => {
+    e.detail.cell;
+    e.detail.row.name;
+  }}"
+  on:click:row--expand="{(e) => {
+    const detail = e.detail;
+    detail.row.id;
+    detail.row.name;
+  }}"
+/>