diff --git a/packages/frontend-core/src/components/grid/stores/columns.js b/packages/frontend-core/src/components/grid/stores/columns.js index 0073754a5d..9648b367f9 100644 --- a/packages/frontend-core/src/components/grid/stores/columns.js +++ b/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,