Add hot reloading to search results

packages/standard-components/src/Search.svelte

@@ -1,6 +1,5 @@
 <script>
   import { getContext } from "svelte"
-  import { isEmpty } from "lodash/fp"
   import {
     Button,
     DatePicker,
@@ -10,10 +9,12 @@
     Input,
   } from "@budibase/bbui"
 
-  const { API, styleable, Provider, builderStore } = getContext("sdk")
+  const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
+    "sdk"
+  )
   const component = getContext("component")
 
-  export let table = []
+  export let table
   export let columns = []
   export let pageSize
   export let noRowsMessage
@@ -34,9 +35,16 @@
       search[next] === "" ? acc : { ...acc, [next]: search[next] },
     {}
   )
+  $: actions = [
+    {
+      type: ActionTypes.RefreshDatasource,
+      callback: () => fetchData(table, page),
+      metadata: { datasource: { type: "table", tableId: table } },
+    },
+  ]
 
   async function fetchData(table, page) {
-    if (!isEmpty(table)) {
+    if (table) {
       const tableDef = await API.fetchTableDefinition(table)
       schema = tableDef.schema
       rows = await API.searchTableData({
@@ -60,7 +68,8 @@
   }
 </script>
 
-<div use:styleable={$component.styles}>
+<Provider {actions}>
+  <div use:styleable={$component.styles}>
     <div class="query-builder">
       {#if schema}
         {#each columns as field}
@@ -127,7 +136,8 @@
         <Button primary on:click={nextPage}>Next</Button>
       {/if}
     </div>
-</div>
+  </div>
+</Provider>
 
 <style>
   p {