@asteby/metacore-runtime-react 18.17.3 → 18.19.0

package/src/__tests__/dependent-options.test.tsx

@@ -0,0 +1,337 @@
+// @vitest-environment happy-dom
+//
+// Dependent (cascading) options contract:
+//   - resolveDependsValue (pure): a cell `dependsOn` resolves from the row
+//     (sibling) first, then the header form values; empty/unset → ''.
+//   - useOptionsResolver: a `filterValue` is forwarded as `&filter_value=` and
+//     re-fetches when it changes; an empty value omits the param.
+//   - DynamicLineItems → cell with `dependsOn`: the picker is disabled while the
+//     header field is empty, and once the header field has a value the options
+//     request carries that value as `filter_value` and re-fetches on change.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen, waitFor } from '@testing-library/react'
+
+// Identity translator so any raw i18n keys surface verbatim.
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (k: string) => k }),
+}))
+
+import {
+    resolveDependsValue,
+    getDependsOn,
+    getOptionsConfig,
+    resolveOptionsSource,
+} from '../dynamic-form-schema'
+import { useOptionsResolver } from '../use-options-resolver'
+import { DynamicLineItems } from '../dynamic-line-items'
+import { ApiProvider, type ApiClient } from '../api-context'
+import type { ActionFieldDef } from '../types'
+import { useState } from 'react'
+
+afterEach(cleanup)
+
+// ---------------------------------------------------------------------------
+// Pure resolution
+// ---------------------------------------------------------------------------
+describe('getDependsOn / resolveDependsValue', () => {
+    const field = (over: Partial<ActionFieldDef>): ActionFieldDef =>
+        ({ key: 'product_id', label: 'Producto', type: 'dynamic_select', ...over })
+
+    it('reads camelCase dependsOn and snake_case depends_on', () => {
+        expect(getDependsOn(field({ dependsOn: 'wh' }))).toBe('wh')
+        expect(getDependsOn(field({ depends_on: 'wh' }))).toBe('wh')
+        expect(getDependsOn(field({}))).toBeUndefined()
+    })
+
+    it('resolves from header form values', () => {
+        const f = field({ depends_on: 'source_warehouse_id' })
+        expect(resolveDependsValue(f, { source_warehouse_id: 'W1' })).toBe('W1')
+    })
+
+    it('prefers a sibling row value over the header', () => {
+        const f = field({ dependsOn: 'warehouse_id' })
+        const out = resolveDependsValue(f, { warehouse_id: 'HEADER' }, { warehouse_id: 'ROW' })
+        expect(out).toBe('ROW')
+    })
+
+    it('falls back to header when the row value is blank', () => {
+        const f = field({ dependsOn: 'warehouse_id' })
+        const out = resolveDependsValue(f, { warehouse_id: 'HEADER' }, { warehouse_id: '' })
+        expect(out).toBe('HEADER')
+    })
+
+    it('returns empty string when the dependency is unset', () => {
+        const f = field({ dependsOn: 'warehouse_id' })
+        expect(resolveDependsValue(f, {})).toBe('')
+        expect(resolveDependsValue(field({}), { a: 1 })).toBe('')
+    })
+})
+
+describe('getOptionsConfig / resolveOptionsSource', () => {
+    const field = (over: Partial<ActionFieldDef>): ActionFieldDef =>
+        ({ key: 'product_id', label: 'Producto', type: 'dynamic_select', ...over })
+
+    it('reads camelCase optionsConfig and snake_case options_config', () => {
+        expect(getOptionsConfig(field({ optionsConfig: { source: 'stock' } }))?.source).toBe('stock')
+        expect(getOptionsConfig(field({ options_config: { source: 'stock' } }))?.source).toBe('stock')
+        expect(getOptionsConfig(field({}))).toBeUndefined()
+    })
+
+    it('routes to the source model with field=value when optionsConfig.source is present', () => {
+        const f = field({
+            ref: 'products.Product',
+            options_config: { source: 'stock', filter_by: 'warehouse_id', value: 'product_id', description: 'quantity' },
+        })
+        const out = resolveOptionsSource(f)
+        expect(out.endpoint).toBe('/options/stock')
+        expect(out.fieldKey).toBe('product_id')
+        // source wins over ref — the ref pointer is not used for routing.
+        expect(out.ref).toBeUndefined()
+    })
+
+    it('falls back to the field key when optionsConfig.value is absent', () => {
+        const f = field({ key: 'item_id', options_config: { source: 'stock' } })
+        const out = resolveOptionsSource(f)
+        expect(out.endpoint).toBe('/options/stock')
+        expect(out.fieldKey).toBe('item_id')
+    })
+
+    it('keeps ref-based resolution when there is no optionsConfig.source', () => {
+        const f = field({ ref: 'products.Product' })
+        const out = resolveOptionsSource(f)
+        expect(out.endpoint).toBeUndefined()
+        expect(out.ref).toBe('products.Product')
+        expect(out.fieldKey).toBe('id')
+    })
+})
+
+// ---------------------------------------------------------------------------
+// useOptionsResolver — filter_value forwarding + re-fetch
+// ---------------------------------------------------------------------------
+function Harness({ filterValue }: { filterValue?: string }) {
+    const { options } = useOptionsResolver({
+        modelKey: '',
+        fieldKey: 'id',
+        ref: 'products.Product',
+        filterValue,
+    })
+    return <div data-testid="count">{options.length}</div>
+}
+
+describe('useOptionsResolver filter_value', () => {
+    it('forwards a non-empty filter_value and re-fetches on change', async () => {
+        const get = vi.fn(async () => ({
+            data: { success: true, data: [{ id: '1', label: 'One' }], meta: { type: 'dynamic', count: 1 } },
+        }))
+        const client = { get } as unknown as ApiClient
+
+        const { rerender } = render(
+            <ApiProvider client={client}>
+                <Harness filterValue="W1" />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(screen.getByTestId('count').textContent).toBe('1'))
+
+        // First call carried filter_value=W1.
+        const firstParams = get.mock.calls[0][1]?.params
+        expect(firstParams.filter_value).toBe('W1')
+
+        // Change the parent value → a fresh request with the new filter_value.
+        rerender(
+            <ApiProvider client={client}>
+                <Harness filterValue="W2" />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(get.mock.calls.length).toBeGreaterThan(1))
+        const lastParams = get.mock.calls[get.mock.calls.length - 1][1]?.params
+        expect(lastParams.filter_value).toBe('W2')
+    })
+
+    it('omits filter_value when empty', async () => {
+        const get = vi.fn(async () => ({
+            data: { success: true, data: [], meta: { type: 'dynamic', count: 0 } },
+        }))
+        const client = { get } as unknown as ApiClient
+        render(
+            <ApiProvider client={client}>
+                <Harness filterValue="" />
+            </ApiProvider>,
+        )
+        await waitFor(() => expect(get).toHaveBeenCalled())
+        expect(get.mock.calls[0][1]?.params.filter_value).toBeUndefined()
+    })
+})
+
+// ---------------------------------------------------------------------------
+// DynamicLineItems — a cell that dependsOn a HEADER field
+// ---------------------------------------------------------------------------
+const lineItemsField: ActionFieldDef = {
+    key: 'items',
+    label: 'Renglones',
+    type: 'array',
+    itemFields: [
+        {
+            key: 'product_id',
+            label: 'Producto',
+            type: 'dynamic_select',
+            ref: 'products.Product',
+            // depends on the HEADER field, not a sibling row cell.
+            depends_on: 'source_warehouse_id',
+        },
+    ],
+}
+
+// Drives DynamicLineItems with one pre-existing row + a switchable header value.
+function LineItemsHost({ headerValue }: { headerValue: string }) {
+    const [rows, setRows] = useState<any[]>([{ product_id: '' }])
+    return (
+        <DynamicLineItems
+            field={lineItemsField}
+            value={rows}
+            onChange={setRows}
+            formValues={{ source_warehouse_id: headerValue }}
+        />
+    )
+}
+
+describe('DynamicLineItems cascading cell', () => {
+    it('disables the picker while the header field is empty', () => {
+        const get = vi.fn(async () => ({
+            data: { success: true, data: [], meta: { type: 'dynamic', count: 0 } },
+        }))
+        const client = { get } as unknown as ApiClient
+        render(
+            <ApiProvider client={client}>
+                <LineItemsHost headerValue="" />
+            </ApiProvider>,
+        )
+        // The combobox trigger is disabled and shows the dependency hint.
+        const trigger = screen.getByRole('combobox')
+        expect((trigger as HTMLButtonElement).disabled).toBe(true)
+        expect(trigger.getAttribute('data-depends-blocked')).toBe('')
+        // No options request fires while blocked.
+        expect(get).not.toHaveBeenCalled()
+    })
+
+    it('sends filter_value from the header field and re-fetches when it changes', async () => {
+        const get = vi.fn(async () => ({
+            data: {
+                success: true,
+                data: [{ id: 'p1', label: 'Tornillo', description: 'disp. 12' }],
+                meta: { type: 'dynamic', count: 1 },
+            },
+        }))
+        const client = { get } as unknown as ApiClient
+
+        const { rerender } = render(
+            <ApiProvider client={client}>
+                <LineItemsHost headerValue="W1" />
+            </ApiProvider>,
+        )
+
+        // Open the popover so the typeahead fetches.
+        const trigger = screen.getByRole('combobox')
+        expect((trigger as HTMLButtonElement).disabled).toBe(false)
+        await act(async () => {
+            trigger.click()
+        })
+        await waitFor(() => expect(get).toHaveBeenCalled())
+        const firstParams = get.mock.calls[0][1]?.params
+        expect(firstParams.filter_value).toBe('W1')
+
+        // Switch the header warehouse → the cell picker re-fetches scoped to W2.
+        rerender(
+            <ApiProvider client={client}>
+                <LineItemsHost headerValue="W2" />
+            </ApiProvider>,
+        )
+        await waitFor(() => {
+            const last = get.mock.calls[get.mock.calls.length - 1][1]?.params
+            expect(last.filter_value).toBe('W2')
+        })
+    })
+})
+
+// ---------------------------------------------------------------------------
+// optionsConfig.source routing — the picker queries the SOURCE model, not `ref`
+// ---------------------------------------------------------------------------
+const sourceLineItemsField: ActionFieldDef = {
+    key: 'items',
+    label: 'Renglones',
+    type: 'array',
+    itemFields: [
+        {
+            key: 'product_id',
+            label: 'Producto',
+            type: 'dynamic_select',
+            // A `ref` is present but optionsConfig.source MUST win for routing.
+            ref: 'products.Product',
+            depends_on: 'source_warehouse_id',
+            options_config: {
+                type: 'dynamic',
+                source: 'stock',
+                filter_by: 'warehouse_id',
+                value: 'product_id',
+                label_ref: 'products.Product',
+                description: 'quantity',
+            },
+        },
+    ],
+}
+
+function SourceLineItemsHost({ headerValue }: { headerValue: string }) {
+    const [rows, setRows] = useState<any[]>([{ product_id: '' }])
+    return (
+        <DynamicLineItems
+            field={sourceLineItemsField}
+            value={rows}
+            onChange={setRows}
+            formValues={{ source_warehouse_id: headerValue }}
+        />
+    )
+}
+
+describe('DynamicLineItems cell with optionsConfig.source', () => {
+    it('queries /options/<source>?field=<value>&filter_value=<dependsOn> and re-fetches on parent change', async () => {
+        const get = vi.fn(async () => ({
+            data: {
+                success: true,
+                data: [{ id: 'p1', label: 'Tornillo', description: 'disp. 12' }],
+                meta: { type: 'dynamic', count: 1 },
+            },
+        }))
+        const client = { get } as unknown as ApiClient
+
+        const { rerender } = render(
+            <ApiProvider client={client}>
+                <SourceLineItemsHost headerValue="W1" />
+            </ApiProvider>,
+        )
+
+        const trigger = screen.getByRole('combobox')
+        expect((trigger as HTMLButtonElement).disabled).toBe(false)
+        await act(async () => {
+            trigger.click()
+        })
+        await waitFor(() => expect(get).toHaveBeenCalled())
+
+        // URL hits the SOURCE model, not the `ref`.
+        const [firstUrl, firstCfg] = get.mock.calls[0]
+        expect(firstUrl).toBe('/options/stock')
+        expect(firstCfg?.params.field).toBe('product_id')
+        expect(firstCfg?.params.filter_value).toBe('W1')
+
+        // Parent change → re-fetch, still routed to the source, new filter_value.
+        rerender(
+            <ApiProvider client={client}>
+                <SourceLineItemsHost headerValue="W2" />
+            </ApiProvider>,
+        )
+        await waitFor(() => {
+            const [url, cfg] = get.mock.calls[get.mock.calls.length - 1]
+            expect(url).toBe('/options/stock')
+            expect(cfg?.params.field).toBe('product_id')
+            expect(cfg?.params.filter_value).toBe('W2')
+        })
+    })
+})

