Comment on page

Data Table

Meet the most complete and powerful Data Table for Salesforce.

​
The Data Table is also available as an Experience Cloud Component.
📘 Overview
The Avonni Data Table is the most complete and powerful data table available for Salesforce. It is adept at managing large datasets and handling tasks like scrolling, sorting, and searching. This high-performance component displays data efficiently and offers extensive customization options. With its robust capabilities, the Avonni Data Table is an essential asset for any Salesforce user seeking to streamline and optimize their data interaction experience
🎓 Tutorials
The Avonni Data Table stands out as one of the most comprehensive and robust data tables available for Salesforce, offering a wide array of functionalities to enhance your data handling capabilities. To help you fully harness its potential, we've compiled a series of detailed tutorials 👇.
Data Table
🤜 Essential at a glance
This section highlights 3-4 of our most popular and informative articles, each delving into the data table's most utilized settings and options. Given the extensive range of customization possibilities the Avonni Data Table offers, these handpicked articles provide a concise yet comprehensive overview of the settings that users find most beneficial. 
​Configuring Data Table Columns​
​Adding Row Actions​
​Activate Inline Editing​
👍 Configuring the Data Table
Using the Data Source
The first key step in configuring the Avonni Data Table is establishing the Data Source. 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
Available Data Sources
Data Source Type
Use Case
When to Use
 Manual
Ideal for static or predefined data.
For tables without the need for updates or dynamic changes, like fixed lists.
Variable
Perfect for tables reflecting dynamically changing data or real-time updates.
When table data is linked to variable collections in Salesforce, such as Get Records Collection.
​Query​
Optimal for managing large data sets with hundreds of thousands of records, and ideal for complex data retrieval from multiple sources or specific criteria.
For tables displaying data from multiple sources or based on complex queries.
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.
Using the Data Mappings
The Data Mappings feature in the Avonni Data Table Component is essential for correctly displaying data in your table, especially when using variable data sources like 'Get Records' or 'Query' mode from Salesforce. This feature ensures that the data table accurately represents the information from Salesforce and connects specific fields from your Salesforce data to the appropriate columns in the data table.
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: Select the corresponding Salesforce object using the Query mode. Upon selection, 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.
Configuring columns
Configuring columns in the Avonni Data Table is key to creating an effective and tailored data display. Here's a straightforward approach to customizing your table columns:
1.Access Column Settings:
Each column associated with your Salesforce data appears listed in the Data Mappings section.
By clicking on a specific column in this section, the property panel for that particular column will open.
​
2.Customize Column Properties:
The property panel allows you to access various settings for the selected column.
Here, you can adjust various attributes and behaviors of the column, such as its width, alignment, sorting capability, text wrapping, and more.
3.Tailor Each Column:
This flexibility allows you to tailor each column based on the nature of the data it represents. For instance, a column displaying dates might have different formatting needs than one showing monetary values.
You can also set filters, define editable fields, and adjust visibility settings, ensuring each column functions precisely as needed for your specific use case.
4.Enhanced Data Representation:
By taking advantage of these customization options, you can enhance the overall effectiveness of your data table.
This approach ensures that your table displays the correct data and presents it in the most user-friendly and context-appropriate manner.
List of available Data Type 
Action: Dropdown menu with various actions.
Avatar: Shows a user or profile picture.
Badge: Shows a badge icon or label.
Boolean: Shows a checkmark icon for 'true' values; empty for 'false' values.
Button: A clickable button.
Button Icon: Button with an icon.
Color Picker: Tool to choose colors.
Counter: Shows a numerical count.
Currency: Shows money values.
Date: Shows date and time, formatted for the region.
Date Local: Shows a locally formatted date.
Email: Displays email addresses as clickable links.
Location: Shows coordinates (latitude and longitude).
Number: Displays numerical values.
Percent: Shows values as percentages.
Phone: Clickable phone number.
Progress Bar: Horizontal bar showing progress.
Progress Circle: Circular graphic showing progress.
Progress Ring: Another style of a circular progress display.
QR Code: Scannable QR code.
Rating: Star or point-based rating system.
Rich Text: Displays formatted text with styles.
Slider: Adjustable slider bar.
Text: Plain text display.
Toggle: Switch-style button for on/off settings.
URL: Clickable web link.
Explore More: Further Reading and Resources
Adding Images
Displaying Record Name field as a link
Displaying a Record as a QR Code
In summary, the Data Mappings feature in the Avonni Data Table doesn't just link your Salesforce data to the table columns; it also opens up a world of customization for how each of these columns functions and appears, making your data table a powerful and adaptable tool in your Salesforce environment.
Making a field editable
Enable direct editing in the Avonni Data Table to streamline data updates and enhance user interaction, significantly improving efficiency and flow responsiveness.
Go to the Data Mapping section
Click on the column of the field you want to make editable
Scroll down and toggle the Editable attribute.
Lookup and Record Type fields are editable. 
Due to Salesforce API restrictions, fields within the Event and Task objects are not editable. As a result, you won't be able to modify and save field information for these unsupported objects when using the Inline Editing feature in the Data Table.
Here's the list of all the supported objects for the inline editing.
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 vital for making inline editing functional and reliable. 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
Read the tutorial below 👇
Making a field editable
Create row actions
Row Actions enhances user engagement by providing a dropdown menu with additional options upon clicking a row. Row actions offer a practical and interactive way to manage and interact with the data presented in the table.
Learn more about creating row actions.
Read the tutorial below 👇
Adding Row Actions
How to create an interaction to open another flow
Enabling auto-refresh for queries after the Flow Dialog ends
🎚️ Other Settings
General Properties
Setting
Description
Use Case in Salesforce
Hide Table Header
Hides the table header when enabled.
Useful for minimalistic designs where header information is not needed.
Hide Checkbox Column
Removes the checkbox column used for row selection.
Ideal when row selection is not required, simplifying the table view.
Show Row Number Column
Displays row numbers in the first column if enabled.
Helps in easily referencing or organizing rows, especially in large datasets.
Required
Makes row selection mandatory for users.
Ensures essential data is selected, especially in decision-making processes.
Max Row Selection
Sets the maximum number of rows that can be selected.
Limits selection for actions needing restricted inputs, like batch processing.
Suppress Bottom Bar
Hides the footer with Save and Cancel buttons during inline editing.
Streamlines the interface during editing, reducing visual clutter.
Show Number of Items Selected
Displays the count of selected items if enabled.
Useful in tracking the number of entries being worked on, enhancing user awareness.
Read Only
Prevents editing of records, making the table read-only.
Essential for viewing data without the risk of unintended modifications.
Customizing the Header Appearance
The Header section gives you control over the appearance and functionality of your Data Table header.
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. 
Disable Actions
The "Disable Actions" feature makes the action menu inactive while still visible. 
Customizing Columns Widths
Columns' width can be customized if needed. Min and Max values can be set in pixel by default for all columns.
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"
Set a specific fixed width for this column.
​
Configuring Column Sorting Options
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. 
​
​
Setting Up 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
Implementing Pill Container Display
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
Setting
Description
Use Case
Label Field
Determines the field name used for the pill label.
Useful for displaying specific data as pill labels, enhancing clarity.
Sortable
Enables sorting within the pill container.
Allows users to rearrange pills, facilitating better organization.
Single Line
Restricts the pill container to a single line.
Keeps the display compact and streamlined, ideal for limited spaces.
This table outlines the key settings available for the Pill Container Display in the Avonni Data Table, detailing their functionalities and typical use cases to enhance user experience in Salesforce
Making a field filterable
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.
How to Apply Field Filters in the Data Table Without Displaying the Fields
Configuring the Popover Filter Menu
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
Configuring Search Options
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 automatically searches using this specified term.
🪄 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.
🚀 Learning more
🤜
Tips and Tricks
Unique Features of the Avonni Data Table Component.
🔹 Inline Editing: Modify data directly within the table without navigating away.
🔹 Display Lookup Fields: These are rendered as clickable links directing to the corresponding records.
🔹 Advanced Data Formatting: Customize data presentation with formats like QR Code, Progress Bar, and Badge.
🔹 Sortable Data: Organize your data effortlessly with a simple click on column headers.
🔹 Custom Column Width: Adjust the width of your columns to fit your content better.
🔹 Row Actions: Execute predefined functions directly from each data row.
🔹 Pagination: Navigate through data pages for enhanced viewing.
🔹 Infinite Scrolling: Scroll endlessly and watch more data load dynamically.
🔹 Data Filtering: Search and view only what you need by applying data filters.
🔹 Update Records Interaction: Engage with and modify records seamlessly.
🔹 Copy Records Interaction: Duplicate records effortlessly, straight from the table.
🔹 Integrated Header: A unified header that makes your table look polished.
🔹 Selective Searchability: Set specific fields as searchable, even if they're not displayed.
🔹 Query Data Source: 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.
🎛️ Specifications
Attributes
Events
Styling Hooks
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.
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
​
🌟 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.

