Grid borders table
Table styletype: "table"Full cell borders without striping for dense reference tables — rows and headers replaced on every API call. Generate grid table images free today.
Edit it — this is the actual editor panel
Design JSON — “Grid borders” 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": false,
"borders": "all",
"opacity": 1
}
}
]
}Table examples
Real renders of the grid borders table — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Plan comparison sheet
Free vs Pro vs Team limits in a fully ruled grid for a pricing page.
API overrides for this example
{
"leaderboard.borders": "all",
"leaderboard.striped": false,
"leaderboard.headers": [
"Feature",
"Free",
"Pro",
"Team"
],
"leaderboard.rows": [
[
"Renders / month",
"100",
"5,000",
"50,000"
],
[
"Team seats",
1,
3,
10
],
[
"API access",
"No",
"Yes",
"Yes"
]
],
"leaderboard.columnAlign": [
"left",
"center",
"center",
"center"
]
}Studio class timetable
A weekly schedule where full cell borders keep the slots scannable.
API overrides for this example
{
"leaderboard.borders": "all",
"leaderboard.striped": false,
"leaderboard.headers": [
"Time",
"Mon",
"Wed",
"Fri"
],
"leaderboard.rows": [
[
"07:00",
"Yoga",
"HIIT",
"Yoga"
],
[
"12:15",
"Spin",
"Spin",
"Core"
],
[
"18:30",
"Boxfit",
"Yoga",
"HIIT"
]
],
"leaderboard.columnAlign": [
"left",
"center",
"center",
"center"
]
}When to use the grid borders style
- Spec and comparison sheets
- Timetables and schedules
- Dense numeric reference tables
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": false,
"leaderboard.borders": "all",
"leaderboard.opacity": 1
}'Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.
Other table styles
See the table component page for the full property reference and FAQs.