lc_table

Interactive Table Visualization with `lc_table_*`

The lc_table_* prefix is used for SVG element IDs that need to display interactive table visualizations. This component renders tables directly in SVG using <text> and <rect> elements without relying on foreignObject, providing smooth scrolling, text truncation, and responsive layout capabilities perfect for data presentation, reporting, and dashboard interfaces.

What’s New

The lc_table component has been enhanced with powerful new features:

Vertical Padding Control: Add configurable spacing below data rows (headers remain compact)
Horizontal Padding Control: Add configurable horizontal spacing to the right of each column
Platform-Specific Padding: Different padding values for desktop and mobile views (both vertical and horizontal)
Smart Multi-Line Padding: Automatically handles padding when columns wrap across multiple visual lines
Per-Column Configuration: Set different padding values for each column based on content needs
Intelligent Gap Control: Column gaps automatically set to 0 when horizontal padding is present
Icon Support: Display icons from CDN URLs next to text in data rows with automatic scaling and optical centering
Hide Row Separators: Option to hide horizontal separator lines between rows

Quick Start Tips

Adding Icons:

Use _icon_columnName to add icons to any column
Icons work best with reliable CDN URLs (e.g., jsDelivr, Unpkg)
SVG format recommended for best quality
Icons automatically scale with font size

Improving Readability:

Add desktopVerticalPadding and mobileVerticalPadding to create space below data rows
Start with values like “8”, “10”, or “12” pixels
Headers remain compact automatically

Controlling Spacing:

Use desktopHorizontalPadding and mobileHorizontalPadding for precise column spacing
Column gaps automatically become 0 when using horizontal padding
You have full control over all spacing

Clean Design:

Add hideRowSeparators reserved type to remove row lines
Works great with vertical padding for visual separation
Creates a modern, minimal look

Use Cases

Equipment inventory and asset management tables with status icons
Customer data and contact lists with visual indicators
Financial reports and accounting data with improved readability through padding
Project status and task tracking with priority icons and color coding
Performance metrics and KPI dashboards with visual status indicators
Product catalogs and specifications with category icons
User activity logs and audit trails with clean, spacious layouts
Sales pipeline and opportunity tracking with stage icons and visual hierarchy

Element Identification

The target element must be a <rect> with an ID that starts with lc_table_* for automatic table visualization.

Input Format

The input value must be provided as a JSON array of objects with a specific row-based structure that includes both configuration rows (reserved rows) and actual data rows.

Table Data Structure

The table handler consumes an array of row objects where some rows are “reserved” configuration rows (identified by reserved_type), and the rest are data rows. The structure is read-only and immutable.

Row Types:

Reserved Rows: Configure header labels, colors, alignment, layout, and font sizes
Data Rows: Actual table data with string values, keys matching the column keys

Reserved Row Types

reserved_type	Required Keys	Type	Description
`columnLabel`	`<colKey>: <header label>`	string	Defines column order and header labels. The object’s key order determines column order. If omitted, order falls back to the first data row’s keys (excluding reserved_type).
`textcolor`	`<colKey>: <color>`	string	Per-column text color for both header and body. Any valid CSS color (hex/name). Falls back to scene text color.
`textColumnHeaderColor`	`<colKey>: <color>`	string	Per-column header text color only. Takes precedence over `textcolor` for headers. Falls back to `textcolor` if not specified.
`textAlignment`	`<colKey>: left\\|center\\|right`	string	Per-column alignment. Mapped to SVG text-anchor: start/middle/end. Defaults to left.
`desktopLayoutHint`	`<colKey>: <fraction 0..1>`	number	Per-column width fractions for desktop. Fractions are normalized per header “line”. If cumulative sum exceeds 1, layout wraps to next line.
`mobileLayoutHint`	`<colKey>: <fraction 0..1>`	number	Same as desktopLayoutHint, applied when not in desktop mode.
`mobileFontSize`	`<colKey>: <px number>`	number	Mobile-only font-size hints; system picks safe minimum across provided values. Header font is slightly smaller than body.
`desktopVerticalPadding`	`<colKey>: <px number>`	number	Vertical padding in pixels per column for desktop view (data rows only).
`mobileVerticalPadding`	`<colKey>: <px number>`	number	Vertical padding in pixels per column for mobile view (data rows only).
`desktopHorizontalPadding`	`<colKey>: <px number>`	number	Horizontal padding in pixels per column for desktop view (headers and data rows).
`mobileHorizontalPadding`	`<colKey>: <px number>`	number	Horizontal padding in pixels per column for mobile view (headers and data rows).
`hideRowSeparators`	none	n/a	Hides horizontal separator lines between rows. Simply add this reserved_type object to enable (no additional properties needed).

