Skip to main content

Documentation Index

Fetch the complete documentation index at: https://genui.sh/docs/llms.txt

Use this file to discover all available pages before exploring further.

The table template renders data in a clean, sortable table format.
Not the same as the Table component in @std/dynamic. The top-level table template and the Table component used inside an @std/dynamic tree are rendered by two different components with different prop shapes — components/templates/TableRenderer.tsx for the top-level template, and the entry in lib/json-render/catalog.ts for @std/dynamic. If you’re composing a dashboard, use the shape documented in Dynamic Template. A payload that renders correctly in one context will not work in the other.

​
Content Schema

​
content.columns
array
required
Array of column definitions with key, header, and optional type
​
content.rows
array
required
Array of row objects with keys matching column definitions
​
content.sortable
boolean
Enable column sorting (default: true)
​
content.searchable
boolean
Enable search/filter functionality (default: false)

​
Column Definition

Each column object supports:
FieldTypeDescription
keystringProperty name in row data
headerstringDisplay name for column header
typestringData type: text, number, date, currency, link
alignstringText alignment: left, center, right

​
Example Request

curl -X POST https://genui.sh/api/artifacts \
  -H "Authorization: Bearer $GENUI_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "table",
    "title": "Team Members",
    "content": {
      "columns": [
        {"key": "name", "header": "Name", "type": "text"},
        {"key": "role", "header": "Role", "type": "text"},
        {"key": "email", "header": "Email", "type": "link"},
        {"key": "salary", "header": "Salary", "type": "currency", "align": "right"}
      ],
      "rows": [
        {"name": "Alice Johnson", "role": "Engineer", "email": "alice@example.com", "salary": 120000},
        {"name": "Bob Smith", "role": "Designer", "email": "bob@example.com", "salary": 95000},
        {"name": "Carol Williams", "role": "Manager", "email": "carol@example.com", "salary": 140000}
      ],
      "sortable": true,
      "searchable": true
    }
  }'

​
Example Response

{
  "id": "art_tbl_abc123",
  "template": "table",
  "title": "Team Members",
  "status": "active",
  "createdAt": "2024-01-15T12:00:00Z"
}

​
Column Types

TypeFormatting
textPlain text
numberNumeric formatting with locale
currencyCurrency formatting (e.g., $120,000)
dateDate formatting
linkClickable link

​
Use Cases

  • Data exports: Spreadsheet-like views
  • Leaderboards: Rankings and scores
  • Inventories: Product lists, stock levels
  • Reports: Financial data, metrics tables