Merge pull request #342 from IBM/slottable-datatable

make DataTable cells slottable

docs/src/pages/components/DataTable.svx

@@ -1,5 +1,6 @@
 <script>
-  import { DataTable, DataTableSkeleton } from "carbon-components-svelte";
+  import { DataTable, DataTableSkeleton, Link } from "carbon-components-svelte";
+  import Launch16 from "carbon-icons-svelte/lib/Launch16";
   import Preview from "../../components/Preview.svelte";
 </script>
 
@@ -58,6 +59,80 @@
   ]}"
 />
 
+### Slotted cells
+
+Use the `"cell"` slot to control the display value per table cell. Individual row and cell data are provided through the `let:row` and `let:cell` directives.
+
+The slot name for the table header cells is `"cell-header"`.
+
+<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"
+    },
+  ]}"
+>
+ <span slot="cell-header" let:header>
+    {#if header.key === 'port'}
+      {header.value} (network)
+    {:else}
+      {header.value}
+    {/if}
+  </span>
+  <span slot="cell" let:row let:cell>
+    {#if cell.key === 'rule' && cell.value === 'Round robin'}
+      <Link inline href="https://en.wikipedia.org/wiki/Round-robin_DNS" target="_blank">{cell.value} <Launch16 /></Link>
+    {:else}
+      {cell.value}
+    {/if}
+  </span>
+</DataTable>
+
 ### With title, description
 
 <DataTable title="Load balancers" description="Your organization's active load balancers."

src/DataTable/DataTable.svelte

@@ -185,7 +185,7 @@
               });
             }}"
           >
-            {header.value}
+            <slot name="cell-header" header="{header}">{header.value}</slot>
           </TableHeader>
         {/each}
       </TableRow>
@@ -231,7 +231,7 @@
                 dispatch('click:cell', cell);
               }}"
             >
-              {cell.value}
+              <slot name="cell" row="{row}" cell="{cell}">{cell.value}</slot>
             </TableCell>
           {/each}
         </TableRow>