Allow table with search block to render correct components for all relevant field types

packages/client/manifest.json

@@ -2626,13 +2626,6 @@
         "key": "rowCount",
         "defaultValue": 8
       },
-      {
-        "type": "multifield",
-        "label": "Table Columns",
-        "key": "tableColumns",
-        "dependsOn": "dataSource",
-        "placeholder": "All columns"
-      },
       {
         "type": "select",
         "label": "Size",
@@ -2649,14 +2642,21 @@
           }
         ]
       },
+      {
+        "type": "multifield",
+        "label": "Table Columns",
+        "key": "tableColumns",
+        "dependsOn": "dataSource",
+        "placeholder": "All columns"
+      },
       {
         "type": "boolean",
-        "label": "Quiet",
+        "label": "Quiet table variant",
         "key": "quiet"
       },
       {
         "type": "boolean",
-        "label": "Auto Columns",
+        "label": "Show auto columns",
         "key": "showAutoColumns",
         "defaultValue": false
       }

packages/client/src/components/Block.svelte

@@ -2,7 +2,6 @@
   import { getContext, setContext } from "svelte"
 
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
 
   // We need to set a block context to know we're inside a block, but also
   // to be able to reference the actual component ID of the block from
@@ -10,6 +9,4 @@
   setContext("block", { id: $component.id })
 </script>
 
-<div use:styleable={$component.styles}>
+<slot />
-  <slot />
-</div>

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

@@ -1,4 +1,5 @@
 <script>
+  import { onMount, getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
   import { Heading } from "@budibase/bbui"
@@ -16,85 +17,156 @@
   export let quiet
   export let size
 
+  const { API, styleable } = getContext("sdk")
+  const context = getContext("context")
+  const component = getContext("component")
+  const schemaComponentMap = {
+    string: "stringfield",
+    options: "optionsfield",
+    number: "numberfield",
+    datetime: "datetimefield",
+    boolean: "booleanfield",
+  }
+
   let formId
   let dataProviderId
+  let schema
 
-  $: enrichedFilter = enrichFilter(filter, searchColumns, formId)
+  $: enrichedSearchColumns = enrichSearchColumns(searchColumns, schema)
+  $: enrichedFilter = enrichFilter(filter, enrichedSearchColumns, formId)
 
   // Enrich the default filter with the specified search fields
-  const enrichFilter = (filter, searchColumns, formId) => {
+  const enrichFilter = (filter, columns, formId) => {
     let enrichedFilter = [...(filter || [])]
-    searchColumns?.forEach(column => {
+    columns?.forEach(column => {
       enrichedFilter.push({
-        field: column,
+        field: column.name,
         operator: "equal",
         type: "string",
         valueType: "Binding",
-        value: `{{ [${formId}].[${column}] }}`,
+        value: `{{ [${formId}].[${column.name}] }}`,
       })
     })
     return enrichedFilter
   }
+
+  // Determine data types for search fields and only use those that are valid
+  const enrichSearchColumns = (searchColumns, schema) => {
+    let enrichedColumns = []
+    searchColumns?.forEach(column => {
+      const schemaType = schema?.[column]?.type
+      const componentType = schemaComponentMap[schemaType]
+      if (componentType) {
+        enrichedColumns.push({
+          name: column,
+          componentType,
+        })
+      }
+    })
+    return enrichedColumns
+  }
+
+  // Load the datasource schema on mount so we can determine column types
+  onMount(async () => {
+    if (dataSource) {
+      schema = await API.fetchDatasourceSchema(dataSource)
+    }
+  })
 </script>
 
 <Block>
-  <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
+  <div class={size} use:styleable={$component.styles}>
-    {#if searchColumns?.length}
+    <BlockComponent type="form" bind:id={formId} props={{ dataSource }}>
-      <div class="search">
+      {#if title || enrichedSearchColumns?.length}
-        {#if title}
+        <div class="header">
           <div class="title">
-            <Heading>{title}</Heading>
+            <Heading>{title || ""}</Heading>
           </div>
-        {/if}
+          {#if enrichedSearchColumns?.length}
-        {#each searchColumns as column}
+            <div class="search" class:mobile={$context.device.mobile}>
-          <BlockComponent
+              {#each enrichedSearchColumns as column}
-            type="stringfield"
+                <BlockComponent
-            props={{
+                  type={column.componentType}
-              field: column,
+                  props={{
-              placeholder: column,
+                    field: column.name,
-              label: column,
+                    placeholder: column.name,
-            }}
+                    text: column.name,
-          />
+                    autoWidth: true,
-        {/each}
+                  }}
-      </div>
+                />
-    {/if}
+              {/each}
-    <BlockComponent
+            </div>
-      type="dataprovider"
+          {/if}
-      bind:id={dataProviderId}
+        </div>
-      props={{
+      {/if}
-        dataSource,
-        filter: enrichedFilter,
-        sortColumn,
-        sortOrder,
-        paginate,
-        limit: rowCount,
-      }}
-    >
       <BlockComponent
-        type="table"
+        type="dataprovider"
+        bind:id={dataProviderId}
         props={{
-          dataProvider: `{{ literal [${dataProviderId}] }}`,
+          dataSource,
-          columns: tableColumns,
+          filter: enrichedFilter,
-          showAutoColumns,
+          sortColumn,
-          rowCount,
+          sortOrder,
-          quiet,
+          paginate,
-          size,
+          limit: rowCount,
         }}
-      />
+      >
+        <BlockComponent
+          type="table"
+          props={{
+            dataProvider: `{{ literal [${dataProviderId}] }}`,
+            columns: tableColumns,
+            showAutoColumns,
+            rowCount,
+            quiet,
+            size,
+          }}
+        />
+      </BlockComponent>
     </BlockComponent>
-  </BlockComponent>
+  </div>
 </Block>
 
 <style>
-  .search {
+  .header {
     display: flex;
     flex-direction: row;
-    justify-content: flex-end;
+    justify-content: space-between;
     align-items: center;
+    gap: 20px;
+    flex-wrap: wrap;
     margin-bottom: 20px;
-    gap: 10px;
   }
   .title {
     flex: 1 1 auto;
   }
+  .search {
+    flex: 0 0 auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+    max-width: 100%;
+    flex-wrap: wrap;
+  }
+  .search :global(.component > *) {
+    width: 200px;
+  }
+  .search :global(.spectrum-InputGroup .spectrum-InputGroup-input) {
+    width: 100%;
+  }
+  .search :global(.spectrum-InputGroup) {
+    min-width: 0;
+  }
+  .search.mobile {
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    position: relative;
+    width: 100%;
+  }
+  .search.mobile :global(.component > *) {
+    width: 100%;
+  }
 </style>