Introduction

The Table component is a robust layout element used to render complex tabular dataset structures clearly on client pages. Built with full support for zero-JS responsive templates and data-driven CMS configuration schemas, it supports clean vertical scroll wrapping, dynamic column alignment presets, and hover highlights.

Usage

You can easily map data and style tables directly from their dashboard.

1. Basic Plain Table with Custom Alignment

A standard text inventory list using the plain variant and featuring end-aligned prices for easy reading.

{
  "type": "table",
  "variant": "plain",
  "columns": [
    { "header": "Name", "key": "name" },
    { "header": "Category", "key": "category" },
    { "header": "Price", "key": "price", "align": "end" }
  ],
  "rows": "[{\"name\": \"Laptop\", \"category\": \"Electronics\", \"price\": \"$999.00\"}, {\"name\": \"Coffee Mug\", \"category\": \"Home & Kitchen\", \"price\": \"$15.00\"}]"
}

2. Zebra-Striped Interactive Table (Surface Variant)

Features shaded alternating row colors with zebra-striping, interactive hover highlighting, and structural borders.

{
  "type": "table",
  "variant": "surface",
  "striped": true,
  "interactive": true,
  "columnBorder": true,
  "columns": [
    { "header": "System Service", "key": "service" },
    { "header": "Server Node", "key": "node", "align": "center" },
    { "header": "Status", "key": "status", "align": "end" }
  ],
  "rows": "[{\"service\": \"Auth Endpoint\", \"node\": \"EU-West\", \"status\": \"Online\"}, {\"service\": \"Payment API\", \"node\": \"US-East\", \"status\": \"Degraded\"}, {\"service\": \"File Storage\", \"node\": \"APAC-South\", \"status\": \"Online\"}]"
}

3. Row Hover Actions

Pass hoverActions to render extra controls (e.g. a "View Details" button) into a zero-width trailing cell that stays hidden until its row is hovered or one of its controls receives keyboard focus. It's absolutely positioned over the row's end, so it never widens the table — it may visually cover the last column(s) while revealed.

hoverActions is a render function (like column.render), not a CMS-serializable field — it isn't exposed in the Sveltia CMS table block schema.

Hydration and Interactive Limitations of hoverActions

When using hoverActions on a table that is fully or partially interactive (for example, when headers are sortable or the table hydrates via a parent island wrapper), there are some important architectural considerations regarding client-side state:

1. Static Markup Rendering: The hoverActions function is executed during server-side rendering (SSR). If the table has sorting enabled or undergoes client-side hydration, any interactive event listeners (like onClick or stateful island components) nested directly inside hoverActions may be dropped during DOM cloning and hydration.
2. Recommended Click-Delegation Pattern: Instead of embedding complex client islands or active event hooks directly inside the hoverActions callback:
   • Render static triggers or standard HTML elements with descriptive data attributes (e.g., <button type="button" data-action="delete" data-id={row.id}>Delete</button>).
   • Mount a single stateful controller island outside of the Table component.
   • Listen to events globally (or delegate them on the parent element) to capture clicks on those data attributes and trigger appropriate modals, drawers, or API calls.

Props

Column List Properties (columns)

Each entry in the columns list parameter accepts the following fields:

Architecture Notes

• Optimized JSON String Coercions: Because raw row structures vary dynamically per table block, Sveltia CMS delivers row items as an escaped JSON array string under the rows field. This string is safely parsed at render-time, guaranteeing optimal bundle sizes without heavy payload serialization.
• Pure CSS Layout Hygiene: Headers, column outlines, and zebra striping rely on lightweight, highly robust Panda CSS utility variables. This eliminates layout shifts while keeping table rendering instantaneous on mobile touchscreens.
• Scroll pinning: Pinning column headers with stickyHeader utilises standard position: sticky on headers inside an overflow wrap, bypassing expensive scroll event listeners in client-side script contexts.