package/src/action-modal-dispatcher.tsx

@@ -42,7 +42,7 @@ import { DynamicLineItems } from './dynamic-line-items'
 import { DynamicSelectField } from './dynamic-select-field'
 import { DynamicDateField } from './dynamic-date-field'
 import { UploadField } from './upload-field'
-import { isLineItemsField, resolveWidget } from './dynamic-form-schema'
+import { isLineItemsField, resolveWidget, resolveDependsValue, getDependsOn } from './dynamic-form-schema'
 import type { ActionFieldDef } from './types'
 // Canonical registry lives in @asteby/metacore-sdk
 import {
@@ -292,7 +292,7 @@ function GenericActionModal({ open, onOpenChange, action, model, record, endpoin
                                     {field.label}
                                     {field.required && <span className="text-red-500 ml-1">*</span>}
                                 </Label>
-                                {renderField(field, formData[field.key], (v: any) => updateField(field.key, v))}
+                                {renderField(field, formData[field.key], (v: any) => updateField(field.key, v), formData)}
                             </div>
                         )
                     })}
@@ -319,10 +319,16 @@ function renderField(
     field: ActionFieldDef,
     value: any,
     onChange: (value: any) => void,
+    // Full current form values — lets a line-items grid (and any cascading
+    // header picker) resolve a `dependsOn` reference against sibling header
+    // fields. Omitted by callers that have no surrounding form (the field is
+    // then treated as having no resolvable dependency).
+    formValues?: Record<string, any>,
 ) {
     // Repeatable line-items group → row grid (value is an array of row objects).
+    // The header form values flow in so a cell can depend on a header field.
     if (isLineItemsField(field)) {
-        return <DynamicLineItems field={field} value={value} onChange={onChange} />
+        return <DynamicLineItems field={field} value={value} onChange={onChange} formValues={formValues} />
     }
     // Resolve the widget the same way DynamicForm does (explicit widget wins,
     // else inferred from type) so action modals and the standalone form stay in
@@ -330,7 +336,12 @@ function renderField(
     // dropped `dynamic_select` to a plain text input.
     const widget = resolveWidget(field)
     if (widget === 'dynamic_select') {
-        return <DynamicSelectField field={field} value={value} onChange={onChange} />
+        // A header-level dynamic_select may itself depend on another header
+        // field; resolve its filter_value from the form context.
+        const dependsValue = getDependsOn(field)
+            ? resolveDependsValue(field, formValues)
+            : undefined
+        return <DynamicSelectField field={field} value={value} onChange={onChange} dependsValue={dependsValue} />
     }
     // File upload → themed picker that POSTs the file to the host upload
     // endpoint and stores the returned url/path. Kept in sync with DynamicForm.

package/src/collection-cell.tsx

@@ -0,0 +1,277 @@
+// Generic, brand-neutral table-cell renderer for jsonb / array / object column
+// values. Kernel-derived dynamic tables surface raw jsonb columns (line items,
+// nested config blobs, scalar arrays) with no per-column metadata; without this
+// they rendered as raw `JSON.stringify(value)` which is unreadable. This renders
+// a compact trigger (count badge / inline pairs) plus a Popover with a clean
+// mini-table — no per-addon config required, safe on any shape.
+
+import * as React from 'react'
+import { List } from 'lucide-react'
+import {
+    Badge,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow,
+    cn,
+} from '@asteby/metacore-ui'
+import { humanizeToken } from './dynamic-columns-helpers'
+
+const UUID_LIKE_RE =
+    /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+
+/** snake_case / dotted / kebab key → Title Case (`product_id` → "Product ID"). */
+export function prettifyKey(key: string): string {
+    const pretty = humanizeToken(key)
+    return pretty || key
+}
+
+/**
+ * Render a single scalar (or near-scalar) value for compact display.
+ * - uuid-like or very long (32+ char) strings → first 8 chars + "…"
+ * - numbers / booleans → rendered as-is (booleans as ✓ / ✗)
+ * - nested object → "{…}", nested array → "[N]"
+ * - null / undefined / "" → "-"
+ */
+export function formatScalar(value: unknown): string {
+    if (value === null || value === undefined) return '-'
+    if (typeof value === 'boolean') return value ? '✓' : '✗'
+    if (typeof value === 'number') return String(value)
+    if (Array.isArray(value)) return `[${value.length}]`
+    if (typeof value === 'object') return '{…}'
+    const str = String(value)
+    if (str === '') return '-'
+    if (UUID_LIKE_RE.test(str) || str.length >= 32) {
+        return `${str.slice(0, 8)}…`
+    }
+    return str
+}
+
+const isPlainObject = (v: unknown): v is Record<string, unknown> =>
+    typeof v === 'object' && v !== null && !Array.isArray(v)
+
+/**
+ * Defensively coerce a raw cell value into something renderable. Strings that
+ * look like JSON (`[`/`{` start) are parsed; everything else is passed through.
+ */
+function parseValue(value: unknown): unknown {
+    if (typeof value !== 'string') return value
+    const trimmed = value.trim()
+    if (
+        (trimmed.startsWith('[') && trimmed.endsWith(']')) ||
+        (trimmed.startsWith('{') && trimmed.endsWith('}'))
+    ) {
+        try {
+            return JSON.parse(trimmed)
+        } catch {
+            return value
+        }
+    }
+    return value
+}
+
+/** Stable union of keys across an array of row objects, first-seen order. */
+function unionKeys(rows: Record<string, unknown>[]): string[] {
+    const seen: string[] = []
+    const set = new Set<string>()
+    for (const row of rows) {
+        for (const key of Object.keys(row)) {
+            if (!set.has(key)) {
+                set.add(key)
+                seen.push(key)
+            }
+        }
+    }
+    return seen
+}
+
+const PANEL_CLASS = 'w-auto max-w-[480px] max-h-[320px] overflow-auto p-0'
+
+function MiniTable({ rows }: { rows: Record<string, unknown>[] }) {
+    const keys = unionKeys(rows)
+    if (keys.length === 0) {
+        return <div className="p-3 text-xs text-muted-foreground">-</div>
+    }
+    return (
+        <Table>
+            <TableHeader>
+                <TableRow>
+                    {keys.map((key) => (
+                        <TableHead key={key} className="text-xs whitespace-nowrap">
+                            {prettifyKey(key)}
+                        </TableHead>
+                    ))}
+                </TableRow>
+            </TableHeader>
+            <TableBody>
+                {rows.map((row, i) => (
+                    <TableRow key={i}>
+                        {keys.map((key) => (
+                            <TableCell
+                                key={key}
+                                className="text-xs whitespace-nowrap"
+                            >
+                                {formatScalar(row[key])}
+                            </TableCell>
+                        ))}
+                    </TableRow>
+                ))}
+            </TableBody>
+        </Table>
+    )
+}
+
+function ScalarList({ values }: { values: unknown[] }) {
+    return (
+        <ul className="p-3 space-y-1">
+            {values.map((v, i) => (
+                <li key={i} className="text-xs text-foreground">
+                    {formatScalar(v)}
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+function PairList({ entries }: { entries: [string, unknown][] }) {
+    return (
+        <ul className="p-3 space-y-1">
+            {entries.map(([key, v]) => (
+                <li key={key} className="text-xs">
+                    <span className="text-muted-foreground">
+                        {prettifyKey(key)}:
+                    </span>{' '}
+                    <span className="text-foreground">{formatScalar(v)}</span>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+/** Compact badge trigger that opens a popover panel. */
+function PopoverShell({
+    label,
+    title,
+    children,
+    icon = true,
+}: {
+    label: string
+    title: string
+    children: React.ReactNode
+    icon?: boolean
+}) {
+    return (
+        <Popover>
+            <PopoverTrigger asChild>
+                <Badge
+                    variant="secondary"
+                    className="cursor-pointer gap-1 font-normal"
+                    title={title}
+                >
+                    {icon ? <List className="h-3 w-3" /> : null}
+                    {label}
+                </Badge>
+            </PopoverTrigger>
+            <PopoverContent
+                align="start"
+                className={cn(PANEL_CLASS)}
+            >
+                {children}
+            </PopoverContent>
+        </Popover>
+    )
+}
+
+export interface CollectionCellProps {
+    value: unknown
+    /** Max items previewed inline for scalar arrays. */
+    maxInline?: number
+}
+
+/**
+ * Generic renderer for jsonb / array / object cell values. Brand-neutral,
+ * compact, dark-mode friendly. Never throws on unexpected shapes.
+ */
+export function CollectionCell({ value, maxInline = 3 }: CollectionCellProps) {
+    const parsed = parseValue(value)
+
+    // Empty-ish → muted dash.
+    if (
+        parsed === null ||
+        parsed === undefined ||
+        parsed === '' ||
+        (Array.isArray(parsed) && parsed.length === 0) ||
+        (isPlainObject(parsed) && Object.keys(parsed).length === 0)
+    ) {
+        return <span className="text-muted-foreground text-xs">-</span>
+    }
+
+    // Non-collection scalar fell through here (e.g. unparseable string): truncate.
+    if (!Array.isArray(parsed) && !isPlainObject(parsed)) {
+        const str = String(parsed)
+        return (
+            <span
+                className="text-muted-foreground text-xs truncate block max-w-[300px]"
+                title={str}
+            >
+                {str.length > 80 ? `${str.slice(0, 80)}…` : str}
+            </span>
+        )
+    }
+
+    // ARRAY ------------------------------------------------------------------
+    if (Array.isArray(parsed)) {
+        const allObjects = parsed.every((item) => isPlainObject(item))
+        if (allObjects) {
+            const rows = parsed as Record<string, unknown>[]
+            const count = rows.length
+            const label = count === 1 ? '1 ítem' : `${count} ítems`
+            const title = rows
+                .map((row) =>
+                    Object.entries(row)
+                        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+                        .join(', ')
+                )
+                .join(' | ')
+            return (
+                <PopoverShell label={label} title={title}>
+                    <MiniTable rows={rows} />
+                </PopoverShell>
+            )
+        }
+
+        // Array of scalars (or mixed): preview first N joined, "+N" overflow.
+        const preview = parsed.slice(0, maxInline).map(formatScalar).join(', ')
+        const overflow = parsed.length - maxInline
+        const label =
+            overflow > 0 ? `${preview} +${overflow}` : preview
+        const title = parsed.map(formatScalar).join(', ')
+        return (
+            <PopoverShell label={label} title={title} icon={false}>
+                <ScalarList values={parsed} />
+            </PopoverShell>
+        )
+    }
+
+    // PLAIN OBJECT -----------------------------------------------------------
+    const entries = Object.entries(parsed)
+    const inline = entries
+        .slice(0, maxInline)
+        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+        .join(', ')
+    const overflow = entries.length - maxInline
+    const label = overflow > 0 ? `${inline} +${overflow}` : inline
+    const title = entries
+        .map(([k, v]) => `${prettifyKey(k)}: ${formatScalar(v)}`)
+        .join(', ')
+    return (
+        <PopoverShell label={label} title={title} icon={false}>
+            <PairList entries={entries} />
+        </PopoverShell>
+    )
+}

package/src/dynamic-columns.tsx

@@ -45,6 +45,7 @@ import { Progress } from './dialogs/_primitives'
 import { humanizeToken } from './dynamic-columns-helpers'
 import { OptionsContext } from './options-context'
 import { DynamicIcon, isLucideIconName } from './dynamic-icon'
+import { CollectionCell } from './collection-cell'
 import { isNilUuid, normalizeNilUuid } from './nil-uuid'
 import type { TableMetadata, ColumnDefinition } from './types'
 import { isColumnVisibleInTable } from './column-visibility'
@@ -1173,11 +1174,7 @@ export function makeDefaultGetDynamicColumns(
 
                         default: {
                             if (typeof value === 'object' && value !== null) {
-                                return (
-                                    <span className="text-muted-foreground text-xs">
-                                        {JSON.stringify(value)}
-                                    </span>
-                                )
+                                return <CollectionCell value={value} />
                             }
                             if (
                                 col.key === 'description' ||