Dark header table

Table styletype: "table"

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.

Edit it — this is the actual editor panel

Design JSON — “Dark header” variant

{
  "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"
      }
    }
  ]
}

Table examples

Real renders of the dark header table — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Branded price sheet

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

API overrides for this example

{
  "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 for this example

{
  "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"
  ]
}

When to use the dark header style

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

Use it dynamically via the API

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

Full API request with this variant's current values — the playground above sends only the properties you change

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,
    "leaderboard.headerBg": "#111827",
    "leaderboard.headerColor": "#ffffff"
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Other table styles

Default Grid borders MinimalDark headerStriped rows

See the table component page for the full property reference and FAQs.