From 964a0c9f750361dae6a8398f7eb911f293dc1a59 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Fri, 16 Oct 2020 11:29:23 -0700
Subject: [PATCH] docs(data-table): add tall example, skeleton sizes

---
 docs/src/pages/components/DataTable.svx | 69 ++++++++++++++++++++++++-
 1 file changed, 68 insertions(+), 1 deletion(-)

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 64fa59c5..acf72e59 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -168,6 +168,61 @@
   ]}"
 />
 
+### Tall rows
+
+<DataTable size="tall"
+  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"
+    },
+  ]}"
+/>
+
 ### Short rows
 
 <DataTable size="short"
@@ -343,4 +398,16 @@
 
 ### Skeleton without header, toolbar
 
-<DataTableSkeleton showHeader={false} showToolbar={false} />
\ No newline at end of file
+<DataTableSkeleton showHeader={false} showToolbar={false} />
+
+### Skeleton (tall size)
+
+<DataTableSkeleton showHeader={false} showToolbar={false} size="tall" />
+
+### Skeleton (short size)
+
+<DataTableSkeleton showHeader={false} showToolbar={false} size="short" />
+
+### Skeleton (compact size)
+
+<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
\ No newline at end of file