> ## 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.

# Table Template

> Display structured tabular data

The `table` template renders data in a clean, sortable table format.

<Note>
  **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](/templates/dynamic). A payload that renders correctly in one context will not work in the other.
</Note>

## Content Schema

<ParamField body="content.columns" type="array" required>
  Array of column definitions with `key`, `header`, and optional `type`
</ParamField>

<ParamField body="content.rows" type="array" required>
  Array of row objects with keys matching column definitions
</ParamField>

<ParamField body="content.sortable" type="boolean">
  Enable column sorting (default: `true`)
</ParamField>

<ParamField body="content.searchable" type="boolean">
  Enable search/filter functionality (default: `false`)
</ParamField>

## 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

<CodeGroup>
  ```bash curl theme={null}
  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
      }
    }'
  ```

  ```python Python theme={null}
  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
          }
      }
  )
  ```

  ```javascript JavaScript theme={null}
  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
      }
    })
  });
  ```

  ```go Go theme={null}
  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,
      },
  }
  ```

  ```ruby Ruby theme={null}
  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)
  ```

  ```rust Rust theme={null}
  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?;
  ```

  ```csharp .NET theme={null}
  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
      }
  });
  ```
</CodeGroup>

## Example Response

```json theme={null}
{
  "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