From 5fee13b2eb8235eeb24375ca73a64fe312f781bc Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 5 Jul 2021 08:44:07 -0700
Subject: [PATCH] feat(data-table): make title, description slottable #720
 (#722)

Closes #720
---
 COMPONENT_INDEX.md                      |  2 +
 docs/src/COMPONENT_API.json             | 12 +++++
 docs/src/pages/components/DataTable.svx | 62 +++++++++++++++++++++++++
 src/DataTable/DataTable.svelte          | 14 +++++-
 types/DataTable/DataTable.d.ts          |  2 +
 5 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 6c64109a..091a5b0c 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -963,7 +963,9 @@ export interface DataTableCell {
 | --           | Yes     | --                                                        | --                                                                  |
 | cell         | No      | <code>{ row: DataTableRow; cell: DataTableCell; } </code> | <code>{cell.display ? cell.display(cell.value) : cell.value}</code> |
 | cell-header  | No      | <code>{ header: DataTableNonEmptyHeader; } </code>        | <code>{header.value}</code>                                         |
+| description  | No      | --                                                        | <code>{description}</code>                                          |
 | expanded-row | No      | <code>{ row: DataTableRow; } </code>                      | --                                                                  |
+| title        | No      | --                                                        | <code>{title}</code>                                                |
 
 ### Events
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 925b35c2..294ce682 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -2091,10 +2091,22 @@
           "fallback": "{header.value}",
           "slot_props": "{ header: DataTableNonEmptyHeader; }"
         },
+        {
+          "name": "description",
+          "default": false,
+          "fallback": "{description}",
+          "slot_props": "{}"
+        },
         {
           "name": "expanded-row",
           "default": false,
           "slot_props": "{ row: DataTableRow; }"
+        },
+        {
+          "name": "title",
+          "default": false,
+          "fallback": "{title}",
+          "slot_props": "{}"
         }
       ],
       "events": [
diff --git a/docs/src/pages/components/DataTable.svx b/docs/src/pages/components/DataTable.svx
index 9a5db7f3..41ecd931 100644
--- a/docs/src/pages/components/DataTable.svx
+++ b/docs/src/pages/components/DataTable.svx
@@ -194,6 +194,68 @@ The slot name for the table header cells is `"cell-header"`.
   ]}"
 />
 
+### Slottable title, description
+
+The `title` and `description` props are slottable.
+
+<DataTable
+  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"
+    },
+  ]}"
+>
+    <strong slot="title">Load balancers</strong>
+    <span slot="description" style="font-size: 1rem">
+      Your organization's active load balancers.
+    </span>
+</DataTable>
+
 ### With toolbar
 
 <DataTable title="Load balancers" description="Your organization's active load balancers."
diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index cf4385b2..9938b46c 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -202,7 +202,19 @@
   }
 </script>
 
-<TableContainer title="{title}" description="{description}" {...$$restProps}>
+<TableContainer {...$$restProps}>
+  <div class:bx--data-table-header="{true}">
+    {#if title || $$slots.title}
+      <h4 class:bx--data-table-header__title="{true}">
+        <slot name="title">{title}</slot>
+      </h4>
+    {/if}
+    {#if description || $$slots.description}
+      <p class:bx--data-table-header__description="{true}">
+        <slot name="description">{description}</slot>
+      </p>
+    {/if}
+  </div>
   <slot />
   <Table
     zebra="{zebra}"
diff --git a/types/DataTable/DataTable.d.ts b/types/DataTable/DataTable.d.ts
index 394aa1d6..3c9c84a7 100644
--- a/types/DataTable/DataTable.d.ts
+++ b/types/DataTable/DataTable.d.ts
@@ -157,6 +157,8 @@ export default class DataTable extends SvelteComponentTyped<
     default: {};
     cell: { row: DataTableRow; cell: DataTableCell };
     ["cell-header"]: { header: DataTableNonEmptyHeader };
+    description: {};
     ["expanded-row"]: { row: DataTableRow };
+    title: {};
   }
 > {}