# 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.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FLrxWwAjdbzHPaIn6V50B%2FCleanShot%202025-07-28%20at%2013.32.38%402x-min.png?alt=media&#x26;token=348f6a2b-72a3-4e5d-8a2e-1c4ea1ad81b3" alt=""><figcaption></figcaption></figure>

### Properties

<table><thead><tr><th width="122.59765625">Name</th><th width="117.05078125">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td>Component name</td></tr><tr><td><code>value</code></td><td><code>value</code></td><td>Key-value object with the component’s data</td></tr><tr><td><code>valid</code></td><td><code>boolean</code></td><td>Indicates if the component is valid</td></tr><tr><td><code>validating</code></td><td><code>boolean</code></td><td>Indicates if the component is validating</td></tr></tbody></table>

### Methods

<table><thead><tr><th width="166.80859375">Name</th><th width="182.21875">Parameters</th><th width="101.90625">Returns</th><th>Description</th></tr></thead><tbody><tr><td><code>setValue</code></td><td><code>data: object</code></td><td><code>void</code></td><td>Set component data.<br>Data is an object with arbitrary structure</td></tr><tr><td><code>reset</code></td><td>–</td><td><code>void</code></td><td>Reset the component to its initial value</td></tr><tr><td><code>openEditing</code></td><td>–</td><td><code>void</code></td><td>Enable editing mode on detail</td></tr><tr><td><code>cancelEditing</code></td><td>–</td><td><code>void</code></td><td>Dismiss editing data and close editing mode</td></tr><tr><td><code>resetValidation</code></td><td>–</td><td><code>void</code></td><td>Clear validation errors</td></tr><tr><td><code>setErrors</code></td><td><p><code>errors: { [key:</code> </p><p><code>string]: string } |</code></p><p> <code>null</code></p></td><td><code>void</code></td><td>Mark the component as invalid and display errors</td></tr><tr><td><code>submit</code></td><td>–</td><td><code>void</code></td><td>Trigger submit event. Submits the data and exits editing mode if active</td></tr></tbody></table>

### Triggers

<table><thead><tr><th width="213.984375">Name</th><th>Description</th></tr></thead><tbody><tr><td><strong>On Init</strong></td><td>Triggered when the component is initialized</td></tr><tr><td><strong>On Submit</strong></td><td>Triggered when component data is submitted</td></tr><tr><td><strong>On Change</strong></td><td>Triggered when the component's state changes</td></tr><tr><td><strong>On Custom Button Click</strong></td><td>Triggered when the custom button is clicked</td></tr><tr><td><strong>On Custom Button Double Click</strong></td><td>Triggered when the custom button is double-clicked</td></tr><tr><td><strong>On Click</strong></td><td>Triggered when the component is clicked</td></tr><tr><td><strong>On Double Click</strong></td><td>Triggered when the component is double-clicked</td></tr></tbody></table>

## 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:point\_down:

{% content-ref url="../../concepts/components/work-with-components/linking-components" %}
[linking-components](https://docs.uibakery.io/concepts/components/work-with-components/linking-components)
{% endcontent-ref %}