Data Row Format

Key	Type	Description
`reserved_type`	string	If omitted or set to “data”, the row is treated as a data row.
`<colKey>`	string	Cell value for that column. Keys must match column keys defined by columnLabel (or implied by first data row if columnLabel is missing).

JSON Format

A JSON string containing an array of row objects:

[
  {
    "reserved_type": "columnLabel",
    "Serial Number": "Serial Number",
    "Product": "Product",
    "Install Date": "Install Date",
    "Last Upload Time": "Last Upload Time",
    "Equipment Group": "Equipment Group"
  },
  {
    "reserved_type": "textcolor",
    "Serial Number": "#111111",
    "Product": "#111111",
    "Install Date": "#111111",
    "Last Upload Time": "#111111",
    "Equipment Group": "#111111"
  },
  {
    "reserved_type": "textColumnHeaderColor",
    "Serial Number": "#0066CC",
    "Product": "#0066CC",
    "Install Date": "#FF6600",
    "Last Upload Time": "#FF6600",
    "Equipment Group": "#009900"
  },
  {
    "reserved_type": "textAlignment",
    "Serial Number": "left",
    "Product": "left",
    "Install Date": "right",
    "Last Upload Time": "center",
    "Equipment Group": "right"
  },
  {
    "reserved_type": "desktopLayoutHint",
    "Serial Number": "0.333",
    "Product": "0.333",
    "Install Date": "0.333",
    "Last Upload Time": "0.5",
    "Equipment Group": "0.5"
  },
  {
    "reserved_type": "mobileLayoutHint",
    "Serial Number": "1",
    "Product": "0.5",
    "Install Date": "0.5",
    "Last Upload Time": "0.4",
    "Equipment Group": "0.6"
  },
  {
    "reserved_type": "mobileFontSize",
    "Serial Number": "12",
    "Product": "12",
    "Install Date": "12",
    "Last Upload Time": "12",
    "Equipment Group": "12"
  },
  {
    "reserved_type": "data",
    "Serial Number": "17034EL-002",
    "Product": "SafeCore Module",
    "Install Date": "",
    "Last Upload Time": "01/06/2023 06:35 AM",
    "Equipment Group": "Turnaround Pool"
  },
  {
    "Serial Number": "18045EL-003",
    "Product": "Control Unit",
    "Install Date": "12/15/2022",
    "Last Upload Time": "01/06/2023 08:20 AM",
    "Equipment Group": "Primary Operations"
  }
]

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	Client ID	Company Name	Industry	Contract Value	Account Status
columnLabel	Client ID	Company Name	Industry	Contract Value	Account Status
textcolor	#666666	#000000	#0066CC	#2E7D32	#FF6600
textAlignment	left	left	left	right	center
desktopLayoutHint	0.15	0.3	0.2	0.2	0.15
mobileLayoutHint	0.5	1	0.8	0.7	0.6
mobileFontSize	12	12	12	12	12
data	CL001	TechStart Solutions	Software	$125,000	Active
data	CL002	MedCore Systems	Healthcare	$89,500	Active
data	CL003	RetailMax Inc	E-commerce	$156,000	Renewal Due

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

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
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

Scrolling Behavior

Wheel-Only Scrolling: Scrolling active when cursor is inside table rect
No Drag Scrolling: Only mouse wheel scrolling is supported
Conditional Scrollbar: Scrollbar appears only when content overflows

Icon Support

