How to Grayscale Header Actions Dynamically in Avonni Data Table

Sometimes, you may want to restrict actions within your Avonni 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.

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 offering clear visual cues about what actions are available.

Step 1: 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:

  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.

➡️ 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.

• Click "Save" to save your formula.

Step 2: 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.

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

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.