---
title: "Table Image API — Generate table images via API | Imejis"
description: "Render leaderboards, price lists and reports as table images — swap headers and rows on every API call, styled to your brand. Start generating free."
url: "https://www.imejis.io/components/table"
---

# Table Image API — Generate table images via API | Imejis

A data grid with headers, striped rows, per-column alignment and configurable borders — leaderboards, price lists and reports rendered as pixels.

## Use cases

- Weekly leaderboard images for community Slack or Discord
- Price and rate sheets refreshed automatically
- Sports standings graphics for social media
- Order or booking summaries embedded in emails

## Authoring notes

- Each row is an array of cell values; keep the column count equal to headers.

## Properties

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `headers` | `string[]` | `[]` | Column header labels. |
| `rows` | `(string \| number)[][]` | `[]` | Table body as an array of rows, each an array of cell values. |
| `columnAlign` | `('left' \| 'center' \| 'right' \| 'auto')[]` | — | Per-column text alignment ('auto' right-aligns numbers). |
| `showHeader` | `boolean` | `true` | Render the header row. |
| `striped` | `boolean` | `true` | Alternate row background colors. |
| `borders` | `'all' \| 'horizontal' \| 'none'` | `"horizontal"` | Which cell borders are drawn. |
| `fontSize` | `number` (min 1) | `14` | Cell font size in pixels. |
| `headerBg` | `color` | `"#f1f5f9"` | Header row background color. |
| `headerColor` | `color` | `"#334155"` | Header text color. |
| `rowColor` | `color` | `"#ffffff"` | Base row background color. |
| `altRowColor` | `color` | `"#f8fafc"` | Alternate row background color when striped. |
| `textColor` | `color` | `"#1e293b"` | Body cell text color. |
| `gridColor` | `color` | `"#e2e8f0"` | Color of the internal rules (cell/row/header separators); falls back to borderColor. |
| `cellPaddingX` | `number` (min 0) | `10` | Horizontal cell padding in pixels. |
| `cellPaddingY` | `number` (min 0) | `7` | Vertical cell padding in pixels. |
| `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). |
| `borderWidth` | `number` | `0` | Border thickness in pixels around the component. |
| `borderColor` | `color` | `"transparent"` | Border color (any CSS color). |
| `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. |
| `borderRadius` | `number` | `0` | Corner radius in pixels. |
| `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |

## Sample design JSON

```json
{
  "title": "Table sample",
  "description": "A dynamic leaderboard table",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-table",
      "key": "leaderboard",
      "type": "table",
      "position": {
        "x": 140,
        "y": 90
      },
      "rotation": 0,
      "size": {
        "width": 520,
        "height": 240
      },
      "dynamic": true,
      "properties": {
        "headers": [
          "Rank",
          "Name",
          "Score"
        ],
        "rows": [
          [
            1,
            "Alice",
            980
          ],
          [
            2,
            "Bob",
            870
          ],
          [
            3,
            "Carol",
            820
          ]
        ],
        "showHeader": true,
        "striped": true,
        "borders": "horizontal",
        "opacity": 1
      }
    }
  ]
}
```

## Examples

### Invoice line items

Order lines with quantities and totals — amounts right-aligned per column.

API overrides that reproduce this example:

```json
{
  "leaderboard.headers": [
    "Item",
    "Qty",
    "Amount"
  ],
  "leaderboard.rows": [
    [
      "Pro plan (annual)",
      1,
      "$290.00"
    ],
    [
      "Extra seats",
      4,
      "$76.00"
    ],
    [
      "Priority support",
      1,
      "$49.00"
    ]
  ],
  "leaderboard.columnAlign": [
    "left",
    "right",
    "right"
  ]
}
```

### League standings for social

Weekend standings ready to post — striped rows with points in the last column.

API overrides that reproduce this example:

```json
{
  "leaderboard.headers": [
    "Pos",
    "Team",
    "W",
    "L",
    "Pts"
  ],
  "leaderboard.rows": [
    [
      1,
      "Falcons",
      12,
      2,
      36
    ],
    [
      2,
      "Comets",
      11,
      3,
      33
    ],
    [
      3,
      "Rovers",
      9,
      5,
      27
    ],
    [
      4,
      "Hornets",
      8,
      6,
      24
    ]
  ]
}
```

## API overrides

Replace the body per render with '<key>.rows' (or just '<key>') and the columns with '<key>.headers'.

Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change:

```json
{
  "leaderboard.headers": [
    "Rank",
    "Name",
    "Score"
  ],
  "leaderboard.rows": [
    [
      1,
      "Alice",
      980
    ],
    [
      2,
      "Bob",
      870
    ],
    [
      3,
      "Carol",
      820
    ]
  ],
  "leaderboard.showHeader": true,
  "leaderboard.striped": true,
  "leaderboard.borders": "horizontal",
  "leaderboard.opacity": 1
}
```

```bash
curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \
--header 'dma-api-key: {{YOUR_API_KEY}}' \
--header 'Content-Type: application/json' \
--data '{
    "leaderboard.headers": [
        "Rank",
        "Name",
        "Score"
    ],
    "leaderboard.rows": [
        [
            1,
            "Alice",
            980
        ],
        [
            2,
            "Bob",
            870
        ],
        [
            3,
            "Carol",
            820
        ]
    ],
    "leaderboard.showHeader": true,
    "leaderboard.striped": true,
    "leaderboard.borders": "horizontal",
    "leaderboard.opacity": 1
}'
```

`{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create
the design in your account (paste the sample design JSON above into the
editor at https://app.imejis.io, or create it programmatically via the
imejis MCP server's `create_design` + `update_design` tools), then render
it with the design's id and one of your API keys.

Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same
catalog as structured data via the `list_component_types` tool (property
kinds, allowed values, bounds, ready-to-use sample designs).

## Frequently Asked Questions

### Can I replace the rows on each API call?

Yes — send '<key>.rows' (or just the key) as an array of row arrays, and '<key>.headers' to change the columns.

### Can I align numbers to the right?

columnAlign takes a per-column list of left/center/right/auto — 'auto' right-aligns numeric cells automatically.

### What styling is available?

Striped rows, header/row/alt-row colors, three border modes (all, horizontal, none), cell padding and font size — enough to match your brand.

### Can I hide the header row?

Yes — set showHeader to false and only the body rows render.

## Variants

- [Grid borders](https://www.imejis.io/components/table/grid-borders.md) — Full cell borders without striping — dense reference tables.
- [Minimal](https://www.imejis.io/components/table/minimal.md) — No borders, no stripes — clean editorial look.
- [Dark header](https://www.imejis.io/components/table/dark-header.md) — High-contrast header row with brand colors.
- [Striped rows](https://www.imejis.io/components/table/striped-rows.md) — Zebra striping keeps wide rows easy to scan across.

All components: https://www.imejis.io/components.md