Responsive HTML Table with lc_html_table_*

The lc_html_table_* prefix renders a responsive HTML table inside your SVG using CSS Grid. It supports flexible card-style layouts with row spanning, automatic progress bars, image cells, theming, and cell highlighting — ideal for dashboards, KPI cards, and data-dense presentations.

Use Cases

• KPI dashboards and metric cards with flexible grid layouts
• Sales performance and pipeline tracking
• Employee or team scorecards with row-spanning fields
• Status dashboards with progress bars and icons
• Data storytelling with cell-level highlighting during narration
• Product catalogs and inventory management
• Financial reports and comparison tables

---

Setting Up Your Table

1. Add the SVG Element

Add a <rect> element in your SVG file with an ID that starts with lc_html_table_:

lc_html_table_1

Compatibility: Works with <rect> elements only.

Important — Stroke Position: When designing in Figma, ensure the <rect> element’s stroke position is set to Center. If you use Inside or Outside, Figma converts the <rect> to a <path> on export, which breaks the widget. This applies to all lc_XXX widgets that rely on <rect> elements.

2. Define Your Rows

The Rows editor accepts a JSON array of row objects. There are two kinds of rows:

• Configuration rows (optional) — identified by a reserved_type field for features such as per-column highlight colors (see Highlighting cells)
• Data rows — the actual table content; each row’s keys define the columns

You can provide rows in two ways: write JSON directly in the Rows editor, or pull from a dataset using Liquid variables.

Row Structure

Data row fields:

Key	Description
reserved_rowid	Unique row identifier for highlighting (not displayed in table)
<columnKey>	Cell value — text, percentage (e.g. "75%"), or CDN image URL

Option A: Write JSON Directly

Type or paste a JSON array into the Rows editor:

[
  {
    "reserved_rowid": "row1",
    "name": "Alice Johnson",
    "department": "Engineering",
    "progress": "85%",
    "status": "Active"
  },
  {
    "reserved_rowid": "row2",
    "name": "Bob Smith",
    "department": "Marketing",
    "progress": "42%",
    "status": "Pending"
  }
]

Option B: Pull from a Dataset

You can use tabular data from your datasets instead of writing JSON manually. Structure your dataset with both configuration rows and data rows:

reserved_type	reserved_rowid	avatar	name	department	progress	completion	score	verified	status
data	row1	https://res.cloudinary.com/…	John Doe	Engineering	75%	80%	92%	yes	Active
data	row2	https://res.cloudinary.com/…	Jane Smith	Marketing	45%	60%	88%	yes	Active
data	row3	https://res.cloudinary.com/…	Bob Wilson	Sales	100%	100%	65%	no	Inactive
data	row4	https://res.cloudinary.com/…	Alice Brown	Engineering	20%	35%	100%	yes	Active
data	row5	https://res.cloudinary.com/…	Charlie Davis	HR	3.5%	12%	78.2%	no	Pending

Download Sample Data - HTML Table

Steps to connect a dataset:

1. Create Dataset — Import your data rows (and optional configuration rows with reserved_type where needed, e.g. for highlighting)

2. Create Field — Create a field from your dataset that contains the table data

3. Set Value Formatting — In the field settings, set Value Formatting to “JSON” — this is crucial for proper data formatting

Override SVG Variables — In the SVG slide design tab, go to “Override SVG Variables”, choose your table variable, and reference your field using a Liquid variable

Critical: Always include the | json filter with your field (e.g. {{ my_field | json }}), otherwise the table will not work.

Important notes for dataset usage:

• The system automatically parses reserved rows and data rows based on reserved_type
• Column keys must match exactly across all data rows (case-sensitive)
• Include a reserved_rowid column if you plan to use cell highlighting features
• The reserved_rowid column will not be displayed in the rendered table
• If data is not passed in the correct format, the element will display as a plain <rect> without any table visualization

3. Table Editor

The Table Editor button (next to the Rows and Override Layout fields) opens a unified modal with three tabs:

Tab	What it contains
Theme	Preset toggle (Light / Dark / Custom), all color and font controls, and per-column overrides (pick a column, then add properties from a dropdown)
Desktop Layout	Drag-and-drop grid editor for desktop column arrangement, with undo/redo/revert and live preview
Mobile Layout	Separate drag-and-drop grid editor for mobile, with its own independent undo/redo history

4. Choose a Theme

