LogoLogo
HomepageYouTube ChannelInstall from the AppExchange
  • Home
  • Dynamic Components
  • Flow Components
  • Experience Components
  • Projects
  • 👋Welcome
  • Getting Started
    • Product Tour
    • Quickstart Guide
    • Learn the Basics
    • Installation & Licenses management
    • Flow vs. Dynamic Components
    • Integrating with Experience Cloud
  • Tutorials
    • Videos
    • Projects Tutorials
    • Components Tutorials
      • Alert
        • Create a custom branding alert
        • Create an error alert dismissible
      • Avatar
        • Create an avatar with actions
        • Create an avatar with details
      • Avatar Group
        • Display a list of contacts related to an account
        • Display a list of sharing users related to the record
      • Barcode
        • Generating and Displaying Barcodes for Product Codes
      • Biometrics
        • 101 Tutorial
      • Button
        • Customizing Flow Navigation Buttons
        • How to Add a "Cancel and Close" Button
        • How to Open Flows from Buttons
      • Button Groups
        • Identifying Clicked Buttons
      • Button Menu
        • How to change dynamically Avonni Button Menu Icons
      • Calendar
        • Calendar 101 Tutorial
        • How to Connect Multiple Data Sources to the Avonni Calendar
        • How to Customize Time Spans
        • How to Customize the Right-Click Menu
        • How to Add an Edit Action to Events
        • How to Add a New Event Button to the Avonni Calendar Header
        • How to Create Events by Dragging in the Avonni Calendar
        • How to Reschedule Events with Drag and Drop
        • How to Color-Code Calendar Entries in the Avonni Calendar
        • Using a variable Data Source
        • Using a Query Data Source
      • Carousel
        • Build a Related Products Carousel
      • Combobox
        • Implement Dependent Picklists in Comboboxes
        • How to Dynamically Enable/Disable Dependent Picklists
        • Using Multi-Select Comboboxes with Reactive Formulas
      • CSV Parser
        • 101 Tutorial
      • Data Table
        • Adding Filters
        • How to add Images onthe Data Table
        • Creating Row Actions
        • Displaying a Record as a QR Code
        • Displaying Record Name field as a link
        • Learn the Basics
        • Making a field editable
        • Setting Up Data Export
        • Tips and Tricks
          • Activate infinite scrolling
          • Creating an action from a button or a link
          • Customizing the Badge Color using a formula
          • How to Grayscale Header Actions Dynamically in Avonni Data Table
          • How to Conditionally Color Cells
          • Enabling auto-refresh on the Data Table when pressing a button
          • Handling formula text field
          • How to set column visibity
          • Passing multiple record IDs to another flow
          • Data Table Editor
      • Date Picker
        • Display a date picker with Marked Dates from a Get Records
      • Date Time Picker
        • How to create Collection Variables for StartDateTime and EndDateTime
        • How to Block Out Times
      • Delay Interaction
        • Creating a Confetti Celebration on the Final Screen
        • Launch a flow dialog without a screen
      • Dual Listbox
        • Display contacts with custom icons
        • Accounts list group by industry
      • Expandable Section
        • How to add components into an expandable section
      • Header
        • Building Engaging Card Headers
        • Crafting a Profile Header
        • Adding Action Buttons to Headers
        • Adding a Background Image to Your Header
      • Input Pen
        • Add the custom Toolbar
        • How to Store Input Pen Drawings as Attachments in Salesforce
      • Kanban
        • 📹Introduction
      • List
        • Create a grid list with images
        • Create a sortable list
        • How to Reorder Items and Update Records
        • Vertical List with Actions
      • Navigation
      • Map
        • Customize the Map Marker
        • Visualizing Account Information on a Map
      • Metric
        • 📹Introduction
      • Microphone
        • Save the Microphone recording file as an attached on a record
      • Progress Indicator
        • Creating a Universal Dynamic Progress Step Collection
        • How to Change the Appearance of Your Progress Indicator using a variable
        • Error Handling
      • QR Code
        • Generate a QR Code from a record field
      • Record Detail
        • Using the Record Detail with Reactive Screens
      • Scoped Notification
        • Display message based on a value
      • Text Area
        • TextArea issue with max length when clicking on the next button
      • Tree
        • Build a Tree View with Dynamic Record Details
      • Timeline
        • Assigning multiple source collection to the Timeline
        • Customizing Date Format in the Timeline Component using Luxon
        • Create a horizontal activity timeline
        • Display Tasks
        • Perform actions on selected tasks
      • Vertical Visual Picker
        • Adding sub-items
        • Display a list of online contacts
    • Interactions
      • Enabling auto-refresh for queries after the Flow Dialog ends
      • Creating a Confetti Celebration on the final screen
      • How to create an interaction to navigate to an object
      • How to create an interaction to a record page
      • How to create an interaction to open another flow
      • How to pass an Input Variable from One Flow to Another
      • How to setup an Open Flow Panel interaction
    • Reactive Query Tutorials
      • How to make Data Tables Reactive
      • Build a reactive Data Table Using Dependent Picklists
      • Building a Dynamic Metrics Dashboard with the Data Table
      • How to build a reactive 'Quarterly Opportunity Tracker' component
      • How to Create a Combobox-Filtered Data Table
      • Create a Dynamically Linked Account-Contact View
      • Troubleshooting
    • Tips and Tricks
      • Copy / Paste a component settings
      • Create a link to the record using the href attribute
      • Create a variable and use it in a component property
      • Data Table
      • Hide Standard Header and Footer in a flow
      • How to pass your current RecordID in your screen flow
    • Platform Events
      • Configuration tutorial
  • Flow Components
    • Explore All Components
    • Alert
    • Audio Player
    • Avatar
    • Avatar Group
    • Barcode
    • Barcode Scanner
    • Biometrics
    • Blockquote
    • Button
    • Button Group
    • Button Icon
    • Button Menu
    • Calendar
    • Carousel
    • Chart
    • Chip Container
    • Combobox
    • Color Picker
    • CSV Parser
    • Date Picker
    • Data Table
    • Date Time Picker
    • Delay Interaction
    • Document Scanner
    • Dual Listbox
    • Expandable Section
    • Formatted Address
    • Formatted Name
    • Formatted Value
    • Header
    • Hero Banner
    • Icon Picker
    • Image
    • Input Choice Set
    • Input Choice Set Grid
    • Input Counter
    • Input Date Range
    • Input Pen
    • Illustration
    • Interaction service
    • Kanban
    • List
    • Map
    • Metric
    • Microphone
    • Navigation
    • NFC Scanner
    • Pill Container
    • Progress Bar
    • Progress Circle
    • Progress Indicator
    • Progress Popover
    • QR Code
    • Rating
    • Record Detail
    • Scoped Notification
    • Separator
    • Slider
    • Tabs
    • Text Area
    • Timeline
    • Tree
    • User Location
    • Vertical Visual Picker
    • Visual Picker
    • Visual Picker Link
    • Video Player
    • Welcome Mat
  • Component Builder
    • Overview
    • Properties Pane
    • Interactions Pane
      • Copy Records
      • Download
      • Export To
      • Fire Confetti
      • Flow Navigation
      • Navigate
      • Show Toast
      • Open Alert Modal
      • Open Confirm
      • Open Flow Dialog
      • Open Flow Panel
      • Update Records
      • Refresh Query
      • Refresh All Queries
      • Open Quick Action
    • Style Pane
    • Component Templates
    • Layout and Customization
      • Alignment controls
      • Copy / Paste component settings
      • Margin / Padding
      • Pull To Boundary
      • Undo / Redo
  • Data Sources
    • Understanding Data Sources
    • Manual
    • Variable
    • Query
    • Query VS Variable
    • Picklist
  • Actions
    • Overview
    • Data Manipulation and Transformation
      • Convert Lead
      • Create file
      • Split Text to Text Collection
      • SObject Collection Math
      • SObject Collection Join
      • Get Record from SObject Collection
      • SObject Collection to Activity Timeline Items
      • SObject Collection to Calendar Marked Date Collection
      • SObject Collection to Scheduler Events
      • SObject Collection to Text Collection
    • Data Conversion and Formatting
      • Text Collection Get Value
      • Get Value from String Collection
      • Number Collection Get Value
      • Join Text Collection
      • Format Text in SObject Collection
      • Format Text Collection
      • Text Collection to Combobox Options
      • Text Collection to Dual Listbox Options
      • Text Collection to Progress Indicator Steps
    • UI & Navigation
      • New Avatar Action Collection
      • New Button Menu Item Collection
      • New Carousel Item Collection
      • New Combobox Option Collection
      • New Dual Listbox Option Collection
      • New Header Action Collection
      • New Header Avatar Action Collection
      • New List Action Collection
      • New Navigation Item Collection
      • New Progress Indicator Step Collection
      • New Progress Popover Step Collection
      • New Slider Custom Label Collection
  • Help
    • Performance Guide
    • How do I contact support?
    • How do I report Bugs?
    • Troubleshooting
    • Release Process
  • Miscellaneous
    • Live use cases examples
    • Release Notes
    • Salesforce Flow Limit
    • Security
