lc_html_table

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.

2. Override the SVG Variable

In the Cast designer, go to the Design tab and open Override SVG Variables. Find your lc_html_table_* variable — the standard text input is automatically replaced with a dedicated table editor showing three fields: Theme, Rows, and Override Layout.

3. Choose a Theme

The Theme dropdown at the top of the editor controls the table’s color scheme. Two presets are available, plus a fully customizable option:

Preset	Description
Light	Light background, dark text (default)
Dark	Dark background, light text
Custom	Opens the theme editor for full control

Selecting Dark or Light applies the preset immediately. The resulting JSON is displayed below the dropdown.

Light preset (default):

{
  "bg": "#e0e0e0",
  "cellBg": "#ffffff",
  "label": "#666666",
  "text": "#1a1a1a",
  "progressBarColor": "rgba(59, 130, 246, 0.8)"
}

Dark preset:

{
  "bg": "#333333",
  "cellBg": "#4A4A4A",
  "label": "#aaaaaa",
  "text": "#ffffff",
  "progressBarColor": "rgba(59, 130, 246, 0.8)"
}

Custom theme: Selecting Custom (or clicking Edit next to it) opens a visual theme editor — no JSON editing required. The editor provides color pickers for each property:

Color Picker	What it controls
Text Color	Value text color
Background	Table wrapper background (supports transparency)
Cell Background	Individual cell background (supports transparency)
Label Color	Column label text in card mode
Progress Bar Color	Default progress bar fill (supports transparency)

Click Change next to any color to open its picker, adjust, then click Confirm. The theme JSON is generated automatically when you save.

If your rows contain columns with percentage values, the editor also shows a Column Progress Bar Colors section below the main theme colors. Each column gets its own color picker, and a Reset button to revert it to the theme default.

Tip: You don’t need to write theme JSON manually. The dropdown and color pickers handle everything. The JSON is only shown below the dropdown for reference.

4. Define Your Rows

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

Configuration rows — identified by a reserved_type field, these control appearance and behavior
Data rows — the actual table content

You can type JSON directly, or use Liquid variables (e.g. {{ my_field | json }}) to pull data dynamically from your dataset.

Important: When using a dataset field, always include the | json filter to ensure proper formatting.

Configuration row types:

reserved_type	Description
`columnLabel`	Display labels for each column. Key order determines column order
`highlightColor`	Per-column dot color used during cell highlighting
`textAlignment`	Per-column text alignment: `left`, `center`, or `right`
`progressBarColor`	Per-column progress bar color (overrides theme default)
`hideSeparators`	Hides row separator lines (no additional properties needed)

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

Example — Rows:

[
  {
    "reserved_type": "columnLabel",
    "name": "Name",
    "department": "Department",
    "progress": "Progress",
    "status": "Status"
  },
  {
    "reserved_type": "highlightColor",
    "name": "#8B5CF6",
    "department": "#00a2ff",
    "progress": "#F97316",
    "status": "#FFDD00"
  },
  {
    "reserved_type": "textAlignment",
    "name": "left",
    "department": "left",
    "progress": "right",
    "status": "center"
  },
  {
    "reserved_rowid": "row1",
    "name": "Alice Johnson",
    "department": "Engineering",
    "progress": "85%",
    "status": "Active"
  },
  {
    "reserved_rowid": "row2",
    "name": "Bob Smith",
    "department": "Marketing",
    "progress": "42%",
    "status": "Pending"
  }
]

5. Configure the Layout

There are two ways to control how columns are arranged: the visual Layout Editor and the Override Layout JSON input.

Layout Editor (visual)

Click the Layout Editor button (pencil icon) to open a visual editor for arranging your columns. The editor 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
Resize columns by dragging the bottom-right corner handle — 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 — adding a column redistributes widths evenly
Remove columns by clicking the × button on a column tile — removing redistributes the remaining widths
Each column tile shows its current size (e.g. “6 cols × 2 rows”) as you drag or resize

Desktop / Mobile toggle:

