AX - Data Table

Overview

AX - Data Table is a powerful component for the Salesforce Lightning App Builder that displays your Salesforce records in a clean, interactive table.

This component gives you complete control over how your data appears—customize columns, add filters, enable sorting, and let users interact with records directly from the table.

Key features

• Data Integration: Pulls records from any Salesforce object (standard or custom).

• Customization: Define columns, enable inline edits, and control search/filter fields.

• Interactivity: Sort, paginate, and export data with minimal clicks.

• Header Styling: Add titles, captions, and icons for context.

• Flexible Display: Show as a card or hide headers for a minimalist design.

• Dynamic Bindings: Use {{Record.FieldApiName}} to pull current record data on Lightning Record Pages.

Component Comparison

This is a lightweight version of the Data Table component optimized for Lightning App Builder's drag-and-drop interface. If you need more advanced options like custom header actions, row-level actions, advanced styling controls, or specialized data type visualizations, consider using the Data Table component in Dynamic Components for complete customization capabilities.

Use Cases

• Account Record Page: Display related Opportunities, Cases, or Contacts with filtering and export options.

• Campaign Page: List campaign members, filter by status or engagement, and export for follow-up.

• Project Page: Display tasks or deliverables with inline edits, enabling efficient management.

• Sales Dashboard: Present open Opportunities, sorted by stage or close date, with CSV export.

• Service Overview: Highlight high-priority or overdue Cases with filters by owner or status.

• Custom Reports Hub: Enable exploration of dynamic record sets (e.g., top accounts) without running reports.

---

Configuration

Add the Data Table to your page in App Builder and configure its properties in the Properties Panel.

Public Properties

These control data, behavior, and appearance.

Property	Label	Type	Description	Example
sObjectApiName	Object Api Name	String	API name of the Salesforce object for records (e.g., Opportunity, Case, Custom_Object__c).	Opportunity
filter	Filter	String	SOQL WHERE clause to filter records (e.g., Status = 'Open').	StageName = 'Closed Won'
orderBy	Order By	String	Field API name for sorting rows (e.g., CloseDate).	CloseDate DESC
limit	Maximum Number of Records	Integer	Maximum records to display.	50
headerTitle	Header Title	String	Main title above table.	"Top Opportunities"
headerCaption	Header Caption	String	Subheading for context (e.g., "Sorted by Close Date").	"Active deals"
headerIconName	Header Icon Name	String	SLDS icon name for header (e.g., standard:account).	standard:opportunity
showPagination	Show Pagination	Boolean	Enables pagination controls at table bottom.	On
nbItemsPerPage	Number of Items per Page	Integer	Records per page (with pagination) or batch size (fixed height, no pagination).	10
columnFieldNames	Column Field Names	String	Comma-separated field API names for columns, in display order.	Name,StageName,Amount
searchableFields	Search Fields	String	Comma-separated field API names for search bar.	Name,Description
filterableFields	Filter Fields	String	Comma-separated field API names for filter panel UI.	StageName,OwnerId
editableFields	Editable Fields	String	Comma-separated field API names for inline editing.	StageName,CloseDate
metricAggregationFields	Metric Aggregation Fields	String	Comma-separated aggregation functions to display calculated metrics in the table header. Supported functions include SUM, COUNT, AVG, MIN, and MAX.	SUM(Amount), COUNT(Id)
sortableFields	Sortable Fields	String	Comma-separated field API names for column sorting.	Amount,CloseDate
hideTableHeader	Hide Table Header	Boolean	Hides column header row for minimalist look.	Off
allColumnsEditable	Allow Edit on All Columns	Boolean	Enables inline editing for all columns, overriding editableFields.	Off
allColumnsFilterable	Allow Filter on All Columns	Boolean	Makes all columns filterable, ignoring filterableFields.	Off
allColumnsSearchable	Allow Search on All Columns	Boolean	Applies search to all columns, ignoring searchableFields.	On
allColumnsSortable	Allow Sort on All Columns	Boolean	Enables sorting on all columns, ignoring sortableFields.	Off
hideDefaultActions	Hide Default Actions	Boolean	Removes default row actions (e.g., edit, delete).	Off
displayAsCard	Display as Card	Boolean	Wraps table in a styled card container for dashboard/record pages.	On

