# Controlling component's visibility

{% hint style="success" %}
Here, we talk about the [Table](https://docs.uibakery.io/reference/working-with-components/table) component as an example, but the guide applies to all available components.
{% endhint %}

We've previously touched upon configuring component visibility using the *Show condition* setting [here](https://docs.uibakery.io/concepts/components-basics#show-hide-components). Check it out if you need a reminder and come back to learn about the two main configurations of this setting:

* [Preserve space when hidden](#preserve-space-when-hidden)
* [Hide mode](#hide-mode)

Just a quick recap how this setting works: basically setting it to `false` hides the component, while setting it to `true` displays it.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FjadBSEMRrA92VDvnUtT5%2FCleanShot%202024-12-11%20at%2013.26.10%402x-min.png?alt=media&#x26;token=0402f0b9-2c26-4950-914b-fa92e8e0cfff" alt=""><figcaption></figcaption></figure>

Now let's dive into its configurations :point\_down:

## Preserve space when hidden

By default, hidden components do not occupy space on the canvas. However, if you want to you can **preserve their space when hidden** by enabling the corresponding setting for a specific component.&#x20;

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FYMEHwZJfoiOAmESYLkDT%2FCleanShot%202024-12-11%20at%2013.52.17%402x-min.png?alt=media&#x26;token=841515e9-ea5d-4bcf-9716-87e3e7d22c01" alt=""><figcaption></figcaption></figure>

In this case, a component's layout will remain intact regardless of its visibility. This ensures that components maintain their fixed positioning, whether they are visible or hidden.

Check the screen below: the *Preserve space when hidden* setting is **disabled** for a `table` component and **enabled** for a `table2` component.

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FUBq1ymWBJsW96B3RTt6Q%2FCleanShot%202024-12-11%20at%2014.06.07%402x-min.png?alt=media&#x26;token=3df8ce78-e908-4216-8115-7d10f73f7dcc" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %} <mark style="color:orange;">**Breaking changes**</mark>

If you are using component visibility to switch which component is visible **in the same place** or if you have components that **occupy the same location** in the layout, you must pay attention to their position after the *layout v2* *upgrade* as they may be broken.

If something does break after the update, there is no need to worry since end-users are not affected. However, you will need to manually reconfigure the layouts where something went wrong.
{% endhint %}

## Hide Mode

<figure><img src="https://837703843-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUX6zPRMFFK0yrTghj7cY%2Fuploads%2FRnuABbquiSJs8Z56DRxA%2FCleanShot%202024-12-11%20at%2014.32.33%402x-min.png?alt=media&#x26;token=b5ebf967-3bb0-4334-b35f-ffaab982ad27" alt=""><figcaption></figcaption></figure>

### **Hidden**

*Hidden* is the default value for the Hide mode. When this value is selected, a component is always rendered during page initialization. Even if a component is inside another component which renders children dynamically, it will still be rendered on *page initialization,* and the `On Init` trigger will be activated.

{% hint style="info" %}
For example, if you place a *Table* inside a *Modal*, this component will be rendered during page initialization and the `On Init` trigger will be activated.
{% endhint %}

### **Not rendered**

The *Not rendered* option allows you to completely remove the component from the page when its Show Condition is `false`. This means the component will be rendered each time the Show Condition value changes from `false` to `true`. The `On Init` trigger will be fired each time the component is rendered.

If you have a component that renders children dynamically, then this setting will also affect its children.

{% hint style="info" %}
For example, if you place a *Table* inside a *Modal*, the table will not be rendered during page initialization. Each time you open this modal dialog, the table will be rendered from scratch, and the `On Init` trigger will be activated.
{% endhint %}

### How to approach the Hide mode

Which option to choose in the Hide mode is entirely up to you but we would recommend the following:

* Use the **Hidden** option for all components that should be visible on the page immediately after loading.
* Use the **Not rendered** option for components that display their children dynamically (e.g., *Modal*, *Tabset*, *Stepper*) to [improve app performance](https://docs.uibakery.io/reference/performance).


---

# 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.uibakery.io/concepts/components/work-with-components/control-components-visibility.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.