A Desktop ↔ Mobile switch at the top right lets you configure each mode independently. Changes in Desktop mode do not affect Mobile layout and vice versa. Each mode stores its own column widths, column order, row spans, and grid positions.

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.

What the Layout Editor manages:

When you save, the Layout Editor writes these properties to the Override Layout JSON automatically:

What you do in the grid	Property saved
Drag columns to reorder	`columnOrderOverride` / `mobileColumnOrderOverride`
Resize column width	`desktopLayoutHintOverride` / `mobileLayoutHintOverride` (fractions 0–1)
Resize column height	`rowSpan` / `mobileRowSpan` (1–6)
Move columns to specific spots	`desktopLayoutPositionOverride` / `mobileLayoutPositionOverride` (`{x, y}`)
Remove columns from layout	Column removed from order; hidden columns tracked internally

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.

Override Layout (JSON)

The Override Layout text input below the Rows editor shows the raw layout JSON. Any changes made in the visual Layout Editor are saved back to this field. You can also edit this JSON directly for properties that the Layout Editor does not cover.

Properties managed by the Layout Editor (you can also edit these manually):

Property	Description
`desktopLayoutHintOverride`	Column widths as fractions (0–1) for desktop. e.g. `{ "name": 0.4, "status": 0.2 }`
`mobileLayoutHintOverride`	Column widths for mobile
`columnOrderOverride`	Array of column keys to control display order and visibility on desktop
`mobileColumnOrderOverride`	Array of column keys for mobile order/visibility
`rowSpan`	Per-column row span for desktop. e.g. `{ "avatar": 3 }` (max 6)
`mobileRowSpan`	Per-column row span for mobile
`desktopLayoutPositionOverride`	Per-column `{x, y}` grid coordinates for precise positioning
`mobileLayoutPositionOverride`	Per-column `{x, y}` grid coordinates for mobile

Properties you set manually in the JSON (not available in the Layout Editor):

Property	Description
`verticalAlign`	Cell vertical alignment: `"top"` (default), `"center"`, or `"bottom"`
`rowGap`	Gap in pixels between grid cells (default: `2`)
`desktopFontSize`	Font size (px) for values on desktop
`mobileFontSize`	Font size (px) for values on mobile
`desktopHeaderFontSize`	Font size (px) for labels on desktop
`mobileHeaderFontSize`	Font size (px) for labels on mobile
`desktopHorizontalPadding`	Horizontal padding (px) inside cells on desktop
`mobileHorizontalPadding`	Horizontal padding (px) inside cells on mobile
`progressBarRadius`	Border radius (px) for progress bars (default: `5`)

Example — Override Layout:

{
  "desktopLayoutHintOverride": {
    "name": 0.3,
    "department": 0.25,
    "progress": 0.2,
    "status": 0.25
  },
  "mobileColumnOrderOverride": ["name", "progress", "status"],
  "rowSpan": {},
  "verticalAlign": "center",
  "rowGap": 2
}

Dataset/CSV Format

Alternatively, you can use tabular data from your datasets. Since the table uses a row-based configuration system, you’ll need to structure your dataset with both configuration and data rows:

reserved_type	reserved_rowid	name	department	progress	status
columnLabel	Row ID	Name	Department	Progress	Status
highlightColor	#E3F2FD	#8B5CF6	#00a2ff	#F97316	#FFDD00
textAlignment	left	left	left	right	center
data	emp1	Alice Johnson	Engineering	85%	Active
data	emp2	Bob Smith	Marketing	42%	Pending
data	emp3	Carol White	Sales	100%	Complete
data	emp4	David Lee	Finance	67%	Active
data	emp5	Eva Martinez	Engineering	91%	On Track

Download Sample Data - HTML Table

Dataset Usage:

Connect your table to a dataset containing both configuration and data rows
The system will automatically parse reserved rows and data rows based on reserved_type
Filter data rows to show relevant table content
Use configuration rows to control appearance and layout
Theme and layout are still configured through the Theme dropdown and Override Layout / Layout Editor as described above

