# Data Table {% hint style="success" %} #### New: File Upload Column Type You can now add a File Upload column to your Data Table. Users can upload files directly from a table row โ€” files are saved as Content Documents linked to the row's record. See [**the File Upload Column Type section below**](#file-upload-column-type) for setup details. {% endhint %} {% hint style="danger" %} ## Important: Optimize Avonni Data Table loading time To ensure optimal performance and security when using the Avonni Data Table in Screen Flows, make sure that [**Lightning Web Security is enabled**](https://developer.salesforce.com/docs/platform/lightning-components-security/guide/lws-enable.html) in your Salesforce organization. Enabling this feature helps prevent performance issues and supports the smooth operation of the data table component. {% endhint %} ## Tutorials Discover how to effectively leverage the capabilities of the Avonni Data Table, a valuable component for managing and visualizing data within Salesforce. ### Core functionality
Data Table 101/pages/bTsjAaQvWdNnxxD7fHii/files/6zU50jM4KM2WZB1GzxFJ
Guided Tutorial by Yumi Ibrahimzadehttps://www.linkedin.com/posts/yumiibrahimzade_ad-salesforce-trailblazercommunity-activity-7208434323576827906-T2X3/files/0BvGRnj1oZDClE2GlEQi
### Enhancing Data Display & Interaction
Adding Images/files/Y5HjfDkrkY80vGCaOERW/pages/vmb4lxNZz3C8jYpmmqQf
Displaying a record as a QR Code/files/lMedwwW4kVvQOIQQKuKs/pages/FCV510w7m9NQBW2SEB2n
How to Conditionally Color Cells/files/ptd78jYRQY7sBQYoObo9
### Advanced Features
Add fields as filters/files/Sxwqv7zuxWsWyThoYmjU/pages/q3qgA2nQZ3mC0SNpI06R
Making a field Editable/files/s19v4YGXvo7s1lLfspzG/pages/cBH9B45E3VEDo6b3E5Xe
Setting up Data Export/files/jASbeqtBat8pYM0eMK7Y/pages/snGyMucsQqK4y3NA7ipb
Implementing Bulk Edit/files/Bse7jQsgWjqZ6gjEappJ/spaces/dHOej9Pd5IxJNGEJMZKW/pages/eEXfcvxEb6eXYcmS2nej
### Tips and Tricks Take your Data Tables to the next level with these handy tips and tricks.
Add Clickable Buttons/pages/ufB696CreNwYkrV7TP9l
Show or Hide Columns Based on Conditions/pages/vv7gHCWdy5M3wkZgY9QM
How to color-code Badges/pages/K42mituNDEN7ib4mcHi0
How to Grayscale Header Actions Dynamically/pages/VWtAv8qxKBPoHbt9FhO8
How to refresh the Data Table by pressing a button/pages/eu6FBvsBeycsuPLzDNxz
How to use formulas in Text Fields/pages/HWBWQRa7l1oJcP0j4RnZ
How to send multiple Record IDs to Another Flow/pages/LlUGfD9DRLzomcnZl4Mu
๐ŸŽฅ 7 Tips and Tricks on the Avonni Data Tablehttps://www.youtube.com/watch?v=f1qzN1EqryU
### Explore Reactive Queries For more in-depth examples of how to use the Avonni Data Table, check out our reactive query tutorials. These tutorials will show you how to create more interactive and dynamic projects using the Data Table component. {% content-ref url="/pages/2wR9yu7nPiFuToYZIslZ" %} [Reactive Query Tutorials](/flow/tutorials/reactive-query-tutorials.md) {% endcontent-ref %} *** ## Displaying and Managing Data ### Choose Your Data Source The first step in configuring the Avonni Data Table is establishing [the Data Source](broken://pages/sAH8FVQlNuVPYQdCwHb4). This crucial element determines the origin and organization of your data within the table. By defining the Data Source, you specify which data to display and how it's structured, ensuring the table functions correctly and meets your specific data presentation requirements.
**Available Data Sources**
ManualIdeal for static or predefined data./pages/N1uTGxMW16RfbM4g39MR
VariableGreat when your table data is linked to variable collections in your flow./pages/ziXlgb71wxsEEwGKKCqQ
QueryPerfect for tables reflecting dynamically changing data or real-time updates. /pages/viMlx8xVDeuY59H0WnZo
Can I use a collection variable output from an action button in a screen flow as the data source for a data table? Yes, you can use an action button's output collection as a data source for your data table. This allows you to dynamically populate your data table based on the results of actions performed within your flow. **Here's how to set it up:** **Key Requirement:** * **Record Variable Collection:** The output from your action button *must* be a collection of **record variables**. The Avonni Data Table component requires a collection of records when using a custom variable as a data source. **Steps to Configure:** 1. **Identify the Output Collection Variable Name:** * To correctly reference your action button's output collection, you need to know its exact variable name. * **Temporary Step:** Drag a **Display Text** component onto your screen flow canvas. * Configure the Display Text to display the **output collection variable** from your action button. This will involve selecting the action button component and then choosing its output collection variable. * **Run in Debug or Preview:** Execute your flow in debug mode or preview it. Observe the **Display Text** component. It will show the name of your action button's output collection variable. Make note of this name. * **(Optional) Remove Display Text:** Once you have the variable name, you can remove the temporary Display Text component. 2. **Set the Data Table Data Source:** * Navigate to the settings of your **Avonni Data Table** component. * Locate the **Data Source** setting. * Choose **"Custom Variable"** as the data source type. * In the field provided for the custom variable name, enter the **output collection variable name** you identified in Step 1. By following these steps, your Avonni Data Table will now dynamically display the data from the output collection of your action button.
**Why Is Configuring the Data Source Important?** * **Accuracy of Data**: Ensures the data table reflects the correct, current information per your business needs. * **User Experience**: An adequately configured data source contributes to a more intuitive and efficient user experience, as the data displayed is relevant and organized. * **Flexibility and Customization**: Different data sources offer varying levels of flexibility and customization, allowing you to tailor the data table to specific use cases. *** ### Map Your Data to Columns The Data Mappings feature in the Avonni Data Table Component is essential for correctly displaying data in your table. {% hint style="info" %} In this section, you'll learn how to: * [**Set up data mappings**](#setting-up-data-mappings): Connect your Salesforce data to the columns in your table. * [**Display fields from related records**](#displaying-fields-from-lookup-relationships): Show information from lookup relationships (e.g., display the Account Name on a table of Contacts). {% endhint %}
#### Setting Up Data Mappings This configuration is essential for ensuring your data is displayed accurately and effectively. There are two straightforward methods to add columns to your data table through Data Mappings: * **Drag-and-Drop Method**: The fields available for mapping will vary based on your chosen data sourceโ€”either a variable from 'Get Records' or an object in 'Query' mode. Here's how the process works: **For Variable Data Source**: Once you select the 'Get Records' variable that you wish to associate with the data table, a list of Salesforce fields from this variable will appear on the left side of the Data Table interface. **For Query Data Source**: Use the Query mode to select the corresponding Salesforce object. The relevant fields of that object will be displayed on the left. **Adding to Table**: After displaying the fields, you can drag them from this list and drop them onto the data table canvas to add them as columns.