The table supports displaying icons from CDN URLs next to text in data rows, providing visual indicators for status, categories, and priorities.

Icon Column Format

Icons are added using a special column naming convention with the _icon_ prefix:

_icon_columnName

For example, to add icons to a status column, create an _icon_status column with CDN URLs:

{
  "status": "Active",
  "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/check-circle.svg",
  "priority": "High",
  "_icon_priority": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/arrow-up.svg"
}

Icon Behavior:

_icon_ columns are hidden and don’t appear as separate visible columns
Icons only display in data rows, not in headers
Icon appears 5px to the left of the text
Icon size automatically matches the font size of the row
Icons and text move together based on the column’s textAlignment setting
Supports SVG, PNG, JPG, GIF, and WebP formats
Invalid URLs are gracefully handled (icon hidden on error)

Supported Icon Sources:

CDN URLs (jsDelivr, Unpkg, Cloudflare, etc.)
Direct image URLs
SVG format recommended for best quality

When to Use Icons:

Status indicators (active, pending, complete)
Priority levels (high, medium, low)
Category identification (device types, departments)
Visual data emphasis

Vertical Padding

Vertical padding adds spacing below text in data rows only, while keeping headers compact. This improves readability and creates better visual hierarchy.

Configuration Format

{
  "reserved_type": "desktopVerticalPadding",
  "columnName1": "12",
  "columnName2": "8",
  "columnName3": "10"
}
{
  "reserved_type": "mobileVerticalPadding",
  "columnName1": "10",
  "columnName2": "6",
  "columnName3": "8"
}

Configuration Details:

Set padding value in pixels for each column (e.g., “8”, “12”, “16”)
Padding is applied below the text (e.g., “12” = 12px below text)
Use desktopVerticalPadding for desktop views
Use mobileVerticalPadding for mobile views
Padding only affects data rows, not headers
When columns wrap to multiple lines, the maximum padding from each line is used
Defaults to 0 if not specified

When to Use:

Add spacing between rows for better readability
Improve visual separation of data on dense tables
Create breathing room on mobile devices
Enhance accessibility for better content scanning

Horizontal Padding

Horizontal padding adds spacing to the right side of each column, affecting both headers and data rows. This gives you precise control over column spacing.

Configuration Format

{
  "reserved_type": "desktopHorizontalPadding",
  "columnName1": "12",
  "columnName2": "8",
  "columnName3": "0"
}
{
  "reserved_type": "mobileHorizontalPadding",
  "columnName1": "10",
  "columnName2": "6",
  "columnName3": "0"
}

Configuration Details:

Set padding value in pixels for each column (e.g., “0”, “8”, “12”, “16”)
Use desktopHorizontalPadding for desktop views
Use mobileHorizontalPadding for mobile views
Padding is applied to the right edge of each column
When horizontal padding is used, column gaps are automatically set to 0
Defaults to 0 if not specified

When to Use:

Control precise spacing between columns
Create custom column layouts
Improve visual separation of data

Hide Row Separators

By default, tables display horizontal separator lines between rows. You can hide these separators for a cleaner appearance.

Configuration Format

{
  "reserved_type": "hideRowSeparators"
}

Notes:

Simply add this reserved_type object to your dataset
No additional properties needed (presence of this object enables the feature)
Useful for cleaner table appearance when vertical padding provides enough visual separation

Color Configuration

The table supports a flexible color hierarchy for maximum customization:

Header Text Colors:
- Primary: textColumnHeaderColor (if specified)
- Fallback: textcolor (if specified)
- Default: Scene text color
Body Text Colors:
- Primary: textcolor (if specified)
- Default: Scene text color

Valid Color Formats:

Hex codes: #FF0000, #0066CC
CSS color names: red, blue, green
RGB values: rgb(255, 0, 0)

Per-Column Customization:

Each column can have its own header and body text colors
Colors are specified in reserved rows by column key

Required Configuration

Data Rows: At least one data row (with or without reserved_type: "data")

Optional Configuration Rows

All reserved row types are optional with intelligent defaults:

