Avonni Flow Components
Get It on the AppExchangeUse Cases Gallery
Search
⌃K
Links

Data Table

Data tables display sets of data across rows and columns.

Overview

The Avonni Datatable Flow Screen Component lets you easily show and work with table data on a Flow screen. It can handle big datasets and allows for scrolling, sorting, and searching. You can also customize how the table looks and works.
This page walks you through:

Features

The Avonni Data Table component supports the following features:

Standard Salesforce Data Table VS Avonni Data Table

Features
Standard Datatable component
Avonni Datatable component
​
​
​
Lookup Fields that render as links to records
​
​
​
​
Row Selection
​
​
​
​
Advanced Data Formatting types
​
​
​
​
Sortable Data
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​

Properties

1. General properties

Hide Table Header

If present, the table header will be hidden.

Hide Checkbox Column

If present, the checkbox column will be hidden.

Show Row Number Column

If present, row number will be displayed.

2. Header

The Header section gives you control over the appearance and functionality of your Data Table header.
With the integrated header section in the Data Table, there's no need to use the separate Avonni Header component to create a table header. It's now directly built into the Data Table component, simplifying the building process.
Attribute
Description
Title
Define a meaningful title for your Data Table. It introduces the timeline's content and is a key element of the visual hierarchy.
Caption
Use the caption field to add a brief description or supplementary information for your Data Table. This can be especially useful for providing context or additional details about the table data.
Icon
Add an icon to your header to enhance its visual appeal or to help convey the Data Table's purpose or content at a glance.
Is Joined
This property, when activated, gives the header a square, shadowless bottom border. This makes the header blend seamlessly with another component, making the Data Table appear as a continuous, unified element.
Action
Add interactive actions to your header to enable specific actions from the interaction pane. This provides additional functionality and enhances user engagement with the Data Table.
Visible Actions Buttons
The "Visible Actions Buttons" allows you to configure and display action buttons readily visible for each row in the table. This is in contrast to other hidden buttons that require user interaction to reveal.
Hide Actions
The "Hide Actions" feature in the Header Actions allows you to control the visibility of the action menu. The action menu, which usually contains table-level actions like adding, editing, or deleting records, will be hidden when this option is enabled.
Disable Actions
The "Disable Actions" feature makes the action menu inactive while still visible. When this attribute is enabled, the action menu, which generally provides table-level actions like adding, editing, or deleting records, will be grayed out and unclickable.

3. Columns Widths

Columns' width can be customized if needed. Min and Max values can be set in pixel by default for all columns.
Column width can be set individually for each column as follow:
  • 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
​
​

4. Sort

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

5. Pagination

The Pagination Options 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

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

7. Search Engine

The Search Engine options let you configure your search box option. You can customize a placeholder text and set your search box position.
The Search box will appear when at least one field is searchable.

How to make 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 will automatically start searching using this specified term.

8. Filtering

The Display as Popover option, when enabled, displays the filter menu as a popover instead of its default appearance. This provides a compact and discreet user interface, allowing users to access and apply filters without disrupting the overall layout.
Filtering option in action

Accessing the filtering option

  • Open the Component Builder
  • Scroll down to the Filtering Option section
  • Toggle the "Display as Popover" to activate the filtering option

How to make a field filterable

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.

Set filters for fields that aren't visible as columns.

🆕 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.
​
​

9. Data Source

The Data Source section allows you to create columns and associate data with your datatable. Data can be entered manually (manual) or dynamically (variable) by selecting the appropriate source collection.

Manual

With the Manual Data source, you are creating your columns and data set manually.

Variable

With the Variable Data Source, data is generated dynamically based on your flow resource.

Formatting with Data Type

The data table formats column cells based on the specified type. To ensure correct formatting, match the column type with the field type passed.
Valid data types and their supported attributes include
Some Data Types are only available when using a Variable data source
Name
Description
Action
Displays a dropdown menu with actions as menu items.
Avatar
​
Displays an avatar using the Avatar Component​
Badge
​
Displays a badge
Boolean
Displays the icon utility:check if the value is true, and a blank value otherwise.
Button
Displays a button
Button Icon
Displays a button icon
Color Picker
​
Displays a color picker using the Color Picker Component​
Counter
​
Displays a counter
Currency
Displays a currency
Date
Displays a date and time based on the locale
Date Local
Displays a date that is formatted based on the locale
Email
Displays an email address
Location
Displays a latitude and longitude of a location
Number
Displays a number
Percent
Displays a percentage
Phone
Displays a phone number
Progress Bar
​
Displays a progress bar
Progress Circle
​
Displays a progress circle using the Progress Circle Component​
Progress Ring
​
Displays a Progress Ring
QR Code
​
Displays a QR Code using the QR Code Component​
Rating
​
Displays a Rating using the Rating Component​
Rich Text
​
Displays a Rich Text
Slider
​
Displays a slider using the Slider Component​
Text
Displays text
Toggle
​
Displays a toggle
URL
Displays a URL
​
: Avonni exclusive data type.

Selecting a Key Field

The key-field attribute is required for correct table behavior. It associates each row with a unique identifier.

Interactions

From the interactions pane, you can define interactions when users interact with the Data Table. Interactions can be added: select an option or multiple ones (when multi-select is enabled).
  • Header Action: when pressing buttons actions.
  • Row Action: when selecting one of the row actions created on the Data Table.
  • Save: when pressing the Save button when the end-user is editing a field.
  • Cancel: when pressing the Cancel button.
You can add a complete list of actions to the Data Table.

Style

From the Style pane, you can customize styling attributes for the Slider component:
  • Margin: to customize the label that is displayed on top of the slider.
  • Size: to set a size for the Data Table.
  • Data Table: to customize background colors of the Data Table.
  • Pill Container: to customize the Pill Container Styling attributes.

