Key-Value Table
The Key-Value Table element displays structured label-value pairs in a clean two-column table layout. Use it for product specs, profile details, technique breakdowns, or any structured data.
Overview
Key-Value Tables present information in a scannable format with labels on the left and values on the right:
| Label | Value |
|---|---|
| Style | Muay Thai |
| Origin | Thailand |
| Difficulty | Advanced |
Adding a Key-Value Table
- Open the Website Builder
- Find Key-Value Table in the Elements panel (under Display)
- Drag it onto your page
- Configure data rows in the General Tab
Properties
General Tab
Data Source
| Option | Description |
|---|---|
| Static | Define rows manually in the builder |
| From Element | Pull data from another element (e.g., JSON Data Source) |
Static Data Rows
Add label-value pairs directly:
- Click Add Row to add a new pair
- Enter the Label (left column) and Value (right column)
- Click the X button to remove a row
Element Data Source
When using "From Element":
| Property | Description |
|---|---|
| Source Element ID | The ID of the source element (e.g., a JSON Data Source) |
| Key Field | The field name to use as the label (e.g., label) |
| Value Field | The field name to use as the value (e.g., value) |
If the source provides a plain object (not an array), the object's keys become labels and values become display values automatically.
Display Settings
| Property | Description | Default |
|---|---|---|
| Columns | 1 (single table) or 2 (side-by-side tables) | 1 |
| Label Width (%) | Width percentage of the label column (10-80) | 40 |
| Striped Rows | Alternate row backgrounds for readability | On |
| Show Border | Bottom border on each row | On |
Color Tab
| Property | Description | Default |
|---|---|---|
| Background Color | Container background | Transparent |
| Border Color | Container border | Transparent |
Dimensions Tab
| Property | Description |
|---|---|
| Width | Element width |
| Height | Element height (auto by default) |
| Padding | Inner spacing |
| Margin | Outer spacing |
| Border Radius | Corner rounding |
Use Cases
Product Specifications
Display technical details for products or items.
User Profile Details
Show user information in a structured format.
Technique Breakdown
Present technique attributes like style, difficulty, and category.
Settings Summary
Display configuration values in a readable format.
Best Practices
Keep labels short - Use concise, descriptive labels
Use 2-column layout for many rows - Split long tables side-by-side for better use of space
Enable striped rows - Improves readability for tables with many rows
Adjust label width - If labels are short, reduce width to give more space to values
Questions?
If you have any questions, please don't hesitate to contact us. Alternatively, you can submit an issue on this platform.
Useful Links:
Web Elements - https://help.acenji.com/#/./create-web-application/elements/index