Configuration	Default Behavior
`columnLabel`	Uses first data row keys in object order
`textcolor`	Uses scene text color
`textColumnHeaderColor`	Falls back to `textcolor`, then scene color
`textAlignment`	Left alignment for all columns
`desktopLayoutHint`	Equal width distribution
`mobileLayoutHint`	Same as desktop layout
`mobileFontSize`	Automatic font size calculation
`desktopVerticalPadding`	No padding (0px)
`mobileVerticalPadding`	No padding (0px)
`desktopHorizontalPadding`	No padding (0px)
`mobileHorizontalPadding`	No padding (0px)
`hideRowSeparators`	Row separators shown
`_icon_<columnName>` columns	No icons displayed

Example Usage

Example 1: Minimal Configuration

The simplest table requires only data rows:

[
  {
    "reserved_type": "data",
    "Client ID": "CL001",
    "Company Name": "TechStart Solutions",
    "Industry": "Software",
    "Contract Value": "$125,000",
    "Account Status": "Active"
  }
]

Example 2: Table with Icons

Add icons to enhance data visualization:

[
  {
    "reserved_type": "columnLabel",
    "status": "Status",
    "name": "Name",
    "priority": "Priority"
  },
  {
    "reserved_type": "textAlignment",
    "status": "left",
    "name": "left",
    "priority": "center"
  },
  {
    "status": "Active",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/check-circle.svg",
    "name": "Task One",
    "priority": "High",
    "_icon_priority": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/arrow-up.svg"
  },
  {
    "status": "Pending",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/clock.svg",
    "name": "Task Two",
    "priority": "Medium",
    "_icon_priority": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/minus.svg"
  },
  {
    "status": "Complete",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/check.svg",
    "name": "Task Three",
    "priority": "Low",
    "_icon_priority": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/arrow-down.svg"
  }
]

Example 3: Table with Vertical Padding

Add spacing to data rows for better readability:

[
  {
    "reserved_type": "columnLabel",
    "product": "Product Name",
    "category": "Category",
    "price": "Price"
  },
  {
    "reserved_type": "desktopLayoutHint",
    "product": "0.5",
    "category": "0.3",
    "price": "0.2"
  },
  {
    "reserved_type": "desktopVerticalPadding",
    "product": "12",
    "category": "12",
    "price": "12"
  },
  {
    "reserved_type": "mobileVerticalPadding",
    "product": "10",
    "category": "10",
    "price": "10"
  },
  {
    "product": "Wireless Headphones",
    "category": "Electronics",
    "price": "$149.99"
  },
  {
    "product": "Coffee Maker",
    "category": "Appliances",
    "price": "$79.99"
  }
]

Example 4: Table with Horizontal Padding

Control column spacing with horizontal padding:

[
  {
    "reserved_type": "columnLabel",
    "product": "Product",
    "price": "Price",
    "quantity": "Qty"
  },
  {
    "reserved_type": "desktopLayoutHint",
    "product": "0.5",
    "price": "0.3",
    "quantity": "0.2"
  },
  {
    "reserved_type": "desktopHorizontalPadding",
    "product": "20",
    "price": "15",
    "quantity": "0"
  },
  {
    "product": "Widget A",
    "price": "$29.99",
    "quantity": "5"
  },
  {
    "product": "Widget B",
    "price": "$49.99",
    "quantity": "3"
  }
]

Example 5: Table with Hidden Row Separators

Create a cleaner look by hiding separator lines:

[
  {
    "reserved_type": "columnLabel",
    "name": "Employee",
    "department": "Department",
    "salary": "Salary"
  },
  {
    "reserved_type": "hideRowSeparators"
  },
  {
    "reserved_type": "desktopVerticalPadding",
    "name": "10",
    "department": "10",
    "salary": "10"
  },
  {
    "name": "Alice Johnson",
    "department": "Engineering",
    "salary": "$120,000"
  },
  {
    "name": "Bob Smith",
    "department": "Marketing",
    "salary": "$95,000"
  }
]

Example 6: Full Configuration with All Features

Comprehensive example demonstrating all available features:

