Controlling component's visibility

Here, we talk about the Table component as an example, but the guide applies to all available components.

We've previously touched upon configuring component visibility using the Show condition setting here. 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

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

Now let's dive into its configurations 👇

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.

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.

Hide Mode

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.

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.

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.

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.

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.