Add related columns

packages/builder/src/components/design/settings/controls/GridColumnConfiguration/getColumns.js

@@ -1,3 +1,5 @@
+import { FieldType } from "@budibase/types"
+
 const modernize = columns => {
   if (!columns) {
     return []
@@ -8,6 +10,7 @@ const modernize = columns => {
       label: column.displayName,
       field: column.name,
       active: true,
+      related: column.related,
     }))
   }
 
@@ -50,12 +53,35 @@ const removeInvalidAddMissing = (
 const getDefault = (schema = {}) => {
   const defaultValues = Object.values(schema)
     .filter(column => !column.nestedJSON)
-    .map(column => ({
+    .flatMap(column => {
-      label: column.name,
+      const order = column.visible
-      field: column.name,
+        ? column.order ?? -1
-      active: column.visible ?? true,
+        : Number.MAX_SAFE_INTEGER
-      order: column.visible ? column.order ?? -1 : Number.MAX_SAFE_INTEGER,
+      const columns = [
-    }))
+        {
+          label: column.name,
+          field: column.name,
+          active: column.visible ?? true,
+          order,
+        },
+      ]
+
+      if (column.columns) {
+        for (const relColumn of Object.keys(column.columns).filter(
+          relColumn => column.columns[relColumn].visible !== false
+        )) {
+          columns.push({
+            label: `${relColumn} (${column.name})`,
+            field: `${column.name}.${relColumn}`,
+            active: column.visible ?? true,
+            order,
+            related: true,
+          })
+        }
+      }
+
+      return columns
+    })
 
   defaultValues.sort((a, b) => a.order - b.order)
 
@@ -69,6 +95,7 @@ const toGridFormat = draggableListColumns => {
     active: entry.active,
     width: entry.width,
     conditions: entry.conditions,
+    related: entry.related,
   }))
 }
 
@@ -82,9 +109,12 @@ const toDraggableListFormat = (gridFormatColumns, createComponent, schema) => {
         active: column.active,
         field: column.field,
         label: column.label,
-        columnType: schema[column.field].type,
+        columnType: column.related
+          ? FieldType.FORMULA
+          : schema[column.field]?.type,
         width: column.width,
         conditions: column.conditions,
+        related: column.related,
       },
       {}
     )

packages/client/src/components/app/GridBlock.svelte

@@ -98,6 +98,7 @@
         order: idx,
         conditions: column.conditions,
         visible: !!column.active,
+        related: column.related,
       }
       if (column.width) {
         overrides[column.field].width = column.width

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

@@ -1,6 +1,7 @@
 import { derived, get } from "svelte/store"
 import { getDatasourceDefinition, getDatasourceSchema } from "../../../fetch"
 import { memo } from "../../../utils"
+import { FieldType } from "@budibase/types"
 
 export const createStores = () => {
   const definition = memo(null)
@@ -73,6 +74,19 @@ export const deriveStores = context => {
           }
         }
       })
+      if ($schemaOverrides) {
+        Object.keys($schemaOverrides).forEach(field => {
+          if (!$schemaOverrides[field].related) {
+            return
+          }
+          enrichedSchema[field] = {
+            ...$schemaOverrides[field],
+            name: field,
+            type: FieldType.FORMULA,
+            related: true,
+          }
+        })
+      }
       return enrichedSchema
     }
   )