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,63 +137,124 @@
       });
     }
   }
-  $: props = {
-    headers,
-    rows,
-  };
 </script>
 
-<slot props="{props}">
+<TableContainer title="{title}" description="{description}" {...$$restProps}>
-  <TableContainer title="{title}" description="{description}" {...$$restProps}>
+  <Table
-    <Table
+    zebra="{zebra}"
-      zebra="{zebra}"
+    size="{size}"
-      size="{size}"
+    stickyHeader="{stickyHeader}"
-      stickyHeader="{stickyHeader}"
+    sortable="{sortable}"
-      sortable="{sortable}"
+  >
-    >
+    <TableHead>
-      <TableHead>
+      <TableRow>
-        <TableRow>
+        {#if expandable}
-          {#each headers as header, i (header.key)}
+          <th
-            <TableHeader
+            scope="col"
-              on:click="{() => {
+            class:bx--table-expand="{true}"
-                dispatch('click', { header });
+            data-previous-value="{expanded ? 'collapsed' : undefined}"
-                let active = header.key === $sortHeader.key;
-                let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
-                let sortDirection = sortDirectionMap[currentSortDirection];
-                dispatch('click:header', { header, sortDirection });
-                sortHeader.set({
-                  id: sortDirection === 'none' ? null : $thKeys[header.key],
-                  key: header.key,
-                  sortDirection,
-                });
-              }}"
-            >
-              {header.value}
-            </TableHeader>
-          {/each}
-        </TableRow>
-      </TableHead>
-      <TableBody>
-        {#each sorting ? sortedRows : rows as row, i (row.id)}
-          <TableRow
-            on:click="{() => {
-              dispatch('click', { row });
-              dispatch('click:row', row);
-            }}"
           >
-            {#each row.cells as cell, j (cell.key)}
+            {#if batchExpansion}
-              <TableCell
+              <button
+                type="button"
+                class:bx--table-expand__button="{true}"
                 on:click="{() => {
-                  dispatch('click', { row, cell });
+                  expanded = !expanded;
-                  dispatch('click:cell', cell);
+                  expandedRowIds = expanded ? rows.map((row) => row.id) : [];
+
+                  dispatch('click:header--expand', { expanded });
                 }}"
               >
-                {cell.value}
+                <ChevronRight16 class="bx--table-expand__svg" />
-              </TableCell>
+              </button>
-            {/each}
+            {/if}
-          </TableRow>
+          </th>
+        {/if}
+        {#each headers as header, i (header.key)}
+          <TableHeader
+            on:click="{() => {
+              dispatch('click', { header });
+              let active = header.key === $sortHeader.key;
+              let currentSortDirection = active ? $sortHeader.sortDirection : 'none';
+              let sortDirection = sortDirectionMap[currentSortDirection];
+              dispatch('click:header', { header, sortDirection });
+              sortHeader.set({
+                id: sortDirection === 'none' ? null : $thKeys[header.key],
+                key: header.key,
+                sortDirection,
+              });
+            }}"
+          >
+            {header.value}
+          </TableHeader>
         {/each}
-      </TableBody>
+      </TableRow>
-    </Table>
+    </TableHead>
-  </TableContainer>
+    <TableBody>
-</slot>
+      {#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="{() => {
+                dispatch('click', { row, cell });
+                dispatch('click:cell', cell);
+              }}"
+            >
+              {cell.value}
+            </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>

src/DataTable/TableRow.svelte

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