Table component
Datatype: "table"A data grid with headers, striped rows, per-column alignment and configurable borders — leaderboards, price lists and reports rendered as pixels.
Design 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
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorTable examples
Real renders of the table — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Invoice line items
Order lines with quantities and totals — amounts right-aligned per column.
API overrides for this example
{
"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 for this example
{
"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
]
]
}All table styles
Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.
Use cases
What developers typically build with the table component.
- 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
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 the sample design'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
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Property reference
Every property the table component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| headers | string[] | text | [] | Column header labels. |
| rows | (string | number)[][] | text | [] | Table body as an array of rows, each an array of cell values. |
| columnAlign | ('left' | 'center' | 'right' | 'auto')[] | text | — | Per-column text alignment ('auto' right-aligns numbers). |
| showHeader | boolean | true | true | Render the header row. |
| striped | boolean | true | true | Alternate row background colors. |
| borders | 'all' | 'horizontal' | 'none' | allhorizontalnone | "horizontal" | Which cell borders are drawn. |
| fontSize | number | 14 | 14 | Cell font size in pixels. |
| headerBg | color | #f1f5f9 | "#f1f5f9" | Header row background color. |
| headerColor | color | #334155 | "#334155" | Header text color. |
| rowColor | color | #ffffff | "#ffffff" | Base row background color. |
| altRowColor | color | #f8fafc | "#f8fafc" | Alternate row background color when striped. |
| textColor | color | #1e293b | "#1e293b" | Body cell text color. |
| gridColor | color | #e2e8f0 | "#e2e8f0" | Color of the internal rules (cell/row/header separators); falls back to borderColor. |
| cellPaddingX | number | 10 | 10 | Horizontal cell padding in pixels. |
| cellPaddingY | number | 7 | 7 | Vertical cell padding in pixels. |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |