Issue 9 — Advanced Table Cell Renderers & Column Configuration

[golevishal]

Issue 9 — Advanced Table Cell Renderers & Column Configuration

Priority: 🟡 Medium
Status: open
Depends on: Nothing hard; soft dependency on Issue 6 (StatusBadge and Link components)

---

Description

The basic Table component automatically infers columns from row data keys and maps status strings to static status indicators. However, enterprise tables require sophisticated formatting: column sizes, custom links, progress bars inside cells, buttons, or custom badges.

This issue extends the table schema to support column definitions and allows rendering other catalog components recursively inside cell bodies.

---

Technical Approach

1. Update Schema and Types

Modify the A2UITable interface in src/types/agui.ts:

• Add an optional columnDefinitions array:

  export interface A2UITableColumnDefinition {
    id: string;
    header: string;
    width?: number | string;
    /** Type of content in the cell. Can map to a registered catalog component */
    cellType?: 'Text' | 'StatusBadge' | 'Link' | 'ProgressBar';
    /** Props template to pass to the cell renderer (e.g. status mapping, external links) */
    cellProps?: Record<string, any>;
  }
  
  export interface A2UITable {
    component: 'Table';
    header: string;
    rows: Record<string, any>[];
    columnDefinitions?: A2UITableColumnDefinition[];
    // ...existing props (pagination, etc.)
  }

2. Implement Table Cell Resolver

Update A2UITableRenderer in src/components/A2UITableRenderer.tsx:

• If columnDefinitions is provided, generate Cloudscape table column definitions from it instead of inferring them.
• In the cell renderer callback, if a column defines a cellType, resolve it dynamically:
  • For example, if cellType is 'StatusBadge', render a <StatusIndicator> using the cell value as status.
  • If cellType is 'Link', render a <Link> using the cell value as the href.
• Support JSON Pointer state bindings resolved dynamically within the cells.

3. Update Validation

Modify validateCatalogComponent to validate columnDefinitions if provided:

• Ensure each definition has an id and header.
• Reject invalid cellType strings.

---

Acceptance Criteria

• Table schema and renderer updated to support explicit columnDefinitions
• Cells support rendering semantic components (StatusBadge, Link, ProgressBar) dynamically based on cell value and column config
• Explicit column sizing and custom widths are respected by the table layout
• Tests written:
  • Renders explicit column definitions correctly
  • Custom cell rendering of StatusBadge and Link inside a table cell works
  • Validation catches and rejects invalid column definition formats