Allow selecting columns in design

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/GridColumnConfiguration.svelte

@@ -1,4 +1,5 @@
 <script>
+  import { enrichSchemaWithRelColumns } from "@budibase/frontend-core"
   import { getDatasourceForProvider, getSchemaForDatasource } from "dataBinding"
   import { selectedScreen, componentStore } from "stores/builder"
   import DraggableList from "../DraggableList/DraggableList.svelte"
@@ -27,7 +28,8 @@
       delete schema._rev
     }
 
-    return schema
+    const result = enrichSchemaWithRelColumns(schema)
+    return result
   }
 
   $: datasource = getDatasourceForProvider($selectedScreen, componentInstance)

packages/frontend-core/src/components/grid/stores/datasource.js

@@ -1,6 +1,6 @@
 import { derived, get } from "svelte/store"
 import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
-import { memo } from "../../../utils"
+import { enrichSchemaWithRelColumns, memo } from "../../../utils"
 
 export const createStores = () => {
   const definition = memo(null)
@@ -54,27 +54,9 @@ export const deriveStores = context => {
         return null
       }
 
-      const schemaWithRelatedColumns = Object.keys($schema || {}).reduce(
-        (acc, c) => {
-          const field = $schema[c]
-          acc[c] = field
+      const schemaWithRelatedColumns = enrichSchemaWithRelColumns($schema)
 
-          if (field.columns) {
-            for (const relColumn of Object.keys(field.columns)) {
-              const name = `${field.name}.${relColumn}`
-              acc[name] = {
-                ...field.columns[relColumn],
-                name,
-                related: { field: c, subField: relColumn },
-              }
-            }
-          }
-          return acc
-        },
-        {}
-      )
-
-      let enrichedSchema = {}
+      const enrichedSchema = {}
       Object.keys(schemaWithRelatedColumns).forEach(field => {
         enrichedSchema[field] = {
           ...schemaWithRelatedColumns[field],

packages/frontend-core/src/utils/index.js

@@ -10,3 +10,4 @@ export { createWebsocket } from "./websocket"
 export * from "./download"
 export * from "./theme"
 export * from "./settings"
+export * from "./schema"

packages/frontend-core/src/utils/schema.js

@@ -0,0 +1,27 @@
+export function enrichSchemaWithRelColumns(schema) {
+  if (!schema) {
+    return
+  }
+  const result = Object.keys(schema).reduce((acc, c) => {
+    const field = schema[c]
+    acc[c] = field
+
+    if (field.columns) {
+      for (const relColumn of Object.keys(field.columns)) {
+        const relField = field.columns[relColumn]
+        if (!relField.visible) {
+          continue
+        }
+        const name = `${field.name}.${relColumn}`
+        acc[name] = {
+          ...relField,
+          name,
+          related: { field: c, subField: relColumn },
+        }
+      }
+    }
+    return acc
+  }, {})
+
+  return result
+}