Important Notes:

Column names must match exactly between configuration rows and data rows
Column names are case-sensitive and must be consistent across all rows
Include 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

Implementation Steps for Dataset Usage

To use dataset/CSV format with tables, follow these steps:

Create Dataset: Import your data containing both configuration rows (with reserved_type) and data rows

Create Field: Create a field from your dataset that contains the table data

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”

Select Variable: Choose your table variable and use the format with your field

Include JSON Filter: Critical: Always include the | json filter with your field, otherwise the table will not work

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)

Desktop vs Mobile

The table automatically adapts based on device mode:

Setting	Desktop	Mobile
Column widths	`desktopLayoutHintOverride`	`mobileLayoutHintOverride`
Column order	`columnOrderOverride`	`mobileColumnOrderOverride`
Row spans	`rowSpan`	`mobileRowSpan`
Positions	`desktopLayoutPositionOverride`	`mobileLayoutPositionOverride`
Font size	`desktopFontSize`	`mobileFontSize`

If mobile-specific configs are not provided, the system falls back to desktop values or equal distribution.

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:

Ensure your data rows include reserved_rowid for row-level targeting
Add a highlightColor configuration row to define per-column dot colors
In the Cast designer, navigate to Narration > Visual Explanations
Find the liquid block for your lc_html_table element
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_type": "columnLabel",
    "name": "Employee",
    "department": "Department",
    "status": "Status"
  },
  {
    "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.

Override 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_type": "columnLabel",
    "avatar": "Rep",
    "dials": "Dials",
    "dialsPerDay": "Dials/Day",
    "connectRate": "Connect Rate",
    "meetings": "Meetings"
  },
  {
    "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 dropdown.

Override Layout:

{
  "desktopLayoutHintOverride": {
    "avatar": 0.4,
    "dials": 0.15,
    "dialsPerDay": 0.15,
    "connectRate": 0.15,
    "meetings": 0.15
  },
  "rowSpan": {
    "avatar": 2
  },
  "mobileLayoutHintOverride": {
    "avatar": 1.0,
    "dials": 0.5,
    "dialsPerDay": 0.5,
    "connectRate": 0.5,
    "meetings": 0.5
  }
}

Or use the Layout Editor — drag the “avatar” column wider and resize it to span 2 rows, then switch to Mobile to set up the mobile layout separately.

Example 3: Progress Bars and Custom Theme

Percentage values automatically render as progress bars.

Rows:

[
  {
    "reserved_type": "columnLabel",
    "project": "Project",
    "owner": "Owner",
    "progress": "Progress",
    "status": "Status"
  },
  {
    "reserved_type": "textAlignment",
    "project": "left",
    "owner": "left",
    "progress": "right",
    "status": "center"
  },
  {
    "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 dropdown, then click Edit to open the theme editor. Use the color pickers to set:

Text Color → #ffffff (white)
Background → #1e1e2e (dark navy)
Cell Background → #2a2a3e (slightly lighter)
Label Color → #888888 (gray)
Progress Bar Color → blue with transparency

Override Layout:

{
  "desktopLayoutHintOverride": {
    "project": 0.35,
    "owner": 0.25,
    "progress": 0.2,
    "status": 0.2
  }
}

Responsive HTML Table with lc_html_table_*

Setting Up Your Table

1. Add the SVG Element

2. Override the SVG Variable

3. Choose a Theme

4. Define Your Rows

5. Configure the Layout

Layout Editor (visual)

Override Layout (JSON)

Dataset/CSV Format

Implementation Steps for Dataset Usage

Table Features

Table Mode vs Card Mode

Smart Value Detection

Icon Support

Scrolling

Desktop vs Mobile

Highlighting Cells

Examples

Example 1: Simple Table (Table Mode)

Example 2: Card Layout with Row Spanning

Example 3: Progress Bars and Custom Theme

Responsive HTML Table with `lc_html_table_*`