Best Practice: Use {{Record.FieldApiName}} in properties like headerTitle on Lightning Record Pages to dynamically pull data (e.g., {{Record.FieldApiName}} for current record name).

---

Examples

Example 1: Opportunity List on Account Record Page

This example shows related Opportunities with filters and inline edits.

1

Configure Data Source

• sObjectApiName: Opportunity

• filter: AccountId = '{{Record.Id}}' (binds to current Account)

• columnFieldNames: Name,StageName,Amount,CloseDate

• editableFields: StageName,CloseDate

• filterableFields: StageName

2

Set Header and Options

• headerTitle: Related Opportunities

• headerCaption: "For {{Record.Name}}"

• headerIconName: standard:opportunity

• showPagination: On

• nbItemsPerPage: 10

3

Enable Features

• allColumnsSearchable: On

• hideDefaultActions: Off

Result: A table of Opportunities linked to the current Account, with filtering, editing, and export options.

Example 2: Campaign Member Checklist

This example lists Campaign Members with filters and CSV export.

1

Configure Data Source

• sObjectApiName: CampaignMember

• filter: CampaignId = '{{!Record.Id}}'

• columnFieldNames: FirstName,LastName,Status

• searchableFields: FirstName,LastName

• filterableFields: Status

2

Set Display

• displayAsCard: On

• hideTableHeader: Off

• nbItemsPerPage: 15

Result: A card-wrapped table for Campaign Members, searchable and filterable.

Example 3: Opportunity Summary with Aggregated Metrics

This example displays all Opportunities for an Account with total value and record count metrics in the header.

1

Configure Data Source

Defines which records to display and how they're organized.

• sObjectApiName: Opportunity

• filter: AccountId = '{{Record.Id}}'

• columnFieldNames: Name,Amount,Stage,CloseDate,FullName

• orderBy: Amount DESC

2

Set Header and Metrics

Controls the visual header and summary calculations shown above the table.

• headerTitle: All Opportunities

• headerCaption: Related to {{Record.Name}}

• headerIconName: standard:opportunity

• metricAggregationFields: SUM(Amount), COUNT(Id)

3

Enable Display Options

Configures pagination and user interaction capabilities.

• showPagination: On

• nbItemsPerPage: 25

• allColumnsSortable: On

• allColumnsFilterable: On

Result: A comprehensive table showing all related Opportunities with live-updating metrics in the header. Users can see the total pipeline value and record count at a glance, and sort by any column and filter results. The metrics automatically recalculate when filters are applied, so filtering by Stage instantly shows the sum and count for just those filtered records.

---

Key Considerations

• Dynamic Bindings: Use {{Record.FieldApiName}} on Record Pages for context-aware headers/filters.

• Performance: Limit records (limit) for large datasets; combine with pagination.

• Inline Editing: Ensure editableFields match user permissions to avoid errors.

• Filtering/Search: Select specific fields for precision; allColumnsSearchable simplifies setup but may slow performance.

• Accessibility: Use clear header titles/captions; ensure sortable/editable columns are keyboard-navigable.

---

Troubleshooting Common Issues

• No Records Shown: Verify sObjectApiName and filter syntax; check object permissions.

• Bindings Fail: Ensure {{Record.FieldApiName}} matches current page context; test in preview.

• Search/Filters Missing: Enable searchableFields/filterableFields or toggle allColumns options.

• Edits Not Saving: Confirm editableFields permissions; add On Change interaction if needed.

• Layout Issues: Adjust Style Panel for margins/padding; test card display on mobile.

---

Summary

The Avonni Data Table component delivers a powerful, interactive way to display and manage Salesforce records in App Builder. With filtering, editing, and export features, it enhances data workflows for various roles.

Need More Advanced Features?

This App Builder version provides essential data table functionality with simple configuration. For advanced capabilities like custom actions, complex styling, and specialized data visualizations, explore the Data Table in Dynamic Components for unlimited customization options.