# How to set column visibity

## Overview

In this step-by-step guide, we will explore configuring a column within the [**Avonni Data Table**](https://docs.avonnicomponents.com/flow/flow-components/data-table) component, based on particular criteria. We’ll demonstrate how you can effectively use flow variables to define these criteria, enabling a more dynamic and tailored presentation of your data within the table according to the specific conditions or requirements you set.

## Guided Steps

{% stepper %}
{% step %}

### Creating your flow Variable

That will be used as a variable to show or hide a column.

{% hint style="info" %}
***As an example***

**Example Formula:**

`{!Account.Industry}='Technology'`

**Implementation:**

Create a formula to determine if an Account's Industry field is 'Technology', and display a column in the Avonni Data Table accordingly, allowing users to view information relevant to Technology industry accounts only.
{% endhint %}
{% endstep %}

{% step %}

### Configuring the Data Source

To populate the Avonni Table, a Data Collection is required. You can achieve this by establishing a 'Get Records' collection.
{% endstep %}

{% step %}

### Drag the columns

Once your Data Source is configured, use it as a Data Collection to enable dragging columns derived from the 'Get Records' collection onto the Data Table.
{% endstep %}

{% step %}

### Activate the Hidden variable

* Open the '**Properties Panel**' and go to '**Data Source selection**' on the Avonni Data Table.
* Click on the desired column.
* Find the '**Hidden**' attribute and click the formula icon.
* Select '**Mapped**'.
* Choose your pre-created variable or formula to assign visibility. For example, if you have a variable named 'isVisible' with values true or false, select it here.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FTf7uFU3DPPEMQi1Es7fe%2F2023-09-30_15-19-21.png?alt=media&#x26;token=284a875d-cfea-4898-a309-13bbddc308ee" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}