diff --git a/packages/builder/package.json b/packages/builder/package.json
index bd76d10ee1..bc1abf3ff1 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@budibase/bbui": "^1.58.2",
+    "@budibase/bbui": "^1.58.4",
     "@budibase/client": "^0.7.6",
     "@budibase/colorpicker": "1.0.1",
     "@budibase/string-templates": "^0.7.6",
diff --git a/packages/builder/yarn.lock b/packages/builder/yarn.lock
index 9946326ed4..fa94386f00 100644
--- a/packages/builder/yarn.lock
+++ b/packages/builder/yarn.lock
@@ -842,10 +842,17 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.58.2":
-  version "1.58.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.2.tgz#1b9a5b1bf20597c1ea85ebba69acfec01ef6edce"
-  integrity sha512-Gn4yCNpoVhtVhRDuWEYdaBK/oAfccTvehywgbyH4sHKaY7aQ7v0679nsJsOHBjNPleKy5YN3ZLhneh5k3F1O2Q==
+<<<<<<< HEAD
+"@budibase/bbui@^1.58.4":
+  version "1.58.4"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
+  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
+=======
+"@budibase/bbui@^1.58.3":
+  version "1.58.3"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.3.tgz#86ad6aa68eec7426e1ccdf1f7e7fc957cb57d3a3"
+  integrity sha512-PpbxfBhVpmP0EO1nPBhrz486EHCIgtJlXELC/ElzjG+FCQZSCvDSM7mq/97FOW35iYdTiQTlwFgOtvOgT1P8IQ==
+>>>>>>> 10f6d871354dace180c86aefb389a97f7925b902
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"
diff --git a/packages/client/src/components/Provider.svelte b/packages/client/src/components/Provider.svelte
index bc95412bab..3c894f6723 100644
--- a/packages/client/src/components/Provider.svelte
+++ b/packages/client/src/components/Provider.svelte
@@ -11,16 +11,21 @@
   // Clone and create new data context for this component tree
   const context = getContext("context")
   const component = getContext("component")
-  const newContext = createContextStore($context)
+  const newContext = createContextStore()
   setContext("context", newContext)
+
+  let initiated = false
   $: providerKey = key || $component.id
 
+  // Add data context
+  $: {
+    newContext.actions.provideData(providerKey, $context, data)
+    initiated = true
+  }
+
   // Instance ID is unique to each instance of a provider
   let instanceId
 
-  // Add data context
-  $: data !== undefined && newContext.actions.provideData(providerKey, data)
-
   // Add actions context
   $: {
     if (instanceId) {
@@ -51,4 +56,6 @@
   })
 </script>
 