Specifications

Attributes

Name
Type
Description
columns
Object[]
Array of the columns object that's used to define the data types
columnWidthsMode
String
Specifies how column widths are calculated. Set to 'fixed' for columns with equal widths
customLabel
​
​
defaultSortDirection
String
Specifies the default sorting direction on an unsorted columnSpecifies the default sorting direction on an unsorted column
displayAsLink
Boolean
To display the Record Name as a link with an automatic redirection.
editable
Boolean
Specifies whether a column supports inline editing.
editedRows
Object[]
Make the row editable.
filterable
Boolean
Specifies whether a column supports filtering.
fixedWidth
String
Specifies the width of a column in pixels and makes the column non-resizable.
hideCheckboxColumn
Boolean
If present, the checkbox column for row selection is hidden
hideDefaultActions
Boolean
If present, the column header default action is hidden
hideTableHeader
Boolean
If present, the table header is hidden
iconName
String
The SLDS name of the icon.
initialWidth
Integer
The width of the column when it's initialized
keyField
String
Required for better performance.
Associates each row with a unique ID
label
Text
The Text label displayed in the column header.
linkify
Boolean
Displays text using lightning:formattedText. This is the default data type.
name
Text
The name that binds the columns attributes to the associated data.
maxColumnWidth
String
The maximum width for all columns
maxRowSelection
Integer
The maximum number of rows that can be selected
minColumnWidth
String
The minimum width for all columns
placeholder
Text
Placeholder text in search field indicates expected input and guides user.
placeholderPosition
String
The position of the Search bar.
records
Object[]
The array of data to be displayed. The objects keys depend on the columns fieldNames
required
Boolean
Require a user to make at least one row selection before moving to the next step.
resizeColumnDisabled
Boolean
If present, column resizing is disabled
resizeStep
String
The width to resize the column when a user presses left or right arrow
rowNumberOffset
Integer
Determines where to start counting the row number
searchable
Boolean
Specifies whether the column records can be searched.
selectedRows
Object[]
Enables programmatic row selection with a list of key-field values
showPagination
Boolean
If present, the pagination is shown at the bottom of the table.
showPillContainerSelectedItem
Boolean
If present, the selected item is shown in a pill container.
showRowNumberColumn
Boolean
If present, the row numbers are shown in the first column
sortable
Boolean
Specifies whether the column can be sorted.
sortedBy
String
The column key or fieldName that controls the sorting order
sortedDirection
String
Specifies the sorting direction. Sort the data using the onsort event handler. Valid options include 'asc' and 'desc'
sourceField
String
The name that binds the columns attributes to the associated data.
suppressBottomBar
Boolean
If present, the footer that displays the Save and Cancel buttons is hidden during inline editing
type
String
The data type to be used for data formatting.
wrapTextMaxLines
Integer
This value specifies the number of lines after which the content will be cut off and hidden. It must be at least 1 or more
wrapText
Boolean
Specifies whether text in a column is wrapped when the table renders.

Events

Name
Description
cancel
The event fired when the Cancel button is pressed
save
The event fired when the Save button is pressed
rowAction
The event fired when the dropdown menu option is selected

Styling Hooks

No styling hooks are available.

Tips and Tricks

Name
Description
How to enable seamless browsing of large data sets without pagination.
How columns can be set as clickable buttons, allowing users to trigger actions or open related pages.
This guide helps you create an 'Export to' interaction in Avonni Data Table for exporting data to Excel or CSV.
How to make display a record name as a link.
This tutorial guides you to disable header actions when no records are selected, enhancing functionality and usability.
How to handle text formula fields, allowing users to apply formulas to text data and display results in columns.
How to enable direct in-table editing for efficient data management.
Use Avonni Data Table and Open Flow Dialog to select and pass multiple record IDs to another flow.

Tutorials

Possible Use Cases

Below are various examples highlighting how the Avonni Data Table can address your unique business needs.
Name
Description
Sales Pipeline Management
Sales reps can use Avonni Data Table to display a sorted list of potential deals in various sales pipeline stages. They can filter deals based on revenue, status, or owner and navigate the data easily with pagination.
Contact lists for marketing campaign
Marketers can use the data table to display a list of contacts for an upcoming marketing campaign. Each contact can link to the full Salesforce record for easy access. Action buttons next to each contact can allow for quick updates or removal from the campaign.
Inventory Management
A simplified table could display the status of various items in inventory. Hiding table headers and action columns can make the data more digestible at a glance for a warehouse manager.
Project Task Tracking
Project managers can see tasks listed by priority and status. The pill container option can be used to show team assignments. Sorting can help quickly identify overdue tasks or those approaching their due dates.
Customer Support Dashboard
Support agents can view a list of open customer tickets. The search engine options can be used to find tickets by customer name or issue type quickly. Selected tickets can be displayed in a pill container for easy reference during a shift.
Employee Directory
HR can build an employee directory where employee photos are displayed alongside names and titles. Employees can be sorted and filtered by department, role, or location.
Financial Directory
Finance teams can use the table to display complex financial data, such as quarterly earnings, budget allocations, or stock prices. Columns can be resized to accommodate lengthy financial terms or numbers.
Event management
Event coordinators can track all aspects of an event, such as attendee lists, vendor contacts, and scheduled dates. Actions can include emailing attendees or vendors directly from the table.
Training and Certification Tracking
HR can keep track of employee training and certification statuses. Progress bars can show how close an employee is to completing a training module, and dates can show when certifications expire.
​
Screen Components - Previous
CSV Parser
Next - Screen Components
Date Picker
Last modified 11d ago