Data Source Type	Use Case	When to Use
Manual	Ideal for static or predefined data.	For tables without the need for updates or dynamic changes, like fixed lists.
Variable	Perfect for tables reflecting dynamically changing data or real-time updates.	When table data is linked to variable collections in Salesforce, such as Get Records Collection.
Query	Optimal for managing large data sets with hundreds of thousands of records, and ideal for complex data retrieval from multiple sources or specific criteria.	For tables displaying data from multiple sources or based on complex queries.

Setting	Description	Use Case in Salesforce
Hide Table Header	Hides the table header when enabled.	Useful for minimalistic designs where header information is not needed.
Hide Checkbox Column	Removes the checkbox column used for row selection.	Ideal when row selection is not required, simplifying the table view.
Show Row Number Column	Displays row numbers in the first column if enabled.	Helps in easily referencing or organizing rows, especially in large datasets.
Required	Makes row selection mandatory for users.	Ensures essential data is selected, especially in decision-making processes.
Max Row Selection	Sets the maximum number of rows that can be selected.	Limits selection for actions needing restricted inputs, like batch processing.
Suppress Bottom Bar	Hides the footer with Save and Cancel buttons during inline editing.	Streamlines the interface during editing, reducing visual clutter.
Show Number of Items Selected	Displays the count of selected items if enabled.	Useful in tracking the number of entries being worked on, enhancing user awareness.
Read Only	Prevents editing of records, making the table read-only.	Essential for viewing data without the risk of unintended modifications.

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.
Disable Actions	The "Disable Actions" feature makes the action menu inactive while still visible.

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.

Setting	Description	Use Case
Label Field	Determines the field name used for the pill label.	Useful for displaying specific data as pill labels, enhancing clarity.
Sortable	Enables sorting within the pill container.	Allows users to rearrange pills, facilitating better organization.
Single Line	Restricts the pill container to a single line.	Keeps the display compact and streamlined, ideal for limited spaces.

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.

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

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.

Last modified 2d ago