Striped rows table

Table styletype: "table"

Alternate row shading keeps wide tables scannable — tint the zebra rows to your brand and swap the data on every API call. Generate striped tables free.

Edit it — this is the actual editor panel

Design JSON — “Striped rows” 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": "none",
        "opacity": 1,
        "altRowColor": "#EEF2FF"
      }
    }
  ]
}

Table examples

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

Payroll hours sheet

Hours per employee with indigo-tinted zebra rows and no rules.

API overrides for this example

{
  "leaderboard.striped": true,
  "leaderboard.altRowColor": "#EEF2FF",
  "leaderboard.borders": "none",
  "leaderboard.headers": [
    "Employee",
    "Regular",
    "Overtime",
    "Total"
  ],
  "leaderboard.rows": [
    [
      "A. Brooks",
      38,
      4,
      42
    ],
    [
      "J. Patel",
      40,
      0,
      40
    ],
    [
      "S. Kim",
      36,
      6,
      42
    ],
    [
      "L. Moreau",
      40,
      2,
      42
    ]
  ]
}

Shipping rate card

Zone-based shipping rates — the stripes carry the eye across each row.

API overrides for this example

{
  "leaderboard.striped": true,
  "leaderboard.altRowColor": "#EEF2FF",
  "leaderboard.borders": "none",
  "leaderboard.headers": [
    "Zone",
    "Under 1 kg",
    "Under 5 kg",
    "Over 5 kg"
  ],
  "leaderboard.rows": [
    [
      "Domestic",
      "$4.90",
      "$8.50",
      "$14.00"
    ],
    [
      "Europe",
      "$9.90",
      "$16.00",
      "$24.50"
    ],
    [
      "Worldwide",
      "$14.90",
      "$22.00",
      "$39.00"
    ]
  ],
  "leaderboard.columnAlign": [
    "left",
    "right",
    "right",
    "right"
  ]
}

When to use the striped rows style

Wide payroll and roster sheets
Rate cards with many rows
Usage reports scanned row by row

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": "none",
    "leaderboard.opacity": 1,
    "leaderboard.altRowColor": "#EEF2FF"
}'

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 Minimal Dark headerStriped rows

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