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.


Use Cases

  • Equipment inventory and asset management tables
  • Customer data and contact lists
  • Financial reports and accounting data
  • Project status and task tracking
  • Performance metrics and KPI dashboards
  • Product catalogs and specifications
  • User activity logs and audit trails
  • Sales pipeline and opportunity tracking

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:

  1. Reserved Rows: Configure header labels, colors, alignment, layout, and font sizes
  2. 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.

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

Color Configuration

The table supports a flexible color hierarchy for maximum customization:

  1. Header Text Colors:

    • Primary: textColumnHeaderColor (if specified)
    • Fallback: textcolor (if specified)
    • Default: Scene text color

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

Example Usage

Minimal Configuration:

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

Full Configuration:

[
  {
    "reserved_type": "columnLabel",
    "Client ID": "Client ID",
    "Company Name": "Company Name",
    "Industry": "Industry",
    "Contract Value": "Contract Value",
    "Account Status": "Account Status"
  },
  {
    "reserved_type": "textcolor",
    "Client ID": "#666666",
    "Company Name": "#000000",
    "Industry": "#0066CC",
    "Contract Value": "#2E7D32",
    "Account Status": "#FF6600"
  },
  {
    "reserved_type": "textAlignment",
    "Client ID": "left",
    "Company Name": "left",
    "Industry": "left",
    "Contract Value": "right",
    "Account Status": "center"
  },
  {
    "reserved_type": "desktopLayoutHint",
    "Client ID": "0.15",
    "Company Name": "0.3",
    "Industry": "0.2",
    "Contract Value": "0.2",
    "Account Status": "0.15"
  },
  {
    "reserved_type": "mobileLayoutHint",
    "Client ID": "0.5",
    "Company Name": "1",
    "Industry": "0.8",
    "Contract Value": "0.7",
    "Account Status": "0.6"
  },
  {
    "reserved_type": "data",
    "Client ID": "CL001",
    "Company Name": "TechStart Solutions",
    "Industry": "Software",
    "Contract Value": "$125,000",
    "Account Status": "Active"
  },
  {
    "reserved_type": "data",
    "Client ID": "CL002",
    "Company Name": "MedCore Systems",
    "Industry": "Healthcare",
    "Contract Value": "$89,500",
    "Account Status": "Active"
  },
  {
    "reserved_type": "data",
    "Client ID": "CL003",
    "Company Name": "RetailMax Inc",
    "Industry": "E-commerce",
    "Contract Value": "$156,000",
    "Account Status": "Renewal Due"
  },
  {
    "reserved_type": "data",
    "Client ID": "CL004",
    "Company Name": "FinanceFirst Bank",
    "Industry": "Financial",
    "Contract Value": "$245,000",
    "Account Status": "Active"
  }
]

Compatibility: Works with <rect> elements only