Powered by GitBook
LogoLogo

Company

  • About Us
  • Pricing

Policies

  • Privacy Policy
  • Terms of Service
On this page
  • Tutorials
  • Core functionality
  • Enhancing Data Display & Interaction
  • Advanced Features
  • Tips and Tricks
  • Explore Reactive Queries
  • Displaying and Managing Data
  • Choose Your Data Source
  • Map Your Data to Columns
  • Customize Columns
  • Make your Data Table Editable
  • Two Ways to Edit
  • Which Editing Mode Should You Use?
  • Setting up the save interaction
  • Supported Objects for Inline Editing
  • Tutorial: Making a Field Editable
  • Row Actions
  • Creating Row Actions
  • Making the Row Actions functional
  • Tutorial: Creating Row Actions
  • Group Your Data
  • How It Works
  • How to Enable Group By
  • Customize Grouped Data
  • Change the Group Order
  • Linkify values
  • Video Tutorial
  • Other Settings
  • General Properties
  • Mobile Responsiveness
  • Header
  • Columns Widths
  • Column Sorting
  • Pagination
  • Pill Container
  • Filter Data
  • Ways to Add Filters
  • Filters Options
  • Accessing the Filtering Menu
  • Customize the Filter Panel
  • Dynamic Picklist Filters
  • Search
  • Making a field searchable
  • Set fields as searchable without displaying them
  • Set a default search value
  • Styling
  • General Styling
  • Data Table Cell Styling
  • Header Styling
  • Additional Elements
  • Interactions
  • Learn More

