Table Template

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

array

required

Array of column definitions with key, header, and optional type

array

required

Array of row objects with keys matching column definitions

boolean

Enable column sorting (default: true)

boolean

Enable search/filter functionality (default: false)

Column Definition

Each column object supports:

Field	Type	Description
`key`	string	Property name in row data
`header`	string	Display name for column header
`type`	string	Data type: `text`, `number`, `date`, `currency`, `link`
`align`	string	Text 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
    }
  }'

import requests

response = requests.post(
    "https://genui.sh/api/artifacts",
    headers={"Authorization": f"Bearer {GENUI_API_KEY}"},
    json={
        "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
        }
    }
)

const response = await fetch('https://genui.sh/api/artifacts', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${GENUI_API_KEY}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    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
    }
  })
});

payload := map[string]interface{}{
    "template": "table",
    "title":    "Team Members",
    "content": map[string]interface{}{
        "columns": []map[string]interface{}{
            {"key": "name", "header": "Name", "type": "text"},
            {"key": "role", "header": "Role", "type": "text"},
            {"key": "salary", "header": "Salary", "type": "currency", "align": "right"},
        },
        "rows": []map[string]interface{}{
            {"name": "Alice Johnson", "role": "Engineer", "salary": 120000},
            {"name": "Bob Smith", "role": "Designer", "salary": 95000},
        },
        "sortable": true,
    },
}

response = http.post(uri, {
  template: 'table',
  title: 'Team Members',
  content: {
    columns: [
      { key: 'name', header: 'Name', type: 'text' },
      { key: 'role', header: 'Role', type: 'text' },
      { key: 'salary', header: 'Salary', type: 'currency', align: 'right' }
    ],
    rows: [
      { name: 'Alice Johnson', role: 'Engineer', salary: 120000 },
      { name: 'Bob Smith', role: 'Designer', salary: 95000 }
    ],
    sortable: true
  }
}.to_json)

let response = client.post("https://genui.sh/api/artifacts")
    .header("Authorization", format!("Bearer {}", api_key))
    .json(&json!({
        "template": "table",
        "title": "Team Members",
        "content": {
            "columns": [
                {"key": "name", "header": "Name", "type": "text"},
                {"key": "role", "header": "Role", "type": "text"},
                {"key": "salary", "header": "Salary", "type": "currency", "align": "right"}
            ],
            "rows": [
                {"name": "Alice Johnson", "role": "Engineer", "salary": 120000},
                {"name": "Bob Smith", "role": "Designer", "salary": 95000}
            ],
            "sortable": true
        }
    }))
    .send().await?;

var response = await client.PostAsJsonAsync("https://genui.sh/api/artifacts", new {
    template = "table",
    title = "Team Members",
    content = new {
        columns = new[] {
            new { key = "name", header = "Name", type = "text" },
            new { key = "role", header = "Role", type = "text" },
            new { key = "salary", header = "Salary", type = "currency", align = "right" }
        },
        rows = new[] {
            new { name = "Alice Johnson", role = "Engineer", salary = 120000 },
            new { name = "Bob Smith", role = "Designer", salary = 95000 }
        },
        sortable = true
    }
});

Example Response

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

Column Types

Type	Formatting
`text`	Plain text
`number`	Numeric formatting with locale
`currency`	Currency formatting (e.g., $120,000)
`date`	Date formatting
`link`	Clickable link

Use Cases

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

Getting Started

Templates

Content Schema

Column Definition

Example Request

Example Response

Column Types

Use Cases

​Content Schema

​Column Definition

​Example Request

​Example Response

​Column Types

​Use Cases

Content Schema

Column Definition

Example Request

Example Response

Column Types

Use Cases