From 177836e2f3bfd595ec5840fc244f345e01e694d7 Mon Sep 17 00:00:00 2001
From: albert <albertmasa2@gmail.com>
Date: Sat, 24 Oct 2020 23:41:22 +0200
Subject: [PATCH 1/3] feat(docs): add datatable display and sort example

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

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index a4870c6a..13375482 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -192,6 +192,73 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### With custom display and sort methods
+
+<DataTable title="Load balancers" description="Your organization's active load balancers."
+  headers="{[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "cost", value: "Cost", display: (cost) => `${cost} €` },
+    {
+      key: "expireDate",
+      value: "Expire date",
+      display: (date) => new Date(date).toLocaleString(),
+      sort: (a, b) => (new Date(a) <= new Date(b) ? -1 : 1),
+    },
+  ]}"
+  rows="{[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      cost: 100,
+      expireDate: "2020-10-21",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      cost: 200,
+      expireDate: "2020-09-10",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      cost: 150,
+      expireDate: "2020-11-24",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      cost: 250,
+      expireDate: "2020-12-01",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      cost: 550,
+      expireDate: "2021-03-21",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      cost: 400,
+      expireDate: "2020-11-14",
+    },
+  ]}"
+/>
+
 ### With toolbar
 
 <DataTable title="Load balancers" description="Your organization's active load balancers."

From bdc41f11449ca917c52a3dad537ee7d456813ebc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Ma=C3=B1osa?= <albertmasa2@gmail.com>
Date: Sat, 24 Oct 2020 23:52:53 +0200
Subject: [PATCH 2/3] fix(docs): string interpolation in display method body

Co-authored-by: Eric Liu <ericyl.us@gmail.com>
---
 docs/src/pages/components/DataTable.svx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 13375482..f734525c 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -199,7 +199,7 @@ The slot name for the table header cells is `"cell-header"`.
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },
     { key: "port", value: "Port" },
-    { key: "cost", value: "Cost", display: (cost) => `${cost} €` },
+    { key: "cost", value: "Cost", display: (cost) => cost + " €" },
     {
       key: "expireDate",
       value: "Expire date",
@@ -819,4 +819,4 @@ The slot name for the table header cells is `"cell-header"`.
 
 ### Skeleton (compact size)
 
-<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />
\ No newline at end of file
+<DataTableSkeleton showHeader={false} showToolbar={false} size="compact" />

From f5adf8022d19076f56a8abbdba8890e0d78db759 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Ma=C3=B1osa?= <albertmasa2@gmail.com>
Date: Sat, 24 Oct 2020 23:57:01 +0200
Subject: [PATCH 3/3] fix(docs): add missing datatable sortable prop

Co-authored-by: Eric Liu <ericyl.us@gmail.com>
---
 docs/src/pages/components/DataTable.svx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index f734525c..1aac612f 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -194,7 +194,7 @@ The slot name for the table header cells is `"cell-header"`.
 
 ### With custom display and sort methods
 
-<DataTable title="Load balancers" description="Your organization's active load balancers."
+<DataTable sortable title="Load balancers" description="Your organization's active load balancers."
   headers="{[
     { key: "name", value: "Name" },
     { key: "protocol", value: "Protocol" },