feat(data-table): make title, description slottable #720 (#722)

Closes #720

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
 

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": [

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."

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}"

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: {};
   }
 > {}