The Theme tab in the Table Editor modal controls the table’s visual appearance. A preset toggle at the top lets you pick a starting point:

Preset	Description
Light	Light background, dark text (default)
Dark	Dark background, light text
Custom	Full control over every property

Selecting Dark or Light applies the preset colors immediately. Changing any individual property automatically switches the preset to Custom.

Table Defaults

The Table Defaults section in the Theme tab provides visual controls for every theme property. Click Change next to any color to open its picker, adjust, then click Confirm. Numeric inputs accept pixel values. Each property has a Reset button to revert to the preset default.

Control	Property	What it controls
Text Color	text	Value text color
Background	bg	Table wrapper background (supports transparency)
Cell Background	cellBg	Individual cell background (supports transparency)
Label Color	label	Column label text in card mode
Progress Bar Color	progressBarColor	Default progress bar fill (supports transparency)
Header Font Color	headerFontColor	Header/label text color (defaults to Label Color if not set)
Header Background	headerBg	Header row background color (defaults to Background if not set)
Highlight Color	highlightColor	Default highlight dot color for cell highlighting
Hide Row Separator	hideSeparator	Toggle to hide separator lines between records
Font Size	fontSize	Body value font size in pixels
Header Font Size	headerFontSize	Header/label font size in pixels
Text Alignment	textAlignment	Default text alignment for all cells: left, center, or right

Column Overrides

Below the Table Defaults section, the Theme tab includes a Column Overrides panel. This lets you override any theme property for specific columns — for example, a different progress bar color for the “revenue” column or a custom font size for “status.”

Instead of listing every column at once, the designer uses two dropdowns: first choose which column to configure, then choose which property to override for that column. Add each property you need; only the overrides you add appear for the selected column.

How to use:

1. Open the column dropdown and select the column you want to override
2. Open the property dropdown and pick the theme property to override (colors, font sizes, alignment, and other options match Table Defaults)
3. Set the value for that property — it applies only to the selected column
4. Add more properties for the same column by choosing another entry from the property dropdown, or switch to a different column in the column dropdown
5. Click Reset on a property to revert that override to the table default
6. Remove an override you no longer need using the remove control for that property

5. Configure the Layout

There are two ways to control how columns are arranged: the visual Layout Editor (inside the Table Editor modal) and the Override Layout JSON input.

The Desktop Layout and Mobile Layout tabs in the Table Editor modal each contain a drag-and-drop grid editor for arranging columns. Each tab has three areas: an unplaced columns bar at the top, a drag-and-drop grid in the middle, and a live table preview at the bottom.

Grid interactions:

• Drag columns to reposition them on the grid — the drop position determines column order and placement. Overlapping columns are moved automatically (collision resolution).
• Resize columns by dragging the bottom-right corner handle (visible on hover) — horizontal resize changes column width, vertical resize changes row span (max 6 rows)
• Add columns by clicking the + button next to unplaced column names in the top bar
• Remove columns by clicking the × button on a column tile — the column moves to the unplaced bar
• Each column tile shows its current size (e.g. “6 cols × 2 rows”) as you drag or resize

Desktop and Mobile tabs:

The Desktop Layout and Mobile Layout tabs are fully independent. Changes in one tab do not affect the other. Each tab stores its own column widths, column order, row spans, grid positions, and undo history.

Undo / Redo / Revert:

Each layout tab provides its own history controls:

Button	Action
Undo	Reverts the last grid change (drag, resize, add, remove)
Redo	Re-applies a previously undone change
Revert	Resets the entire layout back to the last saved state

History is tracked independently for desktop and mobile. Opening the modal resets both history stacks.

Live preview:

Below the grid, a live table preview renders up to 3 data rows using your current layout and theme, so you can see the result as you make changes.

The grid uses a 24-column system. If all columns have equal width and fit on a single row, the table renders in table mode (header + rows). Once widths or positions cause wrapping, it switches to card mode.

---

Table Features

Table Mode vs Card Mode

The table automatically chooses between two display modes:

Mode	When	Behavior
Table mode	No layout hints, or all columns fit in a single row	Traditional table with sticky header row
Card mode	Layout hints cause columns to wrap into multiple rows	Card-style records with label above each cell value

Smart Value Detection

Cell values are automatically enhanced based on their content:

