---
title: "Dark Header Table Image API — Branded data grids | Imejis"
description: "A high-contrast header row in your brand colors over striped rows — table data refreshed on every API call. Generate branded table images for free."
url: "https://www.imejis.io/components/table/dark-header"
---

# Dark Header Table Image API — Branded data grids | Imejis

High-contrast header row with brand colors.

## Use cases

- Branded leaderboards
- Client-facing price sheets
- Sports standings with team branding

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

## Design JSON (this variant)

```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,
        "headerBg": "#111827",
        "headerColor": "#ffffff"
      }
    }
  ]
}
```

## Examples

### Branded price sheet

Service rates under an indigo brand header for a client-facing graphic.

API overrides that reproduce this example:

```json
{
  "leaderboard.headerBg": "#4F46E5",
  "leaderboard.headerColor": "#ffffff",
  "leaderboard.striped": true,
  "leaderboard.headers": [
    "Service",
    "Turnaround",
    "Price"
  ],
  "leaderboard.rows": [
    [
      "Logo design",
      "5 days",
      "$450"
    ],
    [
      "Brand kit",
      "2 weeks",
      "$1,200"
    ],
    [
      "Landing page",
      "10 days",
      "$900"
    ]
  ],
  "leaderboard.columnAlign": [
    "left",
    "center",
    "right"
  ]
}
```

### Crypto price board

Token prices with 24h change under a near-black header row.

API overrides that reproduce this example:

```json
{
  "leaderboard.headerBg": "#111827",
  "leaderboard.headerColor": "#ffffff",
  "leaderboard.striped": true,
  "leaderboard.headers": [
    "Token",
    "Price",
    "24h"
  ],
  "leaderboard.rows": [
    [
      "BTC",
      "$67,410",
      "+2.4%"
    ],
    [
      "ETH",
      "$3,290",
      "+1.1%"
    ],
    [
      "SOL",
      "$142",
      "-0.8%"
    ]
  ],
  "leaderboard.columnAlign": [
    "left",
    "right",
    "right"
  ]
}
```

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

## Related

- [Table component](https://www.imejis.io/components/table.md) — full reference and FAQs
- [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.
- [Striped rows](https://www.imejis.io/components/table/striped-rows.md) — Zebra striping keeps wide rows easy to scan across.