WIP: Beginnings of Datatable component

packages/materialdesign-components/package.json

@@ -41,6 +41,7 @@
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
   "dependencies": {
     "@material/checkbox": "^4.0.0",
+    "@material/data-table": "^5.0.0",
     "@material/form-field": "^4.0.0",
     "@material/radio": "^4.0.0",
     "@material/textfield": "^4.0.0"

packages/materialdesign-components/src/Datatable/Datatable.svelte

@@ -0,0 +1,44 @@
+<script>
+  import { onMount, setContext } from "svelte"
+  import { MDCDataTable } from "@material/data-table"
+  import DatatableRow from "./DatatableRow.svelte"
+  import DatatableCell from "./DatatableCell.svelte"
+  import ClassBuilder from "../ClassBuilder.js"
+
+  const cb = new ClassBuilder("data-table")
+  setContext("BBMD:data-table:cb", cb)
+
+  let datatable = null
+  let instance = null
+
+  onMount(() => {
+    if (!!datatable) instance = new MDCDataTable(datatable)
+    return () => {
+      !!instance && instance.destroy()
+      instance = null
+    }
+  })
+</script>
+
+<div class={cb.block()}>
+  <table class={cb.elem`table`} aria-label="Material Design Datatable">
+    <thead>
+      <DatatableRow isHeader>
+        <DatatableCell isHeader>Id</DatatableCell>
+        <DatatableCell isHeader>First Name</DatatableCell>
+        <DatatableCell isHeader>Second Name</DatatableCell>
+        <DatatableCell isHeader>Gender</DatatableCell>
+        <DatatableCell isHeader>Address</DatatableCell>
+      </DatatableRow>
+    </thead>
+    <tbody class={cb.elem`content`}>
+      <DatatableRow>
+        <DatatableCell numeric>123456</DatatableCell>
+        <DatatableCell>Conor</DatatableCell>
+        <DatatableCell>McKeown</DatatableCell>
+        <DatatableCell>Male</DatatableCell>
+        <DatatableCell>1 Cool Street</DatatableCell>
+      </DatatableRow>
+    </tbody>
+  </table>
+</div>

packages/materialdesign-components/src/Datatable/DatatableCell.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let isHeader = false
+  export let numeric = false
+
+  const cb = getContext("BBMD:data-table:cb")
+
+  let elementName = isHeader ? "header-cell" : "cell"
+  let modifiers = { numeric }
+  let props = { modifiers }
+  let cellClass = cb.build({ elementName, props })
+</script>
+
+{#if isHeader}
+  <th class={cellClass} role="columnheader" scope="col">
+    <slot />
+  </th>
+{:else}
+  <td class={cellClass}>
+    <slot />
+  </td>
+{/if}

packages/materialdesign-components/src/Datatable/DatatableRow.svelte

@@ -0,0 +1,18 @@
+<script>
+  import { getContext } from "svelte"
+
+  export let isHeader = false
+  let selected = false
+
+  const cb = getContext("BBMD:data-table:cb")
+
+  let elementName = isHeader ? "header-row" : "row"
+  let modifiers = { selected }
+  let props = { modifiers }
+
+  let rowClass = cb.build({ elementName, props })
+</script>
+
+<tr class={rowClass} on:click={() => (selected = !selected)}>
+  <slot />
+</tr>