Component Catalog

Table

Structured tabular data display with typed columns, alignment, and automatic TanStack Table integration.

Table

A data table for presenting structured information — maps to Nuxt UI's UTable (powered by TanStack Table).

The Table component uses a simplified column format that AI agents can easily generate. Columns are defined with key, label, and optional align — A2NUI automatically converts these to TanStack ColumnDef objects at render time.

A2UI → Nuxt UI Mapping

A2UI Property	Nuxt UI Prop	Notes
`columns`	`columns` (TanStack ColumnDef)	Simplified `{ key, label, align }` auto-converted
`rows`	`data`	Array of objects — keys match column `key` values
`caption`	rendered as `<p>`	Description text above the table
`sticky`	`sticky`	Sticky header for scrollable content

Example JSONL

{"version":"v0.10","createSurface":{"surfaceId":"table_demo","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"table_demo","components":[
  {"id":"root","component":"Table","columns":[
    {"key":"name","label":"Name","align":"left"},
    {"key":"role","label":"Role","align":"left"},
    {"key":"status","label":"Status","align":"center"}
  ],"rows":[
    {"name":"Elísabet Jónsdóttir","role":"Lead Therapist","status":"Active"},
    {"name":"Ólafur Magnússon","role":"Receptionist","status":"Active"},
    {"name":"Sigrún Einarsdóttir","role":"Therapist","status":"On Leave"}
  ]}
]}}

Properties

Property	Type	Required	Default	Description
`columns`	`Array<{ key, label, align? }>`	Yes	—	Column definitions
`rows`	`Array<Record<string, unknown>>`	Yes	—	Table data
`caption`	string	No	—	Description shown above the table
`sticky`	boolean	No	`false`	Sticky table header

Column Object

Field	Type	Required	Description
`key`	string	Yes	The property name in each row object
`label`	string	Yes	Displayed column header text
`align`	`left` \| `center` \| `right`	No	Text alignment for header and cells

Try It

Paste the JSONL above into the Playground to see it render.

Slideover

A panel that slides in from the edge of the screen. Ideal for detail views, forms, and secondary content.

Recipes

Real-world A2UI composition patterns — how AI agents build complete interfaces from standard catalog components.