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