# Components

## Table Editing <a href="#h_d8d3738d09" id="h_d8d3738d09"></a>

Enable users to edit records simply by clicking on a cell in a table. You can even specify which fields you want to make editable. Add table editing to your app for a smoother, intuitive user experience.

To make a field editable, follow the steps:

1. Click on the **Table**
2. Go to the `Display` Tab
3. Go to the `Editable` Tab
4. Click on the **Settings** icon
5. Make Email **Non-editable**

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

## Tooltips <a href="#h_af590998f2" id="h_af590998f2"></a>

Add tooltips to your app components to help new users! Custom tooltips are an unobtrusive way to provide necessary information about how your app functions.

Let's add a tooltip for the button. Follow the steps,

1. Click on the `Button`
2. Go to the Display Tab
3. Scroll down to the Tooltip Section
4. Specify the tooltip

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

## *On Change* Field Action <a href="#h_2a04e1f31b" id="h_2a04e1f31b"></a>

Set actions that trigger when a field is updated. This can be great for showing notifications, for quickly setting variables used elsewhere in your app, and for other things as needed.

1. Click on the **Text Field**
2. Go to the `Actions` Tab
3. Click on the `Value Changes`
4. Choose `Show Notification`
5. Specify the `Title` by using **Formula**
6. Set it to the `Value`

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

## Setting the Layout

**Layout** components allow you to assemble other components on the page. We recommend starting with the `columns` component - just drag and drop it on the page. Let's create one together.

Follow the steps:

1. Drag and Drop **Columns** to the Page
2. Add a **Container** to each of the Column
3. Add a **Column** to the First Column
4. Add **Tabs** to the second Container

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

### Adding Components

You can add any component by simply dragging and dropping it onto the page. Let's add the Table and Details component to the Layout. Follow the steps:

1. Drag and Drop the **`Table`** component to the first Container
2. Go to the **All Components**
3. Scroll down to the **Forms Section**
4. Drag and Drop the **`Details`** component to the second Container

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

### Configuring Components

Different components have different settings, which you can access on the right of the window after clicking on the component once. Depending on the component, the menu will have the tabs **General**, **Display**, and **Actions.**

**General:** Contains options for configuring the way the component works. For example: which fields should be included in a table or which datasets to use in a chart.

**Display:** Has display options. For example, **Conditional Visibility**, **Tooltips**, **Component Titles**, **Enable Editing** for tables, and whether a field is **Required**.&#x20;

**Actions:** Contains settings for triggering actions based on user interaction with the component. For example: Triggering actions when the button is clicked, and triggering actions when data is changed.

To see the tabs:

1. Click on the Component

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

{% hint style="success" %}
Look at this quick overview of the most commonly used components:
{% endhint %}

### Lists

Lists are UI components used for displaying your collections. You can display your data as `Table`, `Kanban`, `Map`, `Calendar`, `Gallery`, and `Timeline`.

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiQnmmt5o602X4KCK5M%2F-MiR8pe9tJAsYA9KVUzq%2Fimage.png?alt=media\&token=8241c8d3-e362-4c9f-ab8d-347b5c0cd343)

{% content-ref url="components/lists" %}
[lists](https://docs.jetadmin.io/user-guide/design-and-structure/components/lists)
{% endcontent-ref %}

### Charts

`Charts` let you display your data in several ways: **line**, **bar**, **pie,** **doughnut**, and **single value**.

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiRiVAvn3Bg4Rkbi-cN%2F-MiRkMdO69XFMWxMUmCE%2Fimage.png?alt=media\&token=e9e0d20f-c2b2-454c-a090-e265667f60e1)

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-MiQnmmt5o602X4KCK5M%2F-MiRBfNPlLIbyMuGZeui%2Fimage.png?alt=media\&token=9af9d57b-36fc-4d91-9001-3460f5eba612)

{% content-ref url="components/charts" %}
[charts](https://docs.jetadmin.io/user-guide/design-and-structure/components/charts)
{% endcontent-ref %}

### Text

To set descriptions, you can set different static text elements:

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-Mjhxq7-5mUfqTQL6bix%2F-MjhybPQLL_0uSTDCmSU%2Fimage.png?alt=media\&token=9a9d949e-f6c5-415f-a9d8-8e5e4537b142)

{% content-ref url="components/text" %}
[text](https://docs.jetadmin.io/user-guide/design-and-structure/components/text)
{% endcontent-ref %}

### Media & Files

You can use images, files, and videos in Jet Admin. Just drag and drop the right component and configure it.&#x20;

For adding Media & File Components, follow the steps:

1. Drag and Drop the Image Picker Component on the page
2. Drag and Drop the File Picker Component on the page
3. Drag and Drop the Video Picker Component on the page
4. Drag and Drop the Audio Picker Component on the page

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

### Buttons

Buttons are used to execute actions. For example, you can create buttons to execute: Copy to a clipboard, Send an email, Open a link, Link to a page, and others.

![](https://3448227606-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LQ08RFAKZvFADEiXKFy%2F-Mjhxq7-5mUfqTQL6bix%2F-MjhzYpjUmIAVyMaCuAu%2Fimage.png?alt=media\&token=258f3a67-10d3-4959-835d-fa3e136188f1)

{% content-ref url="components/buttons" %}
[buttons](https://docs.jetadmin.io/user-guide/design-and-structure/components/buttons)
{% endcontent-ref %}

### Forms

Forms are the UI elements that are used to receive or display single values. They can be set as editable or non-editable.

{% content-ref url="components/form" %}
[form](https://docs.jetadmin.io/user-guide/design-and-structure/components/form)
{% endcontent-ref %}

### Custom component

It is a Component based on React, Angular, or any other framework and integrates it into the Jet Admin interface.

{% content-ref url="components/custom-component" %}
[custom-component](https://docs.jetadmin.io/user-guide/design-and-structure/components/custom-component)
{% endcontent-ref %}