diff --git a/packages/client/src/state/bbComponentApi.js b/packages/client/src/state/bbComponentApi.js
index f51a7e2d24..d130a4b7ae 100644
--- a/packages/client/src/state/bbComponentApi.js
+++ b/packages/client/src/state/bbComponentApi.js
@@ -3,6 +3,7 @@ import { setState, setStateFromBinding } from "./setState"
 import { trimSlash } from "../common/trimSlash"
 import { isBound } from "./parseBinding"
 import { attachChildren } from "../render/attachChildren"
+import { getContext, setContext } from "./getSetContext"
 
 export const bbFactory = ({
   store,
@@ -60,6 +61,8 @@ export const bbFactory = ({
       setState: (path, value) => setState(store, path, value),
       getStateOrValue: (prop, currentContext) =>
         getStateOrValue(getCurrentState(), prop, currentContext),
+      getContext: getContext(treeNode),
+      setContext: setContext(treeNode),
       store: store,
       relativeUrl,
       api,
diff --git a/packages/client/src/state/getSetContext.js b/packages/client/src/state/getSetContext.js
new file mode 100644
index 0000000000..58dbb22d2c
--- /dev/null
+++ b/packages/client/src/state/getSetContext.js
@@ -0,0 +1,11 @@
+export const setContext = treeNode => (key, value) =>
+  (treeNode.context[key] = value)
+
+export const getContext = treeNode => key => {
+  if (treeNode.context && treeNode.context[key] !== undefined)
+    return treeNode.context[key]
+
+  if (!treeNode.context.$parent) return
+
+  return getContext(treeNode.parentNode)(key)
+}
diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte
index 3e7e2c7b11..07d455adab 100644
--- a/packages/materialdesign-components/src/Datatable/Datatable.svelte
+++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte
@@ -10,6 +10,7 @@
   export let onLoad
 
   const cb = new ClassBuilder("data-table")
+  _bb.setContext("BBMD:data-table:cb", cb)
 
   let datatable = null
   let instance = null
diff --git a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte
index ad7108ff9c..6e6e2d2c54 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte
@@ -1,10 +1,9 @@
 <script>
 import { getContext } from "svelte"
-import ClassBuilder from "../ClassBuilder.js"
 
 export let _bb
 
-const cb = new ClassBuilder("data-table")
+const cb =  _bb.getContext("BBMD:data-table:cb")
 
 let tbody
 
diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
index d0685f695d..9b14cacb4c 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte
@@ -1,12 +1,11 @@
 <script>
   import { getContext } from "svelte"
-  import ClassBuilder from "../ClassBuilder.js"
-  
+
   export let isHeader = false
   export let numeric = false
   export let _bb
 
-  const cb = new ClassBuilder("data-table")
+  const cb =  _bb.getContext("BBMD:data-table:cb")
 
   let elementName = isHeader ? "header-cell" : "cell"
   let modifiers = { numeric }
diff --git a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte
index 82f260ed57..3f9950920d 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte
@@ -1,10 +1,8 @@
 <script>
 
-import ClassBuilder from "../ClassBuilder.js"
-
 export let _bb
 
-const cb = new ClassBuilder("data-table")
+const cb =  _bb.getContext("BBMD:data-table:cb")
 
 let thead
 
diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
index 520b666776..9325e6bc43 100644
--- a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
+++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte
@@ -1,7 +1,6 @@
 <script>
   import { getContext } from "svelte";
-  import ClassBuilder from "../ClassBuilder.js"
-  
+
   export let onSelect = () => {};
   export let isHeader = false;
 
@@ -10,7 +9,7 @@
   let row = null;
   let selected = false;
 
-  const cb = new ClassBuilder("data-table")
+  const cb =  _bb.getContext("BBMD:data-table:cb")
 
   let elementName = isHeader ? "header-row" : "row";
   let modifiers = {};