How to create a new column by dragging and dropping fields.

* **Using the 'Add Columns' Button**: * **Location**: Locate the 'Add Columns' button in the right panel within the Data Mappings section. * **Process**: Clicking this button allows you to select from the available Salesforce fields and add them as columns to your data table.

How to create a new column using the "Add Columns" button

#### Displaying Fields from Lookup Relationships The Avonni Data Table lets you display information from related records, such as the Account Name in a table of Contacts. This uses a "lookup relationship." **Here's how to add fields from a lookup relationship:** 1. **Use the Query:** Ensure your Data Table uses the "Query" data source. This lets you work with related records. 2. **Add a Column:** * Go to the "Data Mappings" section. * Click "Add Columns" or drag a field from the left-hand side. * You'll see a list of fields in the "Source Field" dropdown. Fields with a `>` symbol next to them are from lookup relationships. Choose the field you want to display (e.g., `Account > Name` to show the Account Name). **Example:** To display the Account Type on an Opportunity table, you would: 1. **Choose "Query" as the data source.** 2. **Select the "Opportunity" object.** 3. **Add a column:** * Go to the "Data Mappings" section. * Click "Add Columns" or drag a field from the left-hand side. * In the "Source Field" dropdown, find and select `Account > Account Type`.
*** ### ๐Ÿ†• Customize Columns {% hint style="info" %} In this section * [**Access Column Settings**](#access-column-settings) * [**Customize Column Properties**](#customize-column-properties) * [**Tailor Each Column**](#tailor-each-column) * [**Currency-Specific Formatting**](#currency-specific-formatting) * [**Enhance Data Presentation**](#enhance-data-presentation) * **๐Ÿ†•** [**File Upload Column Type**](#file-upload-column-type) * [**Required Fields**](#required-fields) * [**Explore More**](#explore-more-further-reading-and-resources) {% endhint %} The Avonni Data Table lets you tailor how your data is shown. Here's how to customize your table columns: #### **Access Column Settings** * Each column linked to your Salesforce data is listed in the **Data Mappings** section. * Click on a column in this section to open its settings.
#### **Customize Column Properties** * The settings panel gives you control over various aspects of the chosen column. * Here, you can change things like: * **Width:** How wide the column is. * **Alignment:** Whether text is aligned left, right, or center. * **Sorting:** Whether users can sort the data by that column. * **Text Wrapping:** How text wraps within the column. * **Color & Formatting Cells**: [check this tutorial](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md) to learn more #### **Tailor Each Column** You can customize each column based on the type of data it shows. For example, a date column might need different formatting than a currency column. For number-based columns like currency or percentages, you can precisely control the display of numeric values using the following attributes: * **Minimum Fraction Digits:** Sets the minimum number of digits to display after the decimal point. * **Maximum Fraction Digits:** Sets the maximum number of digits to display after the decimal point. * **Minimum Integer Digits:** Ensures a minimum number of digits before the decimal, even for small values. * **Step Size:** Defines the allowed increments for the number, which can help restrict input or control how values are rounded.
**Example:** Let's say you have a column showing product prices. You want to ensure all prices are displayed with two decimal places, like $12.34. Within the column settings, you would: 1. Locate the `Minimum Fraction Digits` setting. 2. Set it to "2". 3. Locate the `Maximum Fraction Digits` setting. 4. Set it to "2". This ensures consistency and clarity in how your numeric data is presented in the Data Table. #### Currency-Specific Formatting For columns containing currency data, you have additional formatting options to ensure accurate and locale-appropriate display: * **Value Display As**: Controls how the currency value is presented. * **default**: Uses the standard Salesforce currency formatting for the user's locale. * **converted**: Displays the value converted to the user's currency. * **formatted**: Applies specific formatting rules (using the other currency attributes). * **formatted and converted**: Combines formatting and currency conversion. * **Currency Code**: Specifies the currency code (e.g., USD, EUR, GBP) for display or conversion. * **Currency Display As**: Determines how the currency symbol is shown (e.g., symbol only, code only, symbol and code). * **Minimum Integer Digits**: Ensures a minimum number of digits before the decimal point (e.g., 001.23). * **Minimum Fraction Digits**: Sets the minimum number of digits after the decimal (e.g., 12.30). * **Maximum Fraction Digits**: Limits the number of digits after the decimal (e.g., 12.34, not 12.3456). * **Minimum Significant Digits**: Controls the minimum total number of significant digits displayed. * **Maximum Significant Digits**: Limits the total number of significant digits. * **Step**: Defines the allowed increments for the currency value (e.g., can only be changed in steps of 0.01). **Example** To display a price in Euros with the symbol and always showing two decimal places: 1. Set **Value Display As** to "formatted." 2. Set **Currency Code** to "EUR." 3. Set **Currency Display As** to "symbol." 4. Set **Minimum Fraction Digits** to "2." 5. Set **Maximum Fraction Digits** to "2." Using these attributes, you can ensure that currency values in your Avonni Data Table are presented accurately and in a way that aligns with your users' locale and preferences. #### **Enhance Data Presentation** * Use the **Type** setting to change how data appears in the column. * Want to highlight important words with colorful badges? Choose the **Badge** type. * Need to show progress visually? Choose the **Progress Bar** type.
{% hint style="info" %} **Controlling Decimal Places in Currency and Percent Fields** When working with currency or percentage data in your Data Table, you might need to control how many decimal places are displayed or allowed during editing. Here's how you can do that: **Adjusting Decimal Places for Editing:** In the column settings for your currency or percent field, you can use the `step` attribute to control how much the value changes with each increment or decrement. Here's how it works: * `step: 0.01` (default): Allows two decimal places (e.g., 123.45). * `step: 0.001`: Allows three decimal places (e.g., 123.456). * `step: 1`: Allows only whole numbers (e.g., 123). **Controlling Displayed Decimal Places:** You can also control how many decimal places are shown in the Data Table (even if they're not editable) using the `minimumFractionDigits` and `maximumFractionDigits` attributes. **Important Note:** These settings are specifically for number-based fields like currency and percent that may involve decimal values. {% endhint %}
List of available Data Type * **Action:** Provides a dropdown menu for taking actions on a specific row (e.g., edit, delete, view details). * **Avatar:** Displays a profile picture or user image. * **Badge:** Highlights key terms or status with a colorful label (e.g., "Urgent", "Completed"). * **Boolean:** Visually indicates true/false values (e.g., a checkmark for "Yes", blank for "No"). * **Button:** Creates a clickable button to trigger an action (e.g., "Submit", "Download"). * **Button Icon:** A button with a descriptive icon (e.g., a download icon for a "Download" action). * **Color Picker:** Lets users select a color value. * **Combobox:** Offers a dropdown list of choices for selection. * **Counter:** Displays a simple numerical count (e.g., the number of items in a list). * **Currency:** Formats and displays monetary values correctly (e.g., $1,234.56). * **Date:** Displays a calendar date with regional formatting (e.g., 04/11/2024 for US). * **Date Local:** Displays a date without time, formatted for the user's location. * **Email:** Displays an email address and makes it a clickable link. * **File Upload:** Adds a file upload button to each row, letting users attach files directly from the table. Files are stored as Salesforce Content Documents linked to the row's record * **Location:** Displays geographical coordinates (latitude and longitude). * **Number:** Displays numerical values (e.g., 10, -5.25). * **Percent:** Displays a value as a percentage (e.g., 75%). * **Phone:** Displays a phone number and makes it clickable for dialing. * **Progress Bar:** Graphically shows completion status as a percentage (e.g., a bar filled to 60%). * **Progress Circle:** Graphically shows completion status in a circular format. * **Progress Ring:** Another circular format for displaying progress. * **QR Code:** Displays a scannable QR code for quick access to information. * **Rating:** Lets users provide feedback using a star or point-based system. * **Rich Text:** Displays text with formatting like bold, italics, lists, etc. * **Slider:** Allows users to select a value within a range using a draggable slider. * **Text:** Displays plain, unformatted text. * **Toggle:** Creates an on/off switch for settings or options. * **URL:** Displays a website address and makes it a clickable link
**Displaying Rich Text Fields** Select the '**Rich Text**' type in the column settings to display rich text formatting correctly in your Data Table. This ensures any bolding, italics, lists, etc., from your Salesforce rich text field, will appear as intended in the table.
#### **File Upload Column Type** The **File Upload** type adds an upload button inside each row of the Data Table. When a user clicks the button, Salesforce's standard file upload dialog opens. The uploaded file is stored as a **Content Document** linked to the record of that row โ€” you can find it in the record's **Files** related list. **How to set it up:** 1. In the **Data Mappings** section, click on the column you want to use for file uploads. 2. Change the **Type** to **File Upload**. 3. Configure the settings below as needed.
SettingWhat it does
LabelThe text shown on the upload button. Defaults to "Upload File" if left empty.
AcceptRestricts which file types users can upload. Enter a list of extensions (e.g., .pdf, .jpg, .png). Leave empty to allow all file types.
File Name PrefixText added before the original file name when saving. For example, a prefix of Quote_ renames proposal.pdf to Quote_proposal.pdf.
File Name SuffixText added after the file name (before the extension). For example, a suffix of _v2 renames proposal.pdf to proposal_v2.pdf.
MultipleWhen enabled, users can select and upload more than one file at a time.
Show File UploadedDisplays a list of uploaded files below the button. Each file shows its name with a document type icon. Users can click a file name to preview it, double-click to rename it, or use the dropdown menu to rename or delete it.
DisabledGrays out the upload button and prevents interaction.
> **Example****:** On an Opportunity Data Table, add a File Upload column so sales reps can attach signed quotes directly from the table. Set **Accept** to `.pdf` to only allow PDF files, and add a **File Name Prefix** of `Quote_` so all uploaded files are easy to identify in the record's Files related list. {% hint style="success" %} #### **No save interaction needed** Unlike inline editing, files are uploaded and saved immediately when the user selects them. The Content Document is created and linked to the record as soon as the upload finishes โ€” there's no need to configure a save interaction in the Interactions tab. Renaming and deleting files are also instant. {% endhint %} {% hint style="warning" %} #### Important The File Upload requires a valid record ID for each row. This means your Data Table must be connected to Salesforce records (via **Query** or **Variable** data source) โ€” it won't work with **Manual** data entries since there's no record to attach the file to. {% endhint %} #### Required Fields To make a field required in your Avonni Data Table, create a validation rule for that field within your Salesforce organization. The Avonni Data Table automatically honors any validation rules you've set up. This ensures data integrity by enforcing required fields during data entry or modification. #### Explore More: Further Reading and Resources {% content-ref url="/pages/vmb4lxNZz3C8jYpmmqQf" %} [How to add Images onthe Data Table](/flow/tutorials/components/data-table/how-to-add-images-onthe-data-table.md) {% endcontent-ref %} {% content-ref url="/pages/fcScUnn9UGArXSHDNTWC" %} [Displaying Record Name field as a link](/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md) {% endcontent-ref %} {% content-ref url="/pages/FCV510w7m9NQBW2SEB2n" %} [Displaying a Record as a QR Code](/flow/tutorials/components/data-table/displaying-a-record-as-a-qr-code.md) {% endcontent-ref %} In summary, the Data Mappings feature in the Avonni Data Table doesn't just link your Salesforce data to the table columns; it also allows you to customize how each column functions and appears. *** ## Make your Data Table Editable Inline editing lets users update data directly in your Data Table, making it more user-friendly. ### **Two Ways to Edit** #### **Inline Editing (Pencil Icon)** A pencil icon appears next to the data when you activate inline editing for a field. Users click the icon to edit.

Inline editing feature activation with the pencil icon enabled

#### **Direct Cell Editing** For even faster edits, choose "Display as Input." This transforms the field into an editable input box, eliminating the need for extra clicks.

Toggle to activate to make a specific field displayed as input.

Enable 'Display as Input' from the 'All Columns Settings' button to make every field in your Data Table directly editable.

### **Which Editing Mode Should You Use?** * **Inline Editing:** Ideal for occasional edits or to indicate which fields can be modified. * **Direct Cell Editing:** Perfect for frequent updates or streamlining data entry tasks ### **Setting up the save interaction** Adding inline editing to fields in the Avonni Data Table is efficient and user-friendly. However, it's crucial to remember the most critical aspect of this functionality. {% hint style="warning" %} This step is critical for making **inline editing functional**. As you enhance your data table with inline editing, always include a save interaction to capture and persist user modifications seamlessly. ๐Ÿ‘‡ {% endhint %} {% @arcade/embed flowId="27kelamS0uDm1EZtsdcM" url="" %} #### Learn more about making a field editable. ### Supported Objects for Inline Editing Here's the [list of all the supported objects](https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_all_supported_objects.htm) for the inline editing. {% hint style="warning" %} #### Note on Lookup Fields While the Avonni Data Table allows you to display fields from related records (e.g., Account Name on a Contact table), **lookup fields themselves are currently not supported for inline editing**. These fields will remain read-only even if the "Editable" toggle is enabled. {% endhint %} ### Tutorial: Making a Field Editable {% content-ref url="/pages/cBH9B45E3VEDo6b3E5Xe" %} [Making a field editable](/flow/tutorials/components/data-table/making-a-field-editable.md) {% endcontent-ref %} *** ## Row Actions ### Creating Row Actions Row Actions enhance user engagement by providing a dropdown menu of additional options when a row is clicked. They offer a practical, interactive way to manage and interact with the data in the table. {% @arcade/embed flowId="GM83tZiAOn9HTUL8ZKmz" url="" %} ### Making the Row Actions functional After you create row actions, they won't *do* anything yet. To make them functional, you need to set up [**interactions**](https://docs.avonnicomponents.com/flow/flow-components/pages/hpUQHY0v3xCgR6iyJj3N#id-2.-make-the-row-actions-work). ### Tutorial: Creating Row Actions {% content-ref url="/pages/hpUQHY0v3xCgR6iyJj3N" %} [Creating Row Actions](/flow/tutorials/components/data-table/creating-row-actions.md) {% endcontent-ref %} *** ## Group Your Data The "Group By" feature categorizes your data within the table. This makes it easier to analyze and understand, especially when working with large datasets. {% hint style="warning" %} ## Limitations on Grouping Fields in Salesforce Not every field in Salesforce can be used for grouping. For example, fields like CreatedDate or LastModifiedDate cannot be grouped. Only fields that are marked as โ€œgroupableโ€ in Salesforceโ€™s system can be used in the Group By feature. {% endhint %} ### **How It Works** 1. **Choose Your Grouping Column:** Select the column that contains the values you want to group your data by (e.g., "Region," "Product Type," etc.). 2. **Automatic Grouping:** The Data Table instantly organizes your data, creating sections based on the unique values in the column you've chosen. **Example:** If you group by "Language," you'll see sections for each distinct language, with all related data neatly grouped within those sections.

Avonni Data Table with the Group By in Action

### How to Enable Group By {% @arcade/embed flowId="QQFtBlffS4CQVC8QrqV3" url="" %} ### Customize Grouped Data The Group By section in the Avonni Data Table offers a range of settings to customize how grouped data is displayed and interacted with.
Here's a brief overview of the available options:
OptionDescription
Hide Undefined LabelHides groups labeled as 'undefined'.
Undefined Group LabelSets a custom label for undefined groups.
Non CollapsibleMakes grouped sections non-collapsible.
CollapsedStarts groups in a collapsed state.
Display Group Rows CountShows the count of rows in each group.
Show Empty GroupsDisplays groups even if they have no data.
DirectionSpecifies the direction of the order of the group by.
LinkifyMakes lookup values clickable for quick navigation
### **Change the Group Order** You have complete control over the order in which your data is grouped. Here's how to adjust it: * **Direction Options:** Choose from default, ascending, descending, or custom order. * **Custom Order:** For maximum flexibility, select "Custom." This allows you to rearrange and remove grouping values, tailoring the display to your needs.
### Linkify values When enabled for lookup fields in the Group By column, this option turns the group header into a clickable link. Clicking the link will navigate you directly to the record detail page of the associated lookup object.
### Video Tutorial {% embed url="" %} *** ## Other Settings ### General Properties
| Setting | Description | | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Hide Table Header** | Hides the table header when enabled. | | **Wrap Table Header** | Long column headers automatically wrap up to 3 lines, preventing clipped text and improving readability. | | **Hide Checkbox Column** | Removes the checkbox column used for row selection. | | **Show Row Number Column** |

Displays row numbers in the first column if enabled.
NOTE: The Avonni Data Table uses Salesforce's standard Data Table as its foundation. Because of this, if you turn on "inline editing" (allowing users to edit data directly in the table), row numbers will automatically appear. This is how Salesforce has designed it, and we can't change that behavior.

| | **Required** | Makes row selection mandatory for users. | | **Max Row Selection** | Sets the maximum number of rows that can be selected. | | **Suppress Bottom Bar** | Hides the footer with Save and Cancel buttons during inline editing. | | **Show Number of Items Selected** | Displays the count of selected items if enabled. | | **Read Only** | Prevents editing of records, making the table read-only. | {% hint style="info" %} #### **Important Note on Row Pre-selection** It's important to understand that the Avonni Data Table, similar to the underlying `lightning-datatable` component from Salesforce, **doesn't have a built-in property for pre-selecting rows based on a record ID.** Row selections within the Avonni Data Table are managed by the data provided to the table and by direct user interaction. This means that row selection is driven by the data itself and the user's clicks within the table interface, rather than by programmatically setting selections based on record identifiers. {% endhint %} ### **Mobile Responsiveness** The Avonni Data Table is built on Salesforce's Lightning Data Table. The Lightning Data Table has limited responsiveness and may not automatically adjust to smaller screens. To optimize the Data Table for mobile devices, consider these options: * **Create a separate Data Table for mobile:** Build a simplified one with fewer columns specifically designed for mobile users. Use Salesforce's component visibility settings to display this mobile-friendly table only on smaller screens. * **Use the** [**Avonni List**](/flow/flow-components/list.md) **component:** For a more responsive solution, consider using the Avonni List component. This component [has built-in responsive settings](/flow/flow-components/list.md#layout-configuration) that adjust the display based on screen size. Combine this with Salesforce's component visibility settings to show the List only on mobile devices. *** ### Header The header is the top row of your Data Table. Use the Header section to customize its appearance and add functionality. #### **Header Options**
* **Title:** Give your Data Table a clear and descriptive title. This helps users understand the table's content at a glance. * **Caption:** Add a short description or extra information below the title to provide context or details about the data. * **Icon:** Include an icon in the header to enhance visual appeal or represent the table's purpose. * **Is Joined:** This option removes the header's bottom border, making it blend seamlessly with the rest of the table or other components. * **Actions:** Add buttons to your header to give users quick access to common actions, like creating a new record or exporting data. You can customize these actions in the "Interaction" tab. * **Visible Actions:** Control how many action buttons are shown directly in the header. The rest will be placed in a dropdown menu if you have more actions than you want to show. For example, if you have 4 actions but set "Visible Actions" to 2, only the first 2 buttons will be shown directly. * **Hide Actions:** Completely hide the action menu in the header. * **Disable Actions:** Make the action menu inactive (grayed out) but still visible in the header {% hint style="success" %} **Tutorial**: [How to Grayscale Header Actions Dynamically in Avonni Data Table](/flow/tutorials/components/data-table/tips-and-tricks/how-to-grayscale-header-actions-dynamically-in-avonni-data-table.md) {% endhint %} *** ### Columns Widths Column widths can be customized if needed. By default, all columns have min and Max values set in pixels.
| Setting | Description | Details & Options | | -------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Column Widths Mode** | Specifies how column widths are calculated. |

- Fixed: Equal widths for all columns.
- Auto: Widths based on content and table width. Default is 'fixed'.

| | **Max Column Width** | Sets the maximum width for all columns. | Prevents columns from becoming too wide. | | **Min Column Width** | Establishes the minimum width for all columns. | Ensures columns donโ€™t become too narrow, affecting readability. | | **Wrap Text Max Lines** | Specifies the max number of lines before truncating the content. | Content is cut off and shown with an ellipsis after the set number of lines. Must be 1 or more. | | **Resize Column Disabled** | Disables manual column resizing. | Useful for maintaining consistent column widths. | | **Resize Step** | Width adjustment amount when resizing columns with arrow keys. | Allows for fine-tuned column width adjustments. | {% hint style="info" %} **SET COLUMN WIDTH INDIVIDUALLY** **Column width can be set individually** for each column as follows: * Go to the **Data Mappings section** * **Click on a column** * **Scroll down** completely and click on "**`Advanced Option`**" * Set a specific fixed width for this column.\ ![](/files/NewLp5ZtaiQGRmjBj8L6) {% endhint %} *** ### Column Sorting You can set the sorting options for columns. The default **`sorting direction`** is applied to sorted columns. {% hint style="info" %} **Each column** can be sortable by activating the sortable toggle directly from the column properties. ![](/files/Zp8n6AYuSCGktsBWMwSu) {% endhint %} *** ### Pagination The **`Pagination`** section lets you activate Pagination for your datatable. Here's **how to add pagination** on your datatable: * From the Properties Panel, expand the Pagination Options section * Check the "**`Show Pagination`**" toggle * Enter your desired number of items per page * Adjust other settings like: * Pagination alignment * Buttons icon and label {% @arcade/embed flowId="43ibnWwd9a8MprQQAEy5" url="" %} *** ### Pill Container Activating the Pill Container option will display selected items in a pill container. Pills can be sorted and displayed in a single line by activating the appropriate option. The **`Label Field`** attribute displays the pill name by the selected field.

Final result

SettingDescription
Label FieldDetermines the field name used for the pill label.
SortableEnables sorting within the pill container.
Single LineRestricts the pill container to a single line.
*** ## Filter Data The Avonni Data Table makes it easy for users to find the information they need by applying filters to the data. You have several options for setting up filters: * **Directly on the Table (Canvas):** Apply filters directly to the Data Table. * **In Component Settings (Properties Panel):** Customize filter settings within the component's properties. * **Quick Filtering:** Enable filtering on all columns by default for a faster setup. * **Hidden Columns:** You can even filter data based on columns that aren't visible in the table. Each method gives you control over how users can refine their view of the data. ### **Ways to Add Filters** #### *From the Canvas* * On the Data Table header, click on the arrow next to the column name you want to make editable. * Click on "**`Allow Filtering`**" to make that field searchable.
#### *From the Properties panel* * Go to the **Data Mappings section** * **Click on the column** of the field you want to make searchable * Scroll down and toggle the **`Filterable`** attribute.
#### Quick Filtering Want to make all columns filterable by default? The Avonni Data Table makes it easy: 1. Click the "**All columns settings**" button. 2. Click on the **filterable** option. With just two clicks, you'll activate default filtering capabilities for every column in your Data Table
#### **Set filters for fields that aren't visible** In the Data Mappings section, you can use specific fields as filters **for other fields that aren't visible as columns**. It allows you to add extra filters to your data without having to clutter your Data Table with additional columns. Essentially, you can filter data behind the scenes without changing the appearance of your Data Table.

How to Apply Field Filters in the Data Table Without Displaying the Fields

### Filters Options The Avonni Data Table offers three filtering options typ, each designed to accommodate different user preferences and screen sizes.
Filter TypeIllustrationDescription
HorizontalThese filters appear directly above the data table, laid out in a horizontal row.
PopoverThis option allows filters to be hidden behind clickable icons or buttons; when clicked, a small, floating interfac appears, containing the filter options.
Side PanelFilters in a side panel are located to the left or right of your data table, accessible through a panel that can be expanded or collapsed.
### Accessing the Filtering Menu * Open the Component Builder * Scroll down to the Filter section. * Select how you'd like to display filters.
### Customize the Filter Panel When configuring your Avonni Data Table component to use a "Panel" filter, you can present filtering options in a convenient side panel. This panel offers additional customization settings, described below: * **Position (Left, Right):** * This setting determines whether your filter panel slides out from the screen's left or right side when a user interacts with the filter. * **Is Closed:** * This option controls the initial state of the filter panel. * Set "Is Closed" to "True" if you want the filter panel to start hidden. This is useful when you initially want to emphasize the data table content. * Set "Is Closed" to "False" if you want the filter panel to be open by default, prompting users to customize their data view immediately. * **Hide Toggle Button:** * It indicates whether a toggle button is visible when manually opening and closing the filter panel. * Set "Hide Toggle Button" to "True" if you want the panel to open and close based on other events within your flow (e.g., when a filter icon is clicked). * Set "Hide Toggle Button" to "False" to give users an always-visible toggle button to control the panel.
### **Dynamic Picklist Filters** The Avonni Data Table offers dynamic picklist filters to enhance your filtering experience. When a filter is applied to a picklist field, the filter menu automatically adjusts to show only picklist values currently used by at least one record in your data table. This simplifies the filtering process and prevents users from selecting irrelevant or unused options. **To enable this feature, toggle the "Hide Picklist Empty Values" option to "On" within the Data Table's properties**.
*** ## Search The Search Engine options let you configure your search box option. You can customize placeholder text and set the position of your search box. The Search box will appear when at least one field is set to be searchable. {% hint style="warning" %} **Things to Keep in Mind About Searchable Fields** **Rich Text Fields:** * You ***cannot*** search rich text fields using the **Query Data Source** option. * You ***can*** search rich text fields using the **Variable Data Source** option. This allows you to find records based on the content within your rich text fields. {% endhint %} ### **Making a field searchable** *From the Canvas* * On the Datatable header, click on the arrow next to the column name you want to make editable. * Click on "**`Allow Search`**" to make that field searchable.
*From the Properties panel* * Go to the **Data Mappings section** * **Click on the column** of the field you want to make searchable * Scroll down and toggle the **`Searchable`** attribute.
### Set fields as searchable without displaying them This feature allows users to perform search queries on specific fields in the underlying dataset, even if they are not visible in the table view. It makes it easier to dig into large datasets and retrieve precise information quickly. * Open the Component Builder * Scroll down the properties list to the end * In the **`Search Fields`** attribute, select the fields that must be searchable without displaying them in the Data Table.
### Set a default search value The '`defaultSearchValue`' attribute lets you set a predefined search term in your tables. When the data table loads, it automatically searches using this specified term.
*** ## Styling The Avonni Data Table component provides several styling options, allowing you to customize its appearance and seamlessly integrate it into your screen flows.
### General Styling * **Margin:** Control the space around the entire Data Table. * **Padding:** Adjust the space between the Data Table's content and border. * **Border:** You can customize the border's appearance around the Data Table, including its style, width, and color. * **Size:** Choose from predefined size options or set a custom size for the Data Table. ### Data Table Cell Styling * **Row Height:** Control the height of each row in the Data Table. * **Cell Padding:** Adjust the padding within each cell, influencing the spacing between the cell content and its borders.
{% hint style="success" %} ## Learn More **Color & Formatting Cells**: [check this tutorial](/flow/tutorials/components/data-table/tips-and-tricks/how-to-conditionally-color-cells.md) to learn how to do it. {% endhint %} ### Header Styling * **Header:** Customize the appearance of the entire header section. * **Header Border:** Style the border that separates the header from the table body. * **Header Title:** * **Color:** Change the header title's text color. * **Font Size:** Adjust the header title's font size. * **Font Style:** Choose a font style for the header title (e.g., normal, italic). * **Font Weight:** Set the header title's font weight (e.g., normal, bold). * **Header Caption:** Style the appearance of any caption text displayed within the header. * **Header Actions:** Customize the appearance of buttons or other interactive elements placed in the header. ### Additional Elements * **Pill Container:** Style the container displaying pills or badges in the Data Table. * **Avatar:** Customize the appearance of avatars displayed within the Data Table. * **Pagination Buttons:** Style the buttons used for navigating through paginated data. * **Footer:** Customize the appearance of the footer section, which often contains summary information or additional actions. * **Group By Section:** Style the section that displays grouping controls, if applicable. * **Show More Button:** Style the button to reveal additional data, if applicable. *** ## Interactions The Interactions panel lets you customize how your Data Table reacts to user input. Here's what different interaction types allow you to do:
* **`Header Action`:** Define actions when users click the Data Table's header buttons. This could include sorting columns, filtering data, or triggering custom processes within your application. * **`Row Action`:** Control what happens when users click the action buttons (if you've configured any) within individual rows of the Data Table. These actions might include opening a record for editing, deleting a row, or initiating related flows. * **`Save`:** Determine the actions taken when a user clicks the "Save" button after editing a field within the Data Table. This typically involves updating the underlying data source and providing feedback to the user. * **`Cancel`:** Specify what should happen when a user clicks the "Cancel" button while editing a field. This often involves discarding the changes or prompting the user to confirm cancellation. **Complete List of Actions:** This page provides a [full list of the actions](/flow/component-builder/interactions-panel.md) you can add and how to configure them. *** ## Output Variables The Data Table exposes several output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Data Table component, and pick the output variable you need. ### Row Selection When users check rows in the Data Table, these variables update automatically. | Output variable | Type | What it returns | | ------------------------------------------------------ | ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Selected Rows** | Record Collection (SObject\[]) | All currently selected rows as a collection of Salesforce records. Use this to loop through selected records in a subsequent flow element. | | **Selected Rows Key Field Value** | Text Collection (String\[]) | The key field values (usually record IDs) of all selected rows, as a list. | | **Selected Rows Key Field Value comma separated** | Text (String) | The same key field values as a single comma-separated string (e.g., `001xx000003DGbY,001xx000003DGbZ`). Useful for passing to Apex actions or building SOQL filters. | | **Selected Rows Key Field Value semi colon separated** | Text (String) | Same as above but separated by semicolons. | | **Selected Rows Serialized** | Text (String) | The selected rows as a JSON string. Use when you need to pass the full row data to a subflow or Apex action that expects serialized input. | | **First Selected Row** | Record (SObject) | The first selected row as a single Salesforce record. Useful when **Max Row Selection** is set to 1 and you only need one record. | | **First Selected Row Key Field Value** | Text (String) | The key field value (usually the record ID) of the first selected row. | | **First Selected Row Serialized** | Text (String) | The first selected row as a JSON string. | > **Example:** After the Data Table screen, use a **Loop** element to iterate through **Selected Rows** and create a Task for each selected Opportunity โ€” e.g., "Follow up on {!loopVariable.Name}". ### Inline Editing When users edit cells and click Save, these variables capture the changes. | Output variable | Type | What it returns | | -------------------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Edited Rows** | Record Collection (SObject\[]) | Only the rows that were modified, containing just the changed fields and the key field. Use this with an **Update Records** element to save changes back to Salesforce. | | **Edited Rows Full Data** | Record Collection (SObject\[]) | The full data of edited rows (all fields, not just the changed ones). Useful when you need the complete record for downstream logic. | | **Edited Rows Serialized** | Text (String) | The edited rows as a JSON string. | > **Example:** After the screen, pass **Edited Rows** into an **Update Records** element to save the user's inline edits back to Salesforce. Use **Edited Rows Full Data** if you need to log the complete record state before and after changes. ### Action Clicks When users click a header action button or a row action, these variables tell you which action was triggered and on which record. | Output variable | Type | What it returns | | -------------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Clicked Header Action Name** | Text (String) | The name of the header action button the user clicked (e.g., "New", "Export"). Use in a **Decision** element to route the flow based on which button was pressed. | | **Clicked Row Action Row** | Record (SObject) | The full Salesforce record of the row where the user clicked a row action. | | **Clicked Row Action Name** | Text (String) | The name of the row action the user clicked (e.g., "Edit", "Delete"). | | **Clicked Row Action Key Field Value** | Text (String) | The key field value (usually record ID) of the row where the action was clicked. | > **Example:** A row action called "Delete" is triggered. Use a **Decision** element to check if **Clicked Row Action Name** equals "Delete", then use a **Delete Records** element with **Clicked Row Action Key Field Value** as the record ID. ### Table Metadata | Output variable | Type | What it returns | | ------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | **Number of Records** | Integer | The total number of records currently loaded in the table. Useful for displaying a count or making decisions when the table is empty. | | **Button Save Clicked** | Boolean | Returns `true` if the user clicked the Save button during inline editing. Use this to conditionally run save logic only when the user actually saved. | | **Button Cancel Clicked** | Boolean | Returns `true` if the user clicked the Cancel button during inline editing. Use this to skip save logic or show a different message. | > **Example:** After the screen, add a **Decision** element that checks if **Button Save Clicked** is `true`. If yes, proceed to update records. If **Button Cancel Clicked** is `true`, skip the update and show a confirmation message that no changes were saved. {% hint style="info" %} #### **Which output should I use for selected rows?** * Need to loop through records or update them? โ†’ **Selected Rows** (record collection) * Need just the IDs to pass to an Apex action or subflow? โ†’ **Selected Rows Key Field Value** (text collection) or the comma/semicolon-separated versions * Only allowing single selection? โ†’ **First Selected Row** (single record) {% endhint %} *** ## Troubleshooting | Problem | Cause | Fix | | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | The table shows nothing at runtime, but rows appear in the Component Builder preview | The flow variable feeding the **Records** input is empty when the screen loads โ€” the **Get Records** element hasn't run yet, or the variable was reset earlier in the flow. | Place the **Get Records** element before the screen element, and confirm the collection variable is populated by adding a temporary Display Text or Debug element before the Data Table screen. | | The table shows nothing at runtime, but rows appear in the Component Builder preview | The Data Source is set to **Query** and the filters in the **Query** panel are too restrictive, or reference a flow variable (like `{!recordId}`) that isn't set at runtime. | Open the **Query** panel in the **Properties** tab, remove filters one by one, and confirm rows appear. Re-add them and verify each variable used in a filter is populated at the screen step. | | One or more columns show empty cells, even though the field has a value on the record | The running user has no Read access to that field (Field-Level Security). | Go to **Setup โ†’ Object Manager โ†’ \[Object] โ†’ Fields & Relationships โ†’ \[Field] โ†’ Set Field-Level Security**. Set the field to **Visible** for the user's profile or permission set. As a temporary workaround, you can enable **Query System Mode** or **Strip Inaccessible Fields** in the **Query** panel โ€” but understand the security trade-off. | | The pencil icon doesn't appear on a column, even though **All Columns Editable** is on | The field is not editable in Salesforce โ€” it's a formula, roll-up summary, auto-number, or system field, or the running user has Read-Only Field-Level Security on it. | Try editing the same field on a standard Salesforce record page. If it can't be edited there, it can't be edited in the Data Table either. If it's an FLS issue, grant **Edit** access on the field. | | The pencil icon doesn't appear on any column | **Read Only** is toggled on at the component level. This overrides the editable setting on every column. | Open the **Properties** tab and turn **Read Only** off. | | The pencil icon doesn't appear on a specific column | The column type doesn't support inline editing (for example: image, progress bar, progress circle, QR code, URL image). | Switch to an editable type (text, number, date, picklist, lookup, etc.) in the **Columns** configuration, or use a row action that opens a separate edit screen. | | Saving an inline edit fails with the error "**Impossible to update a record that does not exist. The Id is undefined for this row**" | The `Id` field isn't part of the records collection. The Data Table needs an `Id` on every row to save back to Salesforce. In **Query** mode, `Id` is included automatically โ€” in **Variables** mode, the upstream Get Records or Apex action may not have returned it. | Confirm the Get Records element returns `Id` (don't restrict the field list without including it). If the records come from a custom Apex invocable action, make sure the returned collection includes `Id`. | | Saving an inline edit fails with a red "An Error Occurred!" toast and the row shows a warning icon | A validation rule, a missing required field, or denied Edit access on a modified field. The exact Salesforce error is shown when you hover the warning icon at the start of the row. | Hover the warning icon to read the field-level error. If it's a permission issue, grant **Edit** on the field. If it's a validation rule, fix the rule or fill the missing field earlier in the flow. If a required field on the record is empty, populate it through an update step before the Data Table screen. | | The flow shows "**Please select minimum 1 row.**" and the user can't move forward | **Required** is on, but the user hasn't selected any row through the checkbox column. | Either ensure rows can be selected (turn **Hide Checkbox Column** off and set **Max Row Selection** above 0), or turn **Required** off if selection isn't truly mandatory. Note that **Required** is ignored when the checkbox column is hidden โ€” users only get blocked when the checkboxes are visible but unused. | | **Edited Rows** output variable is empty after the user saved their changes | A **Save** interaction of type **Update Records**, **Datatable Update Records**, or **Upsert Records** is wired on the component. When one of these interactions is present, the Data Table delegates the save to the interaction, and **Edited Rows** is filled only after that interaction succeeds. | Either remove the interaction (the Data Table saves records on its own), or finish wiring the interaction with field assignments that match the **Records SObject Mapping**. **Edited Rows Full Data** and **Edited Rows Serialized** are also available if you only need a serialized version. | | **Selected Rows** output variable returns nothing in the next screen | The user didn't tick any checkbox before clicking Next, or the output variable's SObject type doesn't match the **Records SObject API Name** in the component. | Add a **Decision** element after the screen to handle the empty case, and confirm the output variable's SObject type matches the source object. For Query mode, you can also read **Selected Rows Key Field Value** (a list of IDs) and re-query in the next step. | | Search returns no results, even though the value is clearly visible in the table | The **Search Fields** list is empty AND no column has **Searchable** turned on individually. Without one of the two, the search bar has no fields to look in. Time-type columns are also excluded from search. | Add field API names to **Search Fields** (e.g. `Name`, `Account.Name`), or turn **Searchable** on for individual columns in the **Columns** configuration. For a quick setup, toggle **Allow Search on All Columns**. | | New rows added through an **Upsert Records** interaction never reach Salesforce | The **Key Field** in **Records SObject Mapping** points to a field other than `Id`, and the flow pre-fills that field on the new rows. The Data Table identifies new rows by an internal marker on the Key Field โ€” when that marker is missing, the row is treated as an existing record and the upsert tries to update something that doesn't exist. | Leave **Key Field** unset (defaults to `Id`) when using **Upsert Records**. Only set a custom Key Field when the table is read-only or used for selection without inline editing. | | The list jumps back to page 1 after every save | Expected behavior in **Query** mode. After a successful save, the Data Table re-runs the query to pick up server-side changes (formula recalculations, trigger updates, validation rules). The current page is preserved, but the loader appears briefly. | If the loader is visually disruptive, toggle **Suppress Bottom Bar** on. The reload itself is intentional and shouldn't be removed โ€” it ensures the user sees the actual saved state. | *** ## Learn More {% embed url="" %} {% content-ref url="/pages/divgiMwywmBYP2Nk050I" %} [Tips and Tricks](/flow/tutorials/components/data-table/tips-and-tricks.md) {% endcontent-ref %}
Unique Features of the Avonni Data Table Component. ๐Ÿ”น [**Inline Editing**](broken://pages/1rtcYLzIJgtQvpyXo9u8): Modify data directly within the table without navigating away. ๐Ÿ”น [**Display Lookup Fields**](/flow/tutorials/components/data-table/displaying-record-name-field-as-a-link.md): These are rendered as clickable links directing to the corresponding records. ๐Ÿ”น [**Advanced Data Formatting**](#formatting-with-data-type): Customize data presentation with formats like QR Code, Progress Bar, and Badge. ๐Ÿ”น [**Sortable Data**](#4-sort): Organize your data effortlessly with a simple click on column headers. ๐Ÿ”น [**Custom Column Width**](#3-columns-widths): Adjust the width of your columns to fit your content better. ๐Ÿ”น [**Row Actions**](/flow/tutorials/components/data-table/creating-row-actions.md): Execute predefined functions directly from each data row. ๐Ÿ”น [**Pagination**](#5.-pagination): Navigate through data pages for enhanced viewing. ๐Ÿ”น [**Infinite Scrolling**](/flow/tutorials/components/data-table/tips-and-tricks/activate-infinite-scrolling.md): Scroll endlessly and watch more data load dynamically. ๐Ÿ”น [**Data Filtering**](#8.-filtering): Search and view only what you need by applying data filters. ๐Ÿ”น [**Update Records Interaction**](/flow/component-builder/interactions-panel/update-records.md): Engage with and modify records seamlessly. ๐Ÿ”น [**Copy Records Interaction**](/flow/component-builder/interactions-panel/copy-records.md): Duplicate records effortlessly, straight from the table. ๐Ÿ”น [**Integrated Header**](#2.-header): A unified header that makes your table look polished. ๐Ÿ”น [**Selective Searchability**](#set-fields-as-searchable-without-displaying-them.): Set specific fields as searchable, even if they're not displayed. ๐Ÿ”น [**Query Data Source**](/flow/component-builder/data-sources/query.md): Visually create dynamic, real-time, detailed queries with no code.
Data Table Component Builder The Component Builder lets you easily adjust the Data Table, such as properties, interactions, and styling settings. This customization means you can modify your Data Table look and its operation, creating a practical and visually clear way to manage data. 1. **Template Gallery**: Access a variety of preconfigured data table templates, designed for easy deployment and optimized user experience. 2. **Undo/Redo**: Effortlessly correct mistakes or revisit changes 3. **Full Height**: Optimize visibility with 'Full Height' setting, ensuring Data Table utilizes entire screen height and activates infinite scrolling. 4. **Pull to Boundary**: Optimize space with 'Pull to Boundary'; extends Data Table to every edge, reducing unwanted white space. 5. **All Columns Settings**: Activate 'All Column Settings' for universal configuration, superseding individual column preferences. 6. **Copy/Paste**: Duplicate and transfer settings within the Data Table component to another Data Table on your screen flow. 7. **Properties Tab**: Comprehensive customization of all Data Table component settings and properties. 8. **Interactions Tab**: Configure and manage actionable interactions. 9. **Style Tab**: Customize the appearance and aesthetics of your Data Table, enhancing visual appeal and usability. 10. **Fields selection**: Choose and drag fields onto the canvas, optimizing use with Variable or Query Data Source settings. 11. **Data Table Preview**: Quickly visualize and modify with 'Data Table Preview': drag fields and fine-tune key settings effortlessly.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.avonnicomponents.com/flow/flow-components/data-table.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.