From ed26cb5dfebf1321905e89863d9ad37c29bcc440 Mon Sep 17 00:00:00 2001
From: Conor-Mack <cmckeown101@gmail.com>
Date: Mon, 17 Feb 2020 17:01:57 +0000
Subject: [PATCH 1/2] WIP: Beginnings of Datatable component

---
 .../materialdesign-components/package.json    |  1 +
 .../src/Datatable/Datatable.svelte            | 44 +++++++++++++++++++
 .../src/Datatable/DatatableCell.svelte        | 23 ++++++++++
 .../src/Datatable/DatatableRow.svelte         | 18 ++++++++
 .../src/Datatable/_style.scss                 |  0
 .../src/Datatable/index.js                    |  0
 6 files changed, 86 insertions(+)
 create mode 100644 packages/materialdesign-components/src/Datatable/Datatable.svelte
 create mode 100644 packages/materialdesign-components/src/Datatable/DatatableCell.svelte
 create mode 100644 packages/materialdesign-components/src/Datatable/DatatableRow.svelte
 create mode 100644 packages/materialdesign-components/src/Datatable/_style.scss
 create mode 100644 packages/materialdesign-components/src/Datatable/index.js

diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 48fc769d26..543fbcdf59 100644
--- a/packages/materialdesign-components/package.json
+++ b/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"
diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte
new file mode 100644
index 0000000000..1e15eb25bb
--- /dev/null
+++ b/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>
diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
new file mode 100644
index 0000000000..beb078d7cb
--- /dev/null
+++ b/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}
diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
new file mode 100644
index 0000000000..5cb03366f3
--- /dev/null
+++ b/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>
diff --git a/packages/materialdesign-components/src/Datatable/_style.scss b/packages/materialdesign-components/src/Datatable/_style.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/materialdesign-components/src/Datatable/index.js b/packages/materialdesign-components/src/Datatable/index.js
new file mode 100644
index 0000000000..e69de29bb2

From 038601684f3f08c57ca6644e1c0de6255dbb683a Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Tue, 18 Feb 2020 15:05:09 +0000
Subject: [PATCH 2/2] Completed MD Datatable and General Tidyup

---
 .../materialdesign-components/components.json | 74 ++++++++++---------
 .../materialdesign-components/package.json    |  2 +-
 .../src/Button.svelte                         | 12 ---
 .../src/Button/Button.svelte                  |  4 +-
 .../src/Button/index.js                       |  2 +-
 .../src/Checkbox/index.js                     |  4 +-
 .../src/{ => Common}/Icon.svelte              |  0
 .../src/{ => Common}/Ripple.js                |  0
 .../src/Datatable/Datatable.svelte            | 57 +++++++++-----
 .../src/Datatable/DatatableRow.svelte         | 26 ++++---
 .../src/Datatable/_style.scss                 |  1 +
 .../src/Datatable/index.js                    |  2 +
 .../materialdesign-components/src/H1.svelte   |  8 --
 .../src/Radiobutton/index.js                  |  4 +-
 .../src/Test/TestApp.svelte                   | 34 +++++----
 .../src/Test/props.js                         | 42 ++++++-----
 .../src/Test/testComponents.js                | 30 ++++----
 .../src/Textfield/Textfield.svelte            |  2 +-
 .../src/Textfield/index.js                    |  2 +-
 .../src/Typography/index.js                   | 24 +++---
 .../materialdesign-components/src/index.js    | 13 ++--
 21 files changed, 186 insertions(+), 157 deletions(-)
 delete mode 100644 packages/materialdesign-components/src/Button.svelte
 rename packages/materialdesign-components/src/{ => Common}/Icon.svelte (100%)
 rename packages/materialdesign-components/src/{ => Common}/Ripple.js (100%)
 delete mode 100644 packages/materialdesign-components/src/H1.svelte

diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index dc01faa4f9..0f2e7f17fd 100644
--- a/packages/materialdesign-components/components.json
+++ b/packages/materialdesign-components/components.json
@@ -1,24 +1,24 @@
 {
   "_lib": "./dist/index.js",
   "_generators": {},
-  "body1": {
-    "name": "body1",
+  "Body1": {
+    "name": "Body1",
     "description": "Sets the font properties as Roboto Body 1",
     "props": {
       "text": "string"
     }, 
     "tags": []
   },
-  "body2": {
-    "name": "body2",
+  "Body2": {
+    "name": "Body2",
     "description": "Sets the font properties as Roboto Body 2",
     "props": {
       "text": "string"
     }, 
     "tags": []
   },
-  "button": {
-    "name": "button",
+  "Button": {
+    "name": "Button",
     "description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
     "props": {
       "onClick": "event",
@@ -34,16 +34,16 @@
     },
     "tags": []
   },
-  "caption": {
-    "name": "caption",
+  "Caption": {
+    "name": "Caption",
     "description": "Sets the font properties as Roboto Caption",
     "props": {
       "text": "string"
     }, 
     "tags": []
   },
-  "checkbox": {
-    "name": "checkbox",
+  "Checkbox": {
+    "name": "Checkbox",
     "description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
     "props": {
       "onClick": "event",
@@ -56,72 +56,78 @@
     },
     "tags": []
   },
-  "h1": {
-    "name": "h1",
+  "Datatable": {
+    "name": "Datatable",
+    "description": "A Material Design component to represent tabular data.",
+    "props": {},
+    "tags": []
+  },
+  "H1": {
+    "name": "H1",
     "description": "Sets the font properties as Roboto Headline1",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "h2": {
-    "name": "h2",
+  "H2": {
+    "name": "H2",
     "description": "Sets the font properties as Roboto Headline2",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "h3": {
-    "name": "h3",
+  "H3": {
+    "name": "H3",
     "description": "Sets the font properties as Roboto Headline3",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "h4": {
-    "name": "h4",
+  "H4": {
+    "name": "H4",
     "description": "Sets the font properties as Roboto Headline4",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "h5": {
-    "name": "h5",
+  "H5": {
+    "name": "H5",
     "description": "Sets the font properties as Roboto Headline5",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "h6": {
-    "name": "h6",
+  "H6": {
+    "name": "H6",
     "description": "Sets the font properties as Roboto Headline6",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "label": {
-    "name": "label",
+  "Label": {
+    "name": "Label",
     "description": "A simple label component that displays its text in the standard Roboto Material Design font",
     "props": {
       "bold": "bool"
     },
     "tags": []
   },
-  "overline": {
-    "name": "overline",
+  "Overline": {
+    "name": "Overline",
     "description": "Sets the font properties as Roboto Overline",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "radiobutton": {
-    "name": "radiobutton",
+  "Radiobutton": {
+    "name": "Radiobutton",
     "description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.",
     "props": {
       "onClick": "event",
@@ -135,24 +141,24 @@
     },
     "tags": []
   },
-  "sub1": {
-    "name": "sub1",
+  "Sub1": {
+    "name": "Sub1",
     "description": "Sets the font properties as Roboto Subtitle1",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "sub2": {
-    "name": "sub2",
+  "Sub2": {
+    "name": "Sub2",
     "description": "Sets the font properties as Roboto Subtitle2",
     "props": {
       "text": "string"
     },
     "tags": []
   },
-  "textfield": {
-    "name": "textfield",
+  "Textfield": {
+    "name": "Textfield",
     "description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
     "props": {
       "onChange": "event",
diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json
index 543fbcdf59..a469e85754 100644
--- a/packages/materialdesign-components/package.json
+++ b/packages/materialdesign-components/package.json
@@ -41,7 +41,7 @@
   "gitHead": "115189f72a850bfb52b65ec61d932531bf327072",
   "dependencies": {
     "@material/checkbox": "^4.0.0",
-    "@material/data-table": "^5.0.0",
+    "@material/data-table": "4.0.0",
     "@material/form-field": "^4.0.0",
     "@material/radio": "^4.0.0",
     "@material/textfield": "^4.0.0"
diff --git a/packages/materialdesign-components/src/Button.svelte b/packages/materialdesign-components/src/Button.svelte
deleted file mode 100644
index ff2ea3eb72..0000000000
--- a/packages/materialdesign-components/src/Button.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-  import "@material/button/mdc-button.scss"
-  export let raised = false
-
-  let c = raised ? "mdc-button mdc-button--raised" : "mdc-button"
-</script>
-
-<button class={c}>
-  <div class="mdc-button__ripple" />
-
-  <span class="mdc-button__label">Button</span>
-</button>
diff --git a/packages/materialdesign-components/src/Button/Button.svelte b/packages/materialdesign-components/src/Button/Button.svelte
index c3649f6d34..e4157ea95b 100644
--- a/packages/materialdesign-components/src/Button/Button.svelte
+++ b/packages/materialdesign-components/src/Button/Button.svelte
@@ -1,7 +1,7 @@
 <script>
   import { setContext, getContext } from "svelte"
-  import Icon from "../Icon.svelte"
-  import ripple from "../Ripple.js"
+  import Icon from "../Common/Icon.svelte"
+  import ripple from "../Common/Ripple.js"
   import ClassBuilder from "../ClassBuilder.js"
 
   const cb = new ClassBuilder("button", ["primary", "medium"])
diff --git a/packages/materialdesign-components/src/Button/index.js b/packages/materialdesign-components/src/Button/index.js
index 7223919599..981d756d80 100644
--- a/packages/materialdesign-components/src/Button/index.js
+++ b/packages/materialdesign-components/src/Button/index.js
@@ -1,2 +1,2 @@
 import "./_index.scss"
-export { default as button } from "./Button.svelte"
+export { default as Button } from "./Button.svelte"
diff --git a/packages/materialdesign-components/src/Checkbox/index.js b/packages/materialdesign-components/src/Checkbox/index.js
index caea52aa35..b97bcc912f 100644
--- a/packages/materialdesign-components/src/Checkbox/index.js
+++ b/packages/materialdesign-components/src/Checkbox/index.js
@@ -1,4 +1,4 @@
 import "./_style.scss";
-export { default as checkbox } from "./Checkbox.svelte";
-export { default as checkboxgroup } from "./CheckboxGroup.svelte";
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as Checkboxgroup } from "./CheckboxGroup.svelte";
 
diff --git a/packages/materialdesign-components/src/Icon.svelte b/packages/materialdesign-components/src/Common/Icon.svelte
similarity index 100%
rename from packages/materialdesign-components/src/Icon.svelte
rename to packages/materialdesign-components/src/Common/Icon.svelte
diff --git a/packages/materialdesign-components/src/Ripple.js b/packages/materialdesign-components/src/Common/Ripple.js
similarity index 100%
rename from packages/materialdesign-components/src/Ripple.js
rename to packages/materialdesign-components/src/Common/Ripple.js
diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte
index 1e15eb25bb..7021feafe0 100644
--- a/packages/materialdesign-components/src/Datatable/Datatable.svelte
+++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte
@@ -1,8 +1,9 @@
 <script>
   import { onMount, setContext } from "svelte"
   import { MDCDataTable } from "@material/data-table"
-  import DatatableRow from "./DatatableRow.svelte"
-  import DatatableCell from "./DatatableCell.svelte"
+  import Row from "./DatatableRow.svelte"
+  import Cell from "./DatatableCell.svelte"
+  import { Button } from "../Button"
   import ClassBuilder from "../ClassBuilder.js"
 
   const cb = new ClassBuilder("data-table")
@@ -20,25 +21,47 @@
   })
 </script>
 
-<div class={cb.block()}>
+<div bind:this={datatable} class={cb.build()}>
   <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>
+      <Row isHeader>
+        <Cell isHeader>Id</Cell>
+        <Cell isHeader>First Name</Cell>
+        <Cell isHeader>Second Name</Cell>
+        <Cell isHeader>Gender</Cell>
+        <Cell isHeader>Address</Cell>
+        <Cell isHeader>Actions</Cell>
+      </Row>
     </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>
+      <Row>
+        <Cell>123456</Cell>
+        <Cell>Conor</Cell>
+        <Cell>McKeown</Cell>
+        <Cell>Male</Cell>
+        <Cell>1 Cool Street</Cell>
+        <Cell>
+          <Button
+            text="Select"
+            variant="unelevated"
+            colour="secondary"
+            size="small" />
+        </Cell>
+      </Row>
+      <Row>
+        <Cell>789101</Cell>
+        <Cell>Joe</Cell>
+        <Cell>Bloggs</Cell>
+        <Cell>Male</Cell>
+        <Cell>2 Cool Street</Cell>
+        <Cell>
+          <Button
+            text="Select"
+            variant="unelevated"
+            colour="secondary"
+            size="small" />
+        </Cell>
+      </Row>
     </tbody>
   </table>
 </div>
diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
index 5cb03366f3..6ad16f94d6 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
@@ -1,18 +1,26 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext } from "svelte";
 
-  export let isHeader = false
-  let selected = false
+  export let onSelect = () => {};
+  export let isHeader = false;
+  let row = null;
+  let selected = false;
 
-  const cb = getContext("BBMD:data-table:cb")
+  const cb = getContext("BBMD:data-table:cb");
 
-  let elementName = isHeader ? "header-row" : "row"
-  let modifiers = { selected }
-  let props = { modifiers }
+  let elementName = isHeader ? "header-row" : "row";
+  let modifiers = {};
 
-  let rowClass = cb.build({ elementName, props })
+  $: modifiers = { selected };
+  $: props = { modifiers };
+  $: rowClass = cb.build({ elementName, props });
+
+  function rowSelected() {
+    selected = !selected;
+    onSelect();
+  }
 </script>
 
-<tr class={rowClass} on:click={() => (selected = !selected)}>
+<tr bind:this={row} class={rowClass} on:click={rowSelected}>
   <slot />
 </tr>
diff --git a/packages/materialdesign-components/src/Datatable/_style.scss b/packages/materialdesign-components/src/Datatable/_style.scss
index e69de29bb2..3304e1e603 100644
--- a/packages/materialdesign-components/src/Datatable/_style.scss
+++ b/packages/materialdesign-components/src/Datatable/_style.scss
@@ -0,0 +1 @@
+@import "@material/data-table/mdc-data-table";
diff --git a/packages/materialdesign-components/src/Datatable/index.js b/packages/materialdesign-components/src/Datatable/index.js
index e69de29bb2..2be32d546f 100644
--- a/packages/materialdesign-components/src/Datatable/index.js
+++ b/packages/materialdesign-components/src/Datatable/index.js
@@ -0,0 +1,2 @@
+import "./_style.scss";
+export { default as Datatable } from "./Datatable.svelte";
diff --git a/packages/materialdesign-components/src/H1.svelte b/packages/materialdesign-components/src/H1.svelte
deleted file mode 100644
index 40a0765ca1..0000000000
--- a/packages/materialdesign-components/src/H1.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script>
-  export let text = ""
-  export let className = ""
-
-  export let _bb
-</script>
-
-<h1 class={className}>{text}</h1>
diff --git a/packages/materialdesign-components/src/Radiobutton/index.js b/packages/materialdesign-components/src/Radiobutton/index.js
index b2b861569c..9f4514c22e 100644
--- a/packages/materialdesign-components/src/Radiobutton/index.js
+++ b/packages/materialdesign-components/src/Radiobutton/index.js
@@ -1,3 +1,3 @@
 import "./_style.scss";
-export { default as radiobutton } from "./Radiobutton.svelte";
-export { default as radiobuttongroup } from "./RadiobuttonGroup.svelte";
+export { default as Radiobutton } from "./Radiobutton.svelte";
+export { default as Radiobuttongroup } from "./RadiobuttonGroup.svelte";
diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte
index f9b2317503..bdca2e72b0 100644
--- a/packages/materialdesign-components/src/Test/TestApp.svelte
+++ b/packages/materialdesign-components/src/Test/TestApp.svelte
@@ -3,14 +3,15 @@
   import { props } from "./props"
   let _bb
   const {
-    h1,
-    overline,
-    button,
-    textfield,
-    checkbox,
-    checkboxgroup,
-    radiobutton,
-    radiobuttongroup,
+    H1,
+    Overline,
+    Button,
+    Textfield,
+    Checkbox,
+    Checkboxgroup,
+    Radiobutton,
+    Radiobuttongroup,
+    Datatable,
   } = props
 
   let currentComponent
@@ -22,14 +23,15 @@
         props: {
           _component: "testcomponents/rootComponent",
           _children: [
-            h1,
-            overline,
-            button,
-            textfield,
-            checkbox,
-            checkboxgroup,
-            radiobutton,
-            radiobuttongroup,
+            H1,
+            Overline,
+            Button,
+            Textfield,
+            Checkbox,
+            Checkboxgroup,
+            Radiobutton,
+            Radiobuttongroup,
+            Datatable,
           ],
         },
       }
diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js
index 40ed88c920..a94c171537 100644
--- a/packages/materialdesign-components/src/Test/props.js
+++ b/packages/materialdesign-components/src/Test/props.js
@@ -1,17 +1,17 @@
 
 export const props = {
-  h1: {
-    _component: "@budibase/materialdesign-components/h1",
+  H1: {
+    _component: "@budibase/materialdesign-components/H1",
     _children: [],
     text: "Im a big header",
   },
-  overline: {
-    _component: "@budibase/materialdesign-components/overline",
+  Overline: {
+    _component: "@budibase/materialdesign-components/Overline",
     _children: [],
     text: "Im a wee overline",
   },
-  button: {
-    _component: "@budibase/materialdesign-components/button",
+  Button: {
+    _component: "@budibase/materialdesign-components/Button",
     _children: [],
     variant: "raised",
     colour: "secondary",
@@ -24,13 +24,13 @@ export const props = {
     disabled: false,
     onClick: () => alert`Button Clicked`,
   },
-  icon: {
-    _component: "@budibase/materialdesign-components/icon",
+  Icon: {
+    _component: "@budibase/materialdesign-components/Icon",
     _children: [],
     icon: "",
   },
-  textfield: {
-    _component: "@budibase/materialdesign-components/textfield",
+  Textfield: {
+    _component: "@budibase/materialdesign-components/Textfield",
     _children: [],
     label: "First",
     colour: "secondary",
@@ -39,15 +39,15 @@ export const props = {
     helperText: "Add Surname",
     onChange: text => console.log("Text: ", text),
   },
-  checkbox: {
-    _component: "@budibase/materialdesign-components/checkbox",
+  Checkbox: {
+    _component: "@budibase/materialdesign-components/Checkbox",
     _children: [],
     id: "test-check",
     label: "Check Yo Self",
     onClick: () => alert`Before ya reck yo'self`,
   },
-  checkboxgroup: {
-    _component: "@budibase/materialdesign-components/checkboxgroup",
+  Checkboxgroup: {
+    _component: "@budibase/materialdesign-components/Checkboxgroup",
     _children: [],
     label: "Whats your favourite?",
     items: [
@@ -57,15 +57,15 @@ export const props = {
     ],
     onChange: selectedItems => console.log(selectedItems),
   },
-  radiobutton: {
-    _component: "@budibase/materialdesign-components/radiobutton",
+  Radiobutton: {
+    _component: "@budibase/materialdesign-components/Radiobutton",
     _children: [],
     label: "Hi radio",
     alignEnd: true,
     onClick: () => alert`Roger That`,
   },
-  radiobuttongroup: {
-    _component: "@budibase/materialdesign-components/radiobuttongroup",
+  Radiobuttongroup: {
+    _component: "@budibase/materialdesign-components/Radiobuttongroup",
     _children: [],
     label: "Preferred method of contact: ",
     orientation: "column",
@@ -75,5 +75,9 @@ export const props = {
       { label: "Social Media", value: 3 },
     ],
     onChange: selected => console.log(selected),
-  }
+  },
+  Datatable: {
+    _component: "@budibase/materialdesign-components/Datatable",
+    _children: [],
+  },
 }
diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js
index c9991a8942..7ac56d181d 100644
--- a/packages/materialdesign-components/src/Test/testComponents.js
+++ b/packages/materialdesign-components/src/Test/testComponents.js
@@ -1,23 +1,25 @@
 import {
   H1,
   Overline,
-  button,
-  icon,
-  textfield,
-  checkbox,
-  checkboxgroup,
-  radiobutton,
-  radiobuttongroup,
+  Button,
+  Icon,
+  Textfield,
+  Checkbox,
+  Checkboxgroup,
+  Radiobutton,
+  Radiobuttongroup,
+  Datatable,
 } from "@BBMD"
 
 export default {
   H1,
   Overline,
-  button,
-  icon,
-  textfield,
-  checkbox,
-  checkboxgroup,
-  radiobutton,
-  radiobuttongroup,
+  Button,
+  Icon,
+  Textfield,
+  Checkbox,
+  Checkboxgroup,
+  Radiobutton,
+  Radiobuttongroup,
+  Datatable,
 }
diff --git a/packages/materialdesign-components/src/Textfield/Textfield.svelte b/packages/materialdesign-components/src/Textfield/Textfield.svelte
index 3ff0b00a17..2a1f74bc19 100644
--- a/packages/materialdesign-components/src/Textfield/Textfield.svelte
+++ b/packages/materialdesign-components/src/Textfield/Textfield.svelte
@@ -8,7 +8,7 @@
   import FloatingLabel from "../Common/FloatingLabel.svelte"
   import HelperText from "./HelperText.svelte"
   import CharacterCounter from "./CharacterCounter.svelte"
-  import Icon from "../Icon.svelte"
+  import Icon from "../Common/Icon.svelte"
 
   const cb = new ClassBuilder("text-field", ["primary", "medium"])
 
diff --git a/packages/materialdesign-components/src/Textfield/index.js b/packages/materialdesign-components/src/Textfield/index.js
index 3e7621688d..43e9d46af0 100644
--- a/packages/materialdesign-components/src/Textfield/index.js
+++ b/packages/materialdesign-components/src/Textfield/index.js
@@ -1,2 +1,2 @@
 import "./_index.scss"
-export { default as textfield } from "./Textfield.svelte"
\ No newline at end of file
+export { default as Textfield } from "./Textfield.svelte"
\ No newline at end of file
diff --git a/packages/materialdesign-components/src/Typography/index.js b/packages/materialdesign-components/src/Typography/index.js
index 321080295b..374022db69 100644
--- a/packages/materialdesign-components/src/Typography/index.js
+++ b/packages/materialdesign-components/src/Typography/index.js
@@ -1,13 +1,13 @@
 import "./_style.scss";
-export { default as body1 } from "./Body1.svelte";
-export { default as body2 } from "./Body2.svelte";
-export { default as caption } from "./Caption.svelte";
-export { default as h1 } from "./H1.svelte";
-export { default as h2 } from "./H2.svelte";
-export { default as h3 } from "./H3.svelte";
-export { default as h4 } from "./H4.svelte";
-export { default as h5 } from "./H5.svelte";
-export { default as h6 } from "./H6.svelte";
-export { default as overline } from "./Overline.svelte";
-export { default as sub1 } from "./Sub1.svelte";
-export { default as sub2 } from "./Sub2.svelte";
+export { default as Body1 } from "./Body1.svelte";
+export { default as Body2 } from "./Body2.svelte";
+export { default as Caption } from "./Caption.svelte";
+export { default as H1 } from "./H1.svelte";
+export { default as H2 } from "./H2.svelte";
+export { default as H3 } from "./H3.svelte";
+export { default as H4 } from "./H4.svelte";
+export { default as H5 } from "./H5.svelte";
+export { default as H6 } from "./H6.svelte";
+export { default as Overline } from "./Overline.svelte";
+export { default as Sub1 } from "./Sub1.svelte";
+export { default as Sub2 } from "./Sub2.svelte";
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index 83acd5f26b..c5c98ba0cb 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/packages/materialdesign-components/src/index.js
@@ -1,10 +1,11 @@
 import "@material/theme/mdc-theme.scss";
 
-export { button } from "./Button"
-export { default as icon } from "./Icon.svelte"
-export { textfield } from "./Textfield"
+export { Button } from "./Button"
+export { default as Icon } from "./Common/Icon.svelte"
+export { Textfield } from "./Textfield"
 export * from "./Typography"
-export { checkbox, checkboxgroup } from "./Checkbox"
-export { radiobutton, radiobuttongroup } from "./Radiobutton"
-export { label } from "./Common/Label.svelte"
+export { Checkbox, Checkboxgroup } from "./Checkbox"
+export { Radiobutton, Radiobuttongroup } from "./Radiobutton"
+export { default as Label } from "./Common/Label.svelte"
+export { Datatable } from "./Datatable"