Was this helpful?

  1. Flow Components

Data Table

The Avonni Data Table is a powerful tool for showing and managing data in a table format within your Salesforce. It's like a supercharged spreadsheet you can customize and interact with in many ways.

Last updated 1 month ago

Was this helpful?

Tutorials

Learn how to fully utilize the power of the Avonni Data Table, an excellent component for managing and displaying data within Salesforce.

Core functionality

Enhancing Data Display & Interaction

Advanced Features

Tips and Tricks

Take your Data Tables to the next level with these handy tips and tricks.

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.


Displaying and Managing Data

Choose Your Data Source

Available Data Sources

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 that the data table reflects the correct and 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.

In this section, you'll learn how to:

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.

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

Displaying Fields from Lookup Relationships

The Avonni Data Table lets you show information from related records, like displaying the Account Name on 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 is set to use 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

In this section

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.

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.

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.

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.

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

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

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.

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.

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.

This step is critical for making inline editing functional. So, as you enhance your data table with inline editing capabilities, always integrate a save interaction to capture and store user modifications seamlessly. 👇

Learn more about making a field editable.

Supported Objects for Inline Editing

Tutorial: Making a Field Editable


Row Actions

Creating Row Actions

Row Actions enhance user engagement by providing a dropdown menu with additional options upon clicking a row. They offer a practical and interactive way to manage and interact with the data presented in the table.

Making the Row Actions functional

Tutorial: Creating Row Actions


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.

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 your chosen column.

Example: If you group by "Language," you'll see sections for each distinct language, with all related data neatly grouped within those sections.

How to Enable Group By

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:

Option
Description

Hide Undefined Label

Hides groups labeled as 'undefined'.

Undefined Group Label

Sets a custom label for undefined groups.

Non Collapsible

Makes grouped sections non-collapsible.

Collapsed

Starts groups in a collapsed state.

Display Group Rows Count

Shows the count of rows in each group.

Show Empty Groups

Displays groups even if they have no data.

Direction

Specifies the direction of the order of the group by.

Linkify

Makes 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


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.

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 based on the data provided to the table and 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.

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.


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 make it more visually appealing or to represent the table's purpose.

  • Is Joined: This option removes the bottom border of the header, 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


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.

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"


Column Sorting

You can set the sorting options for columns. The default sorting direction is applied to sorted columns.

Each column can be sortable by activating the sortable toggle directly from the column properties.


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


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.

Setting
Description

Label Field

Determines the field name used for the pill label.

Sortable

Enables sorting within the pill container.

Single Line

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

Filters Options

The Avonni Data Table offers three filtering options typ, each designed to accommodate different user preferences and screen sizes.

Filter Type
Illustration
Description

