# Build UI

Components are prebuilt UI elements your users engage in, such as `Tables`, `Forms`, `Buttons`. In this example, only a limited number of components are used; you can explore 50+ Components in the UI Component Library. Drag-and-drop components within **Layout** `Columns`, `Tabs`, and `Modals`, facilitating the building of your app.

You'll be building an app that enables the creation and updating of **Deals** data. To enable this functionality, you'll add `Table`, `Forms`, and `Modals`. Learn more about [Jet UI Concept](https://docs.jetadmin.io/user-guide/core-concept/jet-ui) in our documentation. Additionally, if you want to implement this functionality swiftly (Create, Update, Delete flow), you can generate it in seconds using [Page Templates](https://docs.jetadmin.io/getting-started/ui-in-seconds).

### 1. Set the Layout

`Columns` are used to set the horizontal component of the layout. You can add multiple columns and resize them. 

{% @arcade/embed flowId="qqlSdR0LVUOSNZRMPOO4" url="<https://app.arcade.software/share/qqlSdR0LVUOSNZRMPOO4>" %}

### 2. Display Deals

When you select the **Table** component, the right panel automatically updates to display the properties of the component. Components come with a wide range of properties that you can configure. Properties are accessible from other components and queries, allowing for a more integrated and dynamic user interface experience.&#x20;

Click **Data Source** – **Jet Tables** and the **Deals** collection that you've created.

{% @arcade/embed flowId="jU26kc5IVQRR4HeOLBMj" url="<https://app.arcade.software/share/jU26kc5IVQRR4HeOLBMj>" %}

Modify the **Logo** column to have a circular frame and position it as the first column.

{% @arcade/embed flowId="2SmD0N6RcbanMEkUyAed" url="<https://app.arcade.software/share/2SmD0N6RcbanMEkUyAed>" %}

### 3. Bind your components

**Component Binding** allows the passing of values between components. In this case, we will bind the `Table` and `Filter` components, enabling users to filter Deals by criteria such as `Name`, `Priority`, and `Amount`.

{% @arcade/embed flowId="WeYMccrK3MnPjQeVxhCk" url="<https://app.arcade.software/share/WeYMccrK3MnPjQeVxhCk>" %}

### 4. Update Deal with a Form component <a href="#id-3-add-user-management-options-with-a-split-button-component" id="id-3-add-user-management-options-with-a-split-button-component"></a>

The final component to add is a Form component. This component will allow you to generate [Forms](https://docs.jetadmin.io/user-guide/design-and-structure/components/form) automatically based on your Collections fields.

{% @arcade/embed flowId="CSycxxwLOkyFXhQrqax6" url="<https://app.arcade.software/share/CSycxxwLOkyFXhQrqax6>" %}

Every field in the Form is individually configurable: you can add or remove fields from the Form, alter the field type, rearrange the order of the fields, and change appearance.

{% @arcade/embed flowId="mEmk4at1wRPLQJIEsc7p" url="<https://app.arcade.software/share/mEmk4at1wRPLQJIEsc7p>" %}

To update a deal, the user must select the corresponding row in the Table. You can configure the first row to be selected by default in a `Table`. To do this, go to the Display tab in the `Table` properties and choose **Select the first row by default.**

{% @arcade/embed flowId="A9bZJki3hDolQGhFqDZu" url="<https://app.arcade.software/share/A9bZJki3hDolQGhFqDZu>" %}

{% content-ref url="run-actions" %}
[run-actions](https://docs.jetadmin.io/getting-started/quickstart/run-actions)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.jetadmin.io/getting-started/quickstart/set-the-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.