feat(data-table): add expandable DataTable

#14

docs/src/pages/components/DataTable.svx

@@ -388,6 +388,128 @@
   ]}"
 />
 
+### Expandable
+
+<DataTable expandable
+  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"
+    },
+  ]}"
+>
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
+### Batch expansion
+
+<DataTable batchExpansion
+  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"
+    },
+  ]}"
+>
+  <div slot="expanded-row" let:row>
+    <pre>
+      {JSON.stringify(row, null, 2)}
+    </pre>
+  </div>
+</DataTable>
+
 ### Skeleton
 
 <DataTableSkeleton />

src/DataTable/DataTable.svelte

@@ -42,6 +42,25 @@
    */
   export let sortable = false;
 
+  /**
+   * Set to `true` for the expandable variant
+   * Automatically set to `true` if `batchExpansion` is `true`
+   * @type {boolean} [expandable=false]
+   */
+  export let expandable = false;
+
+  /**
+   * Set to `true` to enable batch expansion
+   * @type {boolean} [batchExpansion=false]
+   */
+  export let batchExpansion = false;
+
+  /**
+   * Specify the row ids to be expanded
+   * @type {boolean} [expandedRowIds=[]]
+   */
+  export let expandedRowIds = [];
+
   /**
    * Set to `true` to enable a sticky header
    * @type {boolean} [stickyHeader=false]
@@ -50,6 +69,7 @@
 
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
   import Table from "./Table.svelte";
   import TableBody from "./TableBody.svelte";
   import TableCell from "./TableCell.svelte";
@@ -81,6 +101,14 @@
     },
   });
 
+  let expanded = false;
+  let parentRowId = null;
+
+  $: expandedRows = expandedRowIds.reduce(
+    (a, id) => ({ ...a, [id]: true }),
+    {}
+  );
+  $: if (batchExpansion) expandable = true;
   $: tableSortable.set(sortable);
   $: headerKeys = headers.map(({ key }) => key);
   $: rows = rows.map((row) => ({
@@ -109,13 +137,8 @@
       });
     }
   }
-  $: props = {
-    headers,
-    rows,
-  };
 </script>
 
-<slot props="{props}">
 <TableContainer title="{title}" description="{description}" {...$$restProps}>
   <Table
     zebra="{zebra}"
@@ -125,6 +148,28 @@
   >
     <TableHead>
       <TableRow>
+        {#if expandable}
+          <th
+            scope="col"
+            class:bx--table-expand="{true}"
+            data-previous-value="{expanded ? 'collapsed' : undefined}"
+          >
+            {#if batchExpansion}
+              <button
+                type="button"
+                class:bx--table-expand__button="{true}"
+                on:click="{() => {
+                  expanded = !expanded;
+                  expandedRowIds = expanded ? rows.map((row) => row.id) : [];
+
+                  dispatch('click:header--expand', { expanded });
+                }}"
+              >
+                <ChevronRight16 class="bx--table-expand__svg" />
+              </button>
+            {/if}
+          </th>
+        {/if}
         {#each headers as header, i (header.key)}
           <TableHeader
             on:click="{() => {
@@ -148,11 +193,37 @@
     <TableBody>
       {#each sorting ? sortedRows : rows as row, i (row.id)}
         <TableRow
+          class="{expandedRows[row.id] ? 'bx--expandable-row' : ''} {expandable ? 'bx--parent-row' : ''} {expandable && parentRowId === row.id ? 'bx--expandable-row--hover' : ''}"
           on:click="{() => {
             dispatch('click', { row });
             dispatch('click:row', row);
           }}"
         >
+          {#if expandable}
+            <TableCell
+              class="bx--table-expand"
+              headers="expand"
+              data-previous-value="{expandedRows[row.id] ? 'collapsed' : undefined}"
+            >
+              <button
+                type="button"
+                class:bx--table-expand__button="{true}"
+                aria-label="{expandedRows[row.id] ? 'Collapse current row' : 'Expand current row'}"
+                on:click="{() => {
+                  const rowExpanded = !!expandedRows[row.id];
+
+                  expandedRowIds = rowExpanded ? expandedRowIds.filter((id) => id !== row.id) : [...expandedRowIds, row.id];
+
+                  dispatch('click:row--expand', {
+                    row,
+                    expanded: !rowExpanded,
+                  });
+                }}"
+              >
+                <ChevronRight16 class="bx--table-expand__svg" />
+              </button>
+            </TableCell>
+          {/if}
           {#each row.cells as cell, j (cell.key)}
             <TableCell
               on:click="{() => {
@@ -164,8 +235,26 @@
             </TableCell>
           {/each}
         </TableRow>
+
+        {#if expandable && expandedRows[row.id]}
+          <tr
+            data-child-row
+            class:bx--expandable-row="{true}"
+            on:mouseenter="{() => {
+              parentRowId = row.id;
+            }}"
+            on:mouseleave="{() => {
+              parentRowId = null;
+            }}"
+          >
+            <TableCell colspan="{headers.length + 1}">
+              <div class:bx--child-row-inner-container="{true}">
+                <slot name="expanded-row" row="{row}" />
+              </div>
+            </TableCell>
+          </tr>
+        {/if}
       {/each}
     </TableBody>
   </Table>
 </TableContainer>
-</slot>

src/DataTable/TableRow.svelte

@@ -5,7 +5,7 @@
    */
   export let isSelected = false;
 
-  // TODO: include ariaLabel, onExpand, isExpanded, isSelected
+  // TODO: include ariaLabel, isSelected
 </script>
 
 <tr