Horizontal

These filters appear directly above the data table, laid out in a horizontal row.

Popover

This option allows filters to be hidden behind clickable icons or buttons; when clicked, a small, floating interfac appears, containing the filter options.

Side Panel

Filters 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 searchable.

Things to Keep in Mind About Searchable Fields

Lookup Fields:

  • You can search lookup fields using the Query Data Source option. This means you can use the search box to find records based on the values in your lookup fields.

  • You cannot search lookup fields using the Variable Data Source option. However, we're working on adding this functionality soon!

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.

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.

Learn More

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 text color of the header title.

    • Font Size: Adjust the font size of the header title.

    • Font Style: Choose a font style for the header title (e.g., normal, italic).

    • Font Weight: Set the font weight of the header title (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.


Learn More

Unique Features of the Avonni Data Table Component.

🔹 Inline Editing: Modify data directly within the table without navigating away.

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.

The first step in configuring the Avonni Data Table is establishing . This crucial element determines the origin and organization of your data within the table. By defining the Data Source, you set which data to display and how it's structured, ensuring the table functions correctly and meets your specific requirements for data presentation.

: Connect your Salesforce data to the columns in your table.

: Show information from lookup relationships (e.g., display the Account Name on a table of Contacts).

Color & Formatting Cells: to learn more

Here's the for the inline editing.

After you create row actions, they won't do anything yet. To make them functional, you need to set up .

Use the component: For a more responsive solution, consider using the Avonni List component. This component that adjust the display based on screen size. Combine this with Salesforce's component visibility settings to show the List only on mobile devices.

Tutorial:

Set a specific fixed width for this column.

Color & Formatting Cells: to learn how to do it.

Complete List of Actions: This page provides a you can add and how to configure them.

🔹 : These are rendered as clickable links directing to the corresponding records.

🔹 : Customize data presentation with formats like QR Code, Progress Bar, and Badge.

🔹 : Organize your data effortlessly with a simple click on column headers.

🔹 : Adjust the width of your columns to fit your content better.

🔹 : Execute predefined functions directly from each data row.

🔹 : Navigate through data pages for enhanced viewing.

🔹 : Scroll endlessly and watch more data load dynamically.

🔹 : Search and view only what you need by applying data filters.

🔹 : Engage with and modify records seamlessly.

🔹 : Duplicate records effortlessly, straight from the table.

🔹 : A unified header that makes your table look polished.

🔹 : Set specific fields as searchable, even if they're not displayed.

🔹 : Visually create dynamic, real-time, detailed queries with no code.

Add Clickable Buttons

Show or Hide Columns Based on Conditions

How to color-code Badges

How to Grayscale Header Actions Dynamically

How to refresh the Data Table by pressing a button

How to use formulas in Text Fields

How to send multiple Record IDs to Another Flow

🎥 7 Tips and Tricks on the Avonni Data Table

Reactive Query Tutorials
the Data Source

Manual

Ideal for static or predefined data.

Variable

Great when your table data is linked to variable collections in your flow.

Query

Perfect for tables reflecting dynamically changing data or real-time updates.

check this tutorial
How to add Images onthe Data Table
Displaying Record Name field as a link
Displaying a Record as a QR Code
list of all the supported objects
Making a field editable
Creating Row Actions
How to Grayscale Header Actions Dynamically in Avonni Data Table
check this tutorial
full list of the actions
Tips and Tricks
Display Lookup Fields
Row Actions
Infinite Scrolling
Update Records Interaction
Copy Records Interaction
Query Data Source
Set up data mappings
Display fields from related records
Access Column Settings
Customize Column Properties
Tailor Each Column
Currency-Specific Formatting
Enhance Data Presentation
Required Fields
Explore More
Advanced Data Formatting
Sortable Data
Custom Column Width
Pagination
Data Filtering
Integrated Header
Selective Searchability
Avonni List
interactions
has built-in responsive settings
Cover

Data Table 101

Cover

Guided Tutorial by Yumi Ibrahimzade

Cover

How to Conditionally Color Cells

Cover

Adding Images

Cover

Displaying a record as a QR Code

How to create a new column by dragging and dropping fields.
How to create a new column using the "Add Columns" button
Inline editing feature activation with the pencil icon enabled
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.
Avonni Data Table with the Group By in Action
Final result
How to Apply Field Filters in the Data Table Without Displaying the Fields
Cover

Add fields as filters

Cover

Making a field Editable

Cover

Setting up Data Export

Cover

Implementing Bulk Edit