-<slot />
+{#if initiated}
+  <slot />
+{/if}
diff --git a/packages/client/src/store/context.js b/packages/client/src/store/context.js
index 80777cbeff..5725f94231 100644
--- a/packages/client/src/store/context.js
+++ b/packages/client/src/store/context.js
@@ -1,22 +1,20 @@
 import { writable } from "svelte/store"
 
-export const createContextStore = existingContext => {
-  const store = writable({ ...existingContext })
+export const createContextStore = () => {
+  const store = writable({})
 
   // Adds a data context layer to the tree
-  const provideData = (providerId, data) => {
-    if (!providerId) {
-      return
-    }
-    store.update(state => {
-      state[providerId] = data
+  const provideData = (providerId, context, data) => {
+    let newData = { ...context }
+    if (providerId && data !== undefined) {
+      newData[providerId] = data
 
       // Keep track of the closest component ID so we can later hydrate a "data" prop.
       // This is only required for legacy bindings that used "data" rather than a
       // component ID.
-      state.closestComponentId = providerId
-      return state
-    })
+      newData.closestComponentId = providerId
+    }
+    store.set(newData)
   }
 
   // Adds an action context layer to the tree
@@ -32,7 +30,6 @@ export const createContextStore = existingContext => {
 
   return {
     subscribe: store.subscribe,
-    update: store.update,
     actions: { provideData, provideAction },
   }
 }
diff --git a/packages/standard-components/package.json b/packages/standard-components/package.json
index 44db22348d..ec179f934a 100644
--- a/packages/standard-components/package.json
+++ b/packages/standard-components/package.json
@@ -40,7 +40,7 @@
   "gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.1.0",
-    "@budibase/bbui": "^1.55.1",
+    "@budibase/bbui": "^1.58.4",
     "@budibase/svelte-ag-grid": "^0.0.16",
     "@spectrum-css/actionbutton": "^1.0.0-beta.1",
     "@spectrum-css/button": "^3.0.0-beta.6",
diff --git a/packages/standard-components/src/RowDetail.svelte b/packages/standard-components/src/RowDetail.svelte
index ed46fd6927..8a413dfb43 100644
--- a/packages/standard-components/src/RowDetail.svelte
+++ b/packages/standard-components/src/RowDetail.svelte
@@ -1,46 +1,57 @@
 <script>
   import { onMount, getContext } from "svelte"
 
-  const { API, screenStore, routeStore, Provider, styleable } = getContext(
-    "sdk"
-  )
-  const component = getContext("component")
-
   export let table
 
+  const {
+    API,
+    screenStore,
+    routeStore,
+    Provider,
+    styleable,
+    ActionTypes,
+  } = getContext("sdk")
+  const component = getContext("component")
   let headers = []
   let row
 
-  async function fetchFirstRow() {
-    const rows = await API.fetchTableData(table)
-    return Array.isArray(rows) && rows.length ? rows[0] : { tableId: table }
+  const fetchFirstRow = async tableId => {
+    const rows = await API.fetchTableData(tableId)
+    return Array.isArray(rows) && rows.length ? rows[0] : { tableId }
   }
 
-  async function fetchData() {
-    if (!table) {
+  const fetchData = async (rowId, tableId) => {
+    if (!tableId) {
       return
     }
 
     const pathParts = window.location.pathname.split("/")
-    const routeParamId = $routeStore.routeParams.id
 
     // if srcdoc, then we assume this is the builder preview
-    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && table) {
-      row = await fetchFirstRow()
-    } else if (routeParamId) {
-      row = await API.fetchRow({ tableId: table, rowId: routeParamId })
+    if ((pathParts.length === 0 || pathParts[0] === "srcdoc") && tableId) {
+      row = await fetchFirstRow(tableId)
+    } else if (rowId) {
+      row = await API.fetchRow({ tableId, rowId })
     } else {
       throw new Error("Row ID was not supplied to RowDetail")
     }
   }
 
-  onMount(fetchData)
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData($routeStore.routeParams.id, table),
+      metadata: { datasource: { type: "table", tableId: table } },
+    },
+  ]
+
+  onMount(() => fetchData($routeStore.routeParams.id, table))
 </script>
 
 {#if row}
-  <div use:styleable={$component.styles}>
-    <Provider data={row}>
+  <Provider data={row} {actions}>
+    <div use:styleable={$component.styles}>
       <slot />
-    </Provider>
-  </div>
+    </div>
+  </Provider>
 {/if}
diff --git a/packages/standard-components/yarn.lock b/packages/standard-components/yarn.lock
index f0864bff24..069baf04b2 100644
--- a/packages/standard-components/yarn.lock
+++ b/packages/standard-components/yarn.lock
@@ -44,10 +44,10 @@
     lodash "^4.17.19"
     to-fast-properties "^2.0.0"
 
-"@budibase/bbui@^1.55.1":
-  version "1.56.2"
-  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.56.2.tgz#bb8f7d9b9b5ed06a22df877fbe028780d7602471"
-  integrity sha512-cWYkT1FNwNGTjisxtC5/MlQ1zeu7MYbMJsD6UyCEW3Ku6JIQZ6jyOkV6HKrmNND8VzVfddEGpzR37q+NoDpDFQ==
+"@budibase/bbui@^1.58.4":
+  version "1.58.4"
+  resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.4.tgz#a74d66b3dd715b0a9861a0f86bc0b863fd8f1d44"
+  integrity sha512-1oEVt7zMREM594CAUIXqOtiuP4Sx4FbfgPBHTZ+t4RhFfbFqvU7yyakqPZM2LhTAmO5Rfa+c+dfFLh+y1++KaA==
   dependencies:
     markdown-it "^12.0.2"
     quill "^1.3.7"