Add initial structure of table with search block

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -1,4 +1,11 @@
 [
+  {
+    "name": "Blocks",
+    "icon": "Article",
+    "children": [
+      "tablewithsearch"
+    ]
+  },
   "section",
   "container",
   "dataprovider",

packages/client/manifest.json

@@ -2574,5 +2574,88 @@
         "label": "Horizontal"
       }
     ]
+  },
+  "tablewithsearch": {
+    "block": true,
+    "name": "Table with search",
+    "icon": "Table",
+    "styles": ["size"],
+    "settings": [
+      {
+        "type": "dataSource",
+        "label": "Data",
+        "key": "dataSource"
+      },
+      {
+        "type": "multifield",
+        "label": "Search Columns",
+        "key": "searchColumns",
+        "dependsOn": "dataSource",
+        "placeholder": "All columns"
+      },
+      {
+        "type": "filter",
+        "label": "Filtering",
+        "key": "filter"
+      },
+      {
+        "type": "field",
+        "label": "Sort Column",
+        "key": "sortColumn"
+      },
+      {
+        "type": "select",
+        "label": "Sort Order",
+        "key": "sortOrder",
+        "options": ["Ascending", "Descending"],
+        "defaultValue": "Descending"
+      },
+      {
+        "type": "boolean",
+        "label": "Paginate",
+        "key": "paginate",
+        "defaultValue": true
+      },
+      {
+        "type": "number",
+        "label": "Row Count",
+        "key": "rowCount",
+        "defaultValue": 8
+      },
+      {
+        "type": "multifield",
+        "label": "Table Columns",
+        "key": "tableColumns",
+        "dependsOn": "dataSource",
+        "placeholder": "All columns"
+      },
+      {
+        "type": "select",
+        "label": "Size",
+        "key": "size",
+        "defaultValue": "spectrum--medium",
+        "options": [
+          {
+            "label": "Medium",
+            "value": "spectrum--medium"
+          },
+          {
+            "label": "Large",
+            "value": "spectrum--large"
+          }
+        ]
+      },
+      {
+        "type": "boolean",
+        "label": "Quiet",
+        "key": "quiet"
+      },
+      {
+        "type": "boolean",
+        "label": "Auto Columns",
+        "key": "showAutoColumns",
+        "defaultValue": false
+      }
+    ]
   }
 }

packages/client/src/components/app/blocks/TableWithSearch.svelte

@@ -0,0 +1,99 @@
+<script>
+  import { getContext } from "svelte"
+  import { BlockBuilder } from "./block-builder"
+  import Component from "components/Component.svelte"
+
+  // Common props
+  export let searchColumns
+  export let dataSource
+
+  // Data provider props
+  export let filter
+  export let sortColumn
+  export let sortOrder
+  export let paginate
+
+  // Table props
+  export let tableColumns
+  export let showAutoColumns
+  export let rowCount
+  export let quiet
+  export let size
+
+  const { styleable } = getContext("sdk")
+  const component = getContext("component")
+
+  let instance
+  $: {
+    const builder = new BlockBuilder($component)
+
+    const form = builder.createComponent("form", {
+      dataSource,
+    })
+
+    let newFilter = [...(filter || [])]
+
+    // Add search bar if required
+    if (searchColumns?.length) {
+      const searchContainer = builder
+        .createComponent("container", {
+          direction: "row",
+          hAlign: "right",
+          vAlign: "middle",
+          gap: "M",
+          wrap: true,
+        })
+        .setStyles({
+          "margin-bottom": "20px",
+        })
+
+      searchColumns?.forEach(column => {
+        const field = builder.createComponent("stringfield", {
+          field: column,
+          placeholder: column,
+          label: column,
+        })
+
+        searchContainer.addChild(field)
+
+        newFilter.push({
+          field: column,
+          operator: "equal",
+          type: "string",
+          valueType: "Binding",
+          value: `{{ [${form.id}].[${column}] }}`,
+        })
+      })
+
+      form.addChild(searchContainer)
+    }
+
+    const dataProvider = builder.createComponent("dataprovider", {
+      dataSource,
+      filter: newFilter,
+      sortColumn,
+      sortOrder,
+      paginate,
+      limit: rowCount,
+    })
+
+    const table = builder.createComponent("table", {
+      dataProvider: `{{ literal [${dataProvider.id}] }}`,
+      columns: tableColumns,
+      showAutoColumns,
+      rowCount,
+      quiet,
+      size,
+    })
+
+    dataProvider.addChild(table)
+
+    form.addChild(dataProvider)
+    instance = form.build()
+    console.log("new instance")
+  }
+</script>
+
+<div use:styleable={$component.styles}>
+  <Component {instance} />
+</div>

packages/client/src/components/app/blocks/block-builder.js

@@ -0,0 +1,14 @@
+import { ComponentBuilder } from "./component-builder"
+
+export class BlockBuilder {
+  context
+  componentCount = 0
+
+  constructor(context) {
+    this.context = context
+  }
+
+  createComponent(type, props) {
+    return new ComponentBuilder(this, type, props)
+  }
+}

packages/client/src/components/app/blocks/component-builder.js

@@ -0,0 +1,49 @@
+export class ComponentBuilder {
+  context
+
+  constructor(blockBuilder, type, props) {
+    this.blockBuilder = blockBuilder
+    this.type = type
+    this.id = `${blockBuilder.context.id}-${blockBuilder.componentCount++}`
+    this.props = props
+    this.children = []
+    this.styles = null
+  }
+
+  setProp(key, value) {
+    this.props[key] = value
+    return this
+  }
+
+  setProps(props) {
+    this.props = {
+      ...this.props,
+      ...props,
+    }
+    return this
+  }
+
+  setStyles(styles) {
+    this.styles = styles
+    return this
+  }
+
+  addChild(component) {
+    this.children.push(component)
+    return this
+  }
+
+  build() {
+    return {
+      _component: `@budibase/standard-components/${this.type}`,
+      _id: this.id,
+      _children: this.children?.map(child => child.build()),
+      _styles: {
+        normal: {
+          ...this.styles,
+        },
+      },
+      ...this.props,
+    }
+  }
+}

packages/client/src/components/app/blocks/index.js

@@ -0,0 +1 @@
+export { default as tablewithsearch } from "./TableWithSearch.svelte"

packages/client/src/components/app/index.js

@@ -32,6 +32,7 @@ export { default as spectrumcard } from "./SpectrumCard.svelte"
 export * from "./charts"
 export * from "./forms"
 export * from "./table"
+export * from "./blocks"
 
 // Deprecated component left for compatibility in old apps
 export { default as navigation } from "./deprecated/Navigation.svelte"