Display key-value pairs

Learn how to display data in key-value pairs.

Key Value components display key-value data and are often used to display data sourced from other components. For example, it's common to configure a Key Value component to display detailed information from a selected row in a table. Try out the app below for an example.

Display key-value pairs

Retool seeds Key Value components with demo data when you add them to the canvas. You can also set the component's Data to any JavaScript object. This includes query results, table data, or JSON data.

Edit properties and appearance

After you pass data to the Key Value component, Retool infers properties and their formats. These properties are initially listed in the Dynamic section, and you can save properties to customize and reorder them. You can also hide properties, configure their format, change their labels, and more.

There are also several appearance settings to choose from. You can change the label position, group layout, height, etc.