Key-Value Table

The Key-Value Table component displays structured information as manually configured key-value pairs with advanced styling options for each table element.

Configuration

Use the Configure button to open the entries dialog for adding, editing, and managing key-value pairs.

Control table layout and appearance through row styling options:

Option	Description
Key Field Width / Divider Field Width	Set column widths for keys and divider
Single Row Height	Control height of individual table rows
Divider Text	Optional text separator between key and value columns
Odd/Even Row Background	Set alternating background colors for rows
Row Gap / Cell Gap	Control spacing between rows and cells
Border	Configure table borders with collapse options

Apply styling to different table elements using separate styling tabs (Common, Keys, Values, Divider, Frame). Each tab includes typography, colors, spacing, and border options.

Manage individual key-value pairs through the Configure dialog:

Option	Description
Key	Label text for the row - supports text templates
Value	Content text for the row - supports text templates
Hide Condition	Conditional logic to show/hide specific rows
Additional CSS	Custom CSS styling for individual key or value cells

Use Cases

• Customer profiles - display essential customer information (ID, name, email, status) in support reports
• Invoice metadata - show invoice details (number, date, amount, status) at the top of financial documents
• Project summaries - present key project information (name, manager, deadline, budget) in status reports
• Product specifications - list technical details or features in a structured format

Tips

• Use Configure button to add, copy, and remove key-value entries
• Apply Hide Condition to show rows conditionally based on data values
• Set alternating row backgrounds for better readability in long tables
• Use separate styling tabs to emphasize keys differently from values
• Ensure border settings don't conflict between row, column, and outer borders