Enrich visible columns

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

@@ -31,7 +31,7 @@ export const createStores = () => {
 }
 
 export const deriveStores = context => {
-  const { columns } = context
+  const { columns, enrichedSchema } = context
 
   // Derive a lookup map for all columns by name
   const columnLookupMap = derived(columns, $columns => {
@@ -43,9 +43,38 @@ export const deriveStores = context => {
   })
 
   // Derived list of columns which have not been explicitly hidden
-  const visibleColumns = derived(columns, $columns => {
-    return $columns.filter(col => col.visible)
-  })
+  const visibleColumns = derived(
+    [columns, enrichedSchema],
+    ([$columns, $enrichedSchema]) => {
+      return $columns
+        .filter(col => col.visible)
+        .flatMap(c => {
+          const relatedColumns = []
+
+          const schemaColumns = $enrichedSchema?.[c.name]?.columns
+          if (schemaColumns) {
+            for (const relColumn of Object.keys(schemaColumns)) {
+              const relFieldSchema = schemaColumns[relColumn]
+              if (!relFieldSchema.visible) {
+                continue
+              }
+              relatedColumns.push({
+                name: `${c.name}.${relColumn}`,
+                label: `${relColumn} (${c.name})`,
+                schema: relFieldSchema,
+                width: relFieldSchema.width || DefaultColumnWidth,
+                visible: relFieldSchema.visible ?? true,
+                readonly: relFieldSchema.readonly,
+                order: relFieldSchema.order,
+                conditions: relFieldSchema.conditions,
+              })
+            }
+          }
+
+          return [c, ...relatedColumns]
+        })
+    }
+  )
 
   // Split visible columns into their discrete types
   const displayColumn = derived(visibleColumns, $visibleColumns => {
@@ -136,7 +165,7 @@ export const initialise = context => {
         .map(field => {
           const fieldSchema = $enrichedSchema[field]
           const oldColumn = $columns?.find(col => col.name === field)
-          let column = {
+          const column = {
             name: field,
             label: fieldSchema.displayName || field,
             schema: fieldSchema,