Data Table
Last updated
Last updated
The Avonni Data Table component is a versatile and feature-rich tool for displaying tabular data on Salesforce Experience Cloud Sites. It offers extensive customization options for various data presentation needs, from primary data listing to more complex, interactive tables.
The Avonni Data Table is a Reactive Data Component
Name | Description |
---|---|
Learn to set up Avonni Data Table and display related contact details for current records. |
The Data Source section is where you connect the Avonni Data Table with your Salesforce data. You have two options.
Data Source Type | Description | Use Case |
---|---|---|
Manual Data Source | Manually input data into the data table. | Ideal for non-dynamic data, testing, and demos. |
Query | Create a query to auto-populate the table with Salesforce data. | Suited for dynamic, real-time, and large datasets. |
CMS Collection | Seamlessly display your CMS Collections within Data Tables for dynamic content updates. | Create automatically updating resource lists or news feeds. |
In Query mode, data is shown in batches of 25 records to maintain optimal site performance.
You bring your data table to life in the Data Mappings section by defining and customizing its columns.
Click on the 'Add Columns' button to select fields from your data source to display as columns in the data table.
This section determines what data is visible and how it is organized in your table.
Click on a column to access all the properties for that specific column.
Data Type: Adjust the field's display type (e.g., text, number, date) to ensure correct data representation.
Linkify: Enable linking of cell data to other records or URLs for quick navigation.
Cell Attributes: Customize cell alignment and icons for a more intuitive and visually appealing table.
Editable: Decide if a column should be editable directly within the table.
Filterable and Searchable: Enable filtering and searching capabilities on a per-column basis for efficient data management.
Hidden: Choose to hide certain columns, useful for sensitive or less relevant data.
Sortable: Allow users to sort data by the specified column.
Hide Default Actions: Opt to hide pre-set actions for a cleaner look.
Wrap Text: Enable text wrapping for better readability in narrow columns.
Set Column Width: Specify the width of each column for a balanced and organized layout.
Here's a guided interactive tutorial on adding row actions to the Data Table.
Hide Table Header
This option lets you remove the table header for a cleaner, more minimalistic look.
Hide Checkbox Columns
Enable this setting to hide the checkbox columns, typically used for row selection in multi-action scenarios.
Show Row Number Column
Activate this to display a column that enumerates each row, which is useful for easy data referencing.
Title and Caption
Customize the header with a title and a caption to provide context or summary information about the table data.
Icon Name and Size
Enhance the header with an icon, selecting its type and size for visual emphasis.
Is Joined
This setting determines whether the header visually connects with the body of the table, affecting the overall design.
Header Actions
Configure actions (add, delete, or custom functions) directly accessible from the table header.
Implement action buttons in the table header for adding new records, exporting data, or other custom actions, enhancing user interaction and efficiency.
Configure the interaction for when users press the header action button in the 'On Click' section. To understand how the 'Navigate' interaction operates, click here for more information.
Configure pagination settings, such as the number of items per page and pagination style, to manage how data is displayed and navigated in larger tables.
In Query mode, data is displayed in sets of 25 records to keep site performance optimal. Therefore, setting up pagination can be beneficial.
Placeholder: Set a text placeholder for the search box, guiding users on what they can search for.
Position: Choose the position of the search box within the table layout for optimal accessibility.
Default Search Value: Predefine a search value to filter the table data when it loads.
To display the search box, at least one column must be marked as 'Searchable'.
Name | Description |
---|---|
Hide Table Header | Toggle to hide the table's header |
Hide Checkbox Column | Remove the column used for row selection checkboxes |
Show Row Number Column | Display a column showing the row number |
Row Number Offset | Set the starting number for the row numbering |
Max Row Selection | Limit the maximum number of rows that can be selected |
Suppress Bottom Bar | Hide the bottom bar typically used for actions and information display |
Show Number of Items Selected | Display the count of currently selected items |
Read Only | Make the table non-interactive, disallowing any edits or selections |
Allow Edit on All Columns | Enable editing for all columns |
Allow Filter on All Columns | Enable filtering options for all columns |
Allow Wrap on All Columns | Allow text wrapping in all columns |
Hide Default Actions | Hide pre-defined actions like edit or delete |
Columns Widths Mode | Choose between 'fixed' or 'auto' for column width setting |
Max/Min Column Width | Set maximum and minimum limits for column widths |
Wrap Text Max Lines | Define the maximum number of lines for text wrapping in cells |
Resize Column Disabled | Disable the ability to resize columns |
Resize Step | Set the increment step for column resizing |
Sorted/Default Sort Direction | Choose 'asc' or 'desc' for initial sorting direction |
Show Sorted by Value | Display which column is currently being used for sorting |
Header Title/Caption | Set a title and caption for the table header |
Header Icon Name/Size | Add an icon to the header with customizable size |
Header is Joined | Opt to visually connect the header with the table body |
Hide/Disable Header Actions | Control visibility and interactivity of header actions |
Visible Header Actions Buttons | Specify which action buttons are visible in the header |
Header Actions | Add custom actions to the table header |