Skip to content

Key-Value Table

Displays structured information as manually configured key-value pairs with advanced styling options for each table element.

Table components · element type key-value-grid · binds through text templates per row

Related: Data Table · Custom Table

Options

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 Default Description
Key Width From theme Width of the key column
Divider Width From theme Width of the divider column
Single Row Height From theme Height of one row
Divider Text Empty Text placed between the key and the value, for example a colon
Odd Row Background / Even Row Background From theme Alternating row colours
Row Gap / Cell Gap From theme Space between rows, and between cells within a row
Border From theme Table borders

The Key-Value Styling section styles the parts of the table separately — a Styling for selector picks which part you are editing, and each has its own typography, alignment, colour and spacing.

Manage individual key-value pairs through the Configure dialog:

Option Default Description
Key Empty The label for the row. Supports text templates
Value Empty The content for the row. Supports text templates
Elements Empty Places components in the row instead of plain text, for values that need more than text
Hide Condition Empty An expression that hides the row when it evaluates true — useful for optional fields
Additional CSS Empty Custom CSS for that individual key or value cell

Notes

  • Use Configure button to add, copy, and remove key-value entries
  • Drag the handle at the start of a row to reorder 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