Detail

Overview

The Detail component can be used to display the data about a certain record from a table. The component inherits the structure of the table so there's no need to configure the fields manually. At the same time, you can use it as a Form by making the fields editable.

Properties

Name	Type	Description
name	string	Component name
value	value	Key-value object with the component’s data
valid	boolean	Indicates if the component is valid
validating	boolean	Indicates if the component is validating

Methods

Name	Parameters	Returns	Description
setValue	data: object	void	Set component data. Data is an object with arbitrary structure
reset	–	void	Reset the component to its initial value
openEditing	–	void	Enable editing mode on detail
cancelEditing	–	void	Dismiss editing data and close editing mode
resetValidation	–	void	Clear validation errors
setErrors	errors: { [key: string]: string } | null	void	Mark the component as invalid and display errors
submit	–	void	Trigger submit event. Submits the data and exits editing mode if active

Triggers

Name	Description
On Init	Triggered when the component is initialized
On Submit	Triggered when component data is submitted
On Change	Triggered when the component's state changes
On Custom Button Click	Triggered when the custom button is clicked
On Click	Triggered when the component is clicked

Working with the component

In UI Bakery, you can link components to share data and state between them. One of the most common cases is displaying the data from the selected table record in the Detail component. Take a look at the article below to learn how to do that👇

Linking a Table to a Form/Detail