Value pattern	Detected as	Rendering
"75%"	Percentage	Progress bar behind the value (0–100 range, clamped)
CDN image URL	Image	Rendered as an image (max 32×32px). Allowed hosts: Cloudinary, S3, CloudFront, etc.
Any other text	Plain text	Displayed as-is

Icon Support

Add icons next to any column’s values using the _icon_ prefix in data rows:

{
  "reserved_rowid": "row1",
  "status": "Active",
  "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/check-circle.svg"
}

• _icon_<columnName> columns are hidden — they don’t appear as visible columns
• Icons display to the left of the cell value
• SVG format recommended for best quality

Scrolling

When table content exceeds the rect height:

• Vertical scrolling is enabled automatically
• Fade indicators appear at top/bottom edges when scrollable
• In table mode, the header row stays sticky at the top
• An auto-scroll animation plays when the table becomes visible (scrolls down, pauses, then scrolls back up)

Highlighting Cells

The HTML table supports cell highlighting during narration, allowing you to focus attention on specific rows, columns, or individual cells.

How It Works:

When a highlight is active, matching cells show an enlarged, fully opaque colored dot. Other cells remain at default dot opacity (15%).

Highlight Format:

Mode	Format	Description
Entire row	[{"row":"rowId"}]	Highlights all cells in the row
Entire column	[{"column":"columnKey"}]	Highlights all cells in the column (+ header)
Cell by value	[{"row":"rowId","column":"value"}]	Highlights cells in the row matching the value
Multiple	[{"row":"row1"},{"column":"status"}]	Combines multiple highlight rules
Clear	[]	Removes all highlights

Setting Up Highlights:

1. Ensure your data rows include reserved_rowid for row-level targeting
2. Add a highlightColor configuration row to define per-column dot colors
3. In the Cast designer, navigate to Narration > Visual Explanations
4. Find the liquid block for your lc_html_table element
5. Add the highlight JSON

Examples:

[{ "row": "emp1" }]

Highlights all cells in the emp1 row.

[{ "column": "status" }]

Highlights the entire status column, including the header in table mode.

[{ "row": "emp1", "column": "Active" }]

Highlights cells in emp1 whose value matches “Active”.

[{ "row": "emp1" }, { "column": "progress" }]

Highlights the emp1 row AND the entire progress column.

---

Examples

Example 1: Simple Table (Table Mode)

When no layout hints are provided, the table renders in table mode with equal columns and a sticky header.

Rows:

[
  {
    "reserved_rowid": "emp1",
    "name": "Alice Johnson",
    "department": "Engineering",
    "status": "Active"
  },
  {
    "reserved_rowid": "emp2",
    "name": "Bob Smith",
    "department": "Marketing",
    "status": "Pending"
  }
]

Theme: Light (default) — no changes needed.

Layout: Not needed — equal columns with sticky header are used by default.

Example 2: Card Layout with Row Spanning

Fields span multiple rows for a dashboard card layout.

Rows:

[
  {
    "reserved_rowid": "rep1",
    "avatar": "Alice Johnson",
    "dials": "1085",
    "dialsPerDay": "108.5",
    "connectRate": "32%",
    "meetings": "24"
  },
  {
    "reserved_rowid": "rep2",
    "avatar": "Bob Smith",
    "dials": "767",
    "dialsPerDay": "85.2",
    "connectRate": "28%",
    "meetings": "18"
  }
]

Theme: Select Dark from the preset toggle.

Layout: In the Desktop Layout tab, drag the “avatar” column wider and resize it to span 2 rows. Switch to the Mobile Layout tab to set up the mobile layout separately.

Example 3: Progress Bars and Custom Theme

Percentage values automatically render as progress bars.

Rows:

[
  {
    "reserved_rowid": "p1",
    "project": "Website Redesign",
    "owner": "Design Team",
    "progress": "85%",
    "status": "On Track"
  },
  {
    "reserved_rowid": "p2",
    "project": "API Migration",
    "owner": "Backend Team",
    "progress": "42%",
    "status": "At Risk"
  },
  {
    "reserved_rowid": "p3",
    "project": "Mobile App",
    "owner": "Mobile Team",
    "progress": "100%",
    "status": "Complete"
  }
]

Theme: Select Custom from the preset toggle, then use the Theme controls to customize colors and font sizes.

Layout: Use the Desktop Layout tab to adjust column widths. Set text alignment per column in the Theme tab’s Column Overrides: choose the column, then add Text Alignment from the property dropdown.