# How to Grayscale Header Actions Dynamically in Avonni Data Table

Sometimes, you may want to restrict actions within your [Avonni Data Table](https://docs.avonnicomponents.com/flow/flow-components/data-table) until the user has selected at least one record. For instance, a "Delete Selected" header action should only be available when rows are chosen.

{% hint style="warning" %}

#### Flow Builder Limitation with Multiple Header Buttons

Flow Builder has a limitation: if your Data Table header contains multiple buttons, you can’t disable just one of them while keeping the others active. This use case isn’t supported in Flow Builder. To achieve it, we recommend using the [**Avonni Dynamic Components App**](https://app.gitbook.com/s/ODPvvv7Cx9Z9RECLn3oV/getting-started/installation-and-licenses-management#installation), which fully supports this functionality.
{% endhint %}

## **In this tutorial, you'll learn how to**

* Dynamically disable or enable header actions depending on whether records are selected.
* Prevent users from attempting actions that don't apply to the current data selection.
* Improve user experience by providing clear visual cues for available actionsoffering clear visual cues about what actions are available.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FMbU5FOX2KELeUFToLkxq%2FdisablingAction.gif?alt=media&#x26;token=3b69bd4c-abfe-4d2f-8f8e-2ab11230795f" alt=""><figcaption></figcaption></figure>

## Guided Steps

{% stepper %}
{% step %}

### Create "isRowSelected" Formula

* Create a new resource and select Formula as a resource type.
* Name your formula "isRowSelected".
* Data Type: select > **`Boolean`**.
* In the formula input field, write the following formula:

  ```html
  IF({!YourDataTableApiName.nbSelectedRows}>0, false, true)
  ```

  This formula checks if any row is selected in the data table. If one or more rows are selected (`{!YourDataTableApiName.nbSelectedRows}>0`), the formula returns `false`, otherwise, it returns `true`.

{% hint style="danger" %}

#### **➡️ IMPORTANT: Replace `YourDataTableApiName`! ⬅️**

* You **must** replace `YourDataTableApiName` in the formula above with the *actual API Name* of **your** Data Table component on the canvas.

* To find the API Name: Click on your Data Table component on your screen element. Look in the **Properties Panel** (right side) for the `API Name` field. Use that exact name in the formula.
  {% endhint %}

* Click "Save" to save your formula.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FPtJNyYbziQbeS4QAGmZ2%2F2023-07-23_21-58-48.png?alt=media&#x26;token=3ca845ef-f6ab-4e12-b335-43857cac1a56" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Map "isRowSelected" to Disabled Actions

Now, we'll link the formula we created to the Data Table's setting that controls whether header actions are enabled or disabled.

1. **Select the Data Table:** Click on your Data Table component on the canvas.
2. **Find Header Action Settings:** In the **Properties Panel**, expand the **Header** section.
3. **Locate "Disable Header Actions":** Find the property specifically designed to disable *all* header actions. This might be labeled **Disable Header Actions**, **Disable Actions Toggle**, or similar.
   * *<mark style="color:red;">**IMPORTANT**</mark>**:*** Ensure you are configuring the setting for *all header actions* in the main Header section, **not** the individual "Disabled" property found within the configuration of *each specific action button* you might add later.
4. **Bind to Formula:**
   * Click the **resource selector icon** next to the **Disable Header Actions** property.
   * Select the `noRowsSelected` **Formula resource** you created in Step 1.
5. **Save Your Component:** Save your Dynamic Component.

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2F5NYp1veLqQyGZQmMhpod%2F2023-07-07_13-15-06.png?alt=media&#x26;token=144c3201-4488-4345-b88c-e721a31f6ac0" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

When no rows are selected in your data table, the Header Actions are disabled. They are enabled only when one or more rows are selected.