[
  {
    "reserved_type": "columnLabel",
    "status": "Status",
    "product": "Product Name",
    "category": "Category",
    "price": "Price",
    "stock": "Stock"
  },
  {
    "reserved_type": "textcolor",
    "status": "#2c3e50",
    "product": "#2c3e50",
    "category": "#34495e",
    "price": "#27ae60",
    "stock": "#e67e22"
  },
  {
    "reserved_type": "textColumnHeaderColor",
    "status": "#1a1a1a",
    "product": "#1a1a1a",
    "category": "#1a1a1a",
    "price": "#1a1a1a",
    "stock": "#1a1a1a"
  },
  {
    "reserved_type": "textAlignment",
    "status": "center",
    "product": "left",
    "category": "left",
    "price": "right",
    "stock": "center"
  },
  {
    "reserved_type": "desktopLayoutHint",
    "status": "0.15",
    "product": "0.35",
    "category": "0.2",
    "price": "0.15",
    "stock": "0.15"
  },
  {
    "reserved_type": "mobileLayoutHint",
    "status": "0.3",
    "product": "0.5",
    "category": "0.5",
    "price": "0.35",
    "stock": "0.35"
  },
  {
    "reserved_type": "mobileFontSize",
    "status": "12",
    "product": "13",
    "category": "12",
    "price": "13",
    "stock": "12"
  },
  {
    "reserved_type": "desktopVerticalPadding",
    "status": "8",
    "product": "12",
    "category": "8",
    "price": "10",
    "stock": "8"
  },
  {
    "reserved_type": "mobileVerticalPadding",
    "status": "6",
    "product": "10",
    "category": "6",
    "price": "10",
    "stock": "8"
  },
  {
    "reserved_type": "desktopHorizontalPadding",
    "status": "10",
    "product": "15",
    "category": "12",
    "price": "10",
    "stock": "0"
  },
  {
    "reserved_type": "hideRowSeparators"
  },
  {
    "status": "Available",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/check-circle.svg",
    "product": "Wireless Headphones",
    "category": "Electronics",
    "price": "$149.99",
    "stock": "45"
  },
  {
    "status": "Low Stock",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/exclamation-triangle.svg",
    "product": "Coffee Maker Pro",
    "category": "Appliances",
    "price": "$89.99",
    "stock": "12"
  },
  {
    "status": "Out of Stock",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/x-circle.svg",
    "product": "Yoga Mat",
    "category": "Fitness",
    "price": "$29.99",
    "stock": "0"
  },
  {
    "status": "Available",
    "_icon_status": "https://cdn.jsdelivr.net/npm/heroicons@2.0.18/24/solid/check-circle.svg",
    "product": "Desk Lamp",
    "category": "Office",
    "price": "$45.00",
    "stock": "89"
  }
]

Best Practices

Use consistent column names across all configuration and data rows
Keep column names descriptive and concise
Use SVG format for icons for best rendering quality
Start with vertical padding values of 8-12 pixels for improved readability
Test your table on both desktop and mobile viewports
Use hideRowSeparators with vertical padding for clean, modern designs
Provide meaningful header labels via columnLabel reserved type
Use reliable CDN services for icon URLs (jsDelivr, Unpkg)

Compatibility: Works with <rect> elements only

Interactive Table Visualization with lc_table_*

What’s New

Quick Start Tips

Table Data Structure

Reserved Row Types

Data Row Format

JSON Format

Dataset/CSV Format

Implementation Steps for Dataset Usage

Scrolling Behavior

Icon Support

Icon Column Format

Vertical Padding

Configuration Format

Horizontal Padding

Configuration Format

Hide Row Separators

Configuration Format

Color Configuration

Required Configuration

Optional Configuration Rows

Example Usage

Example 1: Minimal Configuration

Example 2: Table with Icons

Example 3: Table with Vertical Padding

Example 4: Table with Horizontal Padding

Example 5: Table with Hidden Row Separators

Example 6: Full Configuration with All Features

Best Practices

Interactive Table Visualization with `lc_table_*`