---
title: "Grid Table Image API — Full-bordered data tables | Imejis"
description: "Full cell borders without striping for dense reference tables — rows and headers replaced on every API call. Generate grid table images free today."
url: "https://www.imejis.io/components/table/grid-borders"
---

# Grid Table Image API — Full-bordered data tables | Imejis

Full cell borders without striping — dense reference tables.

## Use cases

- Spec and comparison sheets
- Timetables and schedules
- Dense numeric reference tables

## 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": false,
        "borders": "all",
        "opacity": 1
      }
    }
  ]
}
```

## Examples

### Plan comparison sheet

Free vs Pro vs Team limits in a fully ruled grid for a pricing page.

API overrides that reproduce this example:

```json
{
  "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 that reproduce this example:

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

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