Datatable – Lightning Web Component for Flow Screens

Created by Eric Smith

This Post was most recently updated on: 4/15/21
Current Version: 3.1.1


  • Moved the “Display ALL Objects for Selection” choice in the CPE from Advanced to Data Source
  • Added an attribute to hide all column header actions such as Sort, Clip/Wrap Text and Filters
  • If Multi-Currency is enabled, convert currency field values to the User’s currency (Thanks to Novarg1)

Bug Fixes:

See the complete list in the Release Notes

Table of Contents

Table of Contents (Quick Links)
  1. About
  2. Restrictions
  3. Installation
  4. Source Code
  5. Reference
  6. Data Source
  7. Table Formatting
  8. Configure Columns
  9. Table Behavior
  10. Advanced
  11. Output Attributes
  12. Additional Resources
  13. Videos
  14. Old Versions & Release Notes


Datatable is a Flow Screen Component that allows you to configure and display a datatable on a flow screen. All you need to do is drag it onto the flow screen in the Flow Builder and give it a collection of records and a list of field names. The field label, type, and numeric formatting will default to what is defined in the object. The displayed records can be selected and/or edited for further use in the flow.

While interacting with the datatable, the user can sort columns, filter columns, change column widths, wrap or clip the displayed text, select rows, and edit fields.

In addition to supporting standard and custom Salesforce objects, user created Apex-Defined objects can be used as well. See Flow and Process Builder List View with Batch Delete for an example.

Additional Optional Functionality

Even though the component can be very simple to use in its basic format, you have a tremendous amount of flexibility and capability when you take advantage of some of the numerous optional attributes that are available.

  • Rows can be selected and passed back to a collection variable in the flow
  • A collection of pre-selected rows can be passed into the component
  • The selection column can be multi-select (Checkboxes), single-select (Radio Buttons), or hidden
  • The results can be filtered by column values
  • Rich Text, Images and Hyperlink formulas are supported
  • The Standard object Name field and Lookup fields can be displayed as clickable links
  • Inline editing is supported with changed values passed back to the flow
  • Output parameters include # of selected records, SObject and SObject Collection variables
  • When just a single record is selected, the output will include a Record variable in addition to a Record Collection variable
  • The maximum number of rows to display can be set by the user
  • You can make record selection Required
  • You can add an Icon and Header to the datatable
  • The datatable height and border can be customized
  • Optional attribute overrides are supported and can be specified by list, column # or by field name, including:
    • Cell Alignment
    • Column Header Icon
    • Column Header Label
    • Initial Column Width
    • Column Filter Allowed
    • Column Edit Allowed
    • Custom Cell Attributes with nested values {name: {name:value}}
    • Custom Type Attributes with nested values {name: {name:value}}
    • Other Custom Column Attributes with nested values {name: {name:value}}

Object Support

The Salesforce Object is specified at the time of configuration, allowing just one version of this component to be used for all Salesforce Objects.

User defined Apex-Defined Object variables are supported.


  • Some data types cannot yet be edited in a datable (lookup, picklist, location, encrypted, rich text, long text area).
  • In order for a lookup or master/detail field to display as a link, it must be “reparentable”
  • If you are selecting an Object that contains geo-location fields (ie: Contact), you may experience a Salesforce bug where the Flow will stop just before the Datatable should be displayed. If this happens, unselect “Automatically store all fields” in your Get Records and choose your fields manually.
  • If you see this error when trying to Configure Columns, try going to Setup > Security > Session Settings and unchecking “Enable clickjack protection for customer Visualforce pages with headers disabled“. Also, in your Setup > User settings, make sure both Debug Mode and Development Mode are Unchecked.




Starting with Version 3.0.9 you can check the current version of your Datatable component by looking at the bottom of the Advanced section in the Custom Property Editor.

Step 1

This component requires that you first install or upgrade the Flow Base Packs*

Step 2

Install the Datatable package

Step 3

Manage Assignments for the USF Flow Screen Component – Datatable Permission Set

  • Setup > Users > Permission Sets > USF Flow Screen Component – Datatable > Manage Assignments > Add Assignments > Select Users > Assign

* The following components from the Flow Base Packs are used in Datatable:


Source Code

View Source



Starting with Version 3.0.0, this component includes a CPE (Custom Property Editor). This makes it much easier to configure the Datatable when adding it to your Flow Screens.

Each section in the CPE (Custom Property Editor) has a help page you can access by clicking on the (i) in the header.


Data Source

Each instance of the Datatable Component requires an API Name, an Object and a Collection of Records to display.

Normally, the Select Object picklist will display the most common Standard objects and all Custom objects. If you select the “Display ALL Objects for Selection” checkbox, all Salesforce objects should be available in the Select Object picklist.

Normally, the Select Object picklist will display the most common Standard objects and all Custom objects. If you select the “Display ALL Objects for Selection” checkbox, all Salesforce objects should be available in the Select Object picklist.


Table Formatting

If you select the checkbox for Display Table Header, the system will automatically pick the system defined icon and plural object name for you. You can change these if you like.

The Icon Picker can also be used to select the Header Icon. Any icon selected in the picker will populate the Header Icon value automatically.

Example Header Icon and Label

If you check the Show Row Numbers checkbox, a column will be added on the left side of the datatable with the row number for each record in the table. The default for this setting is False, however it will always be displayed if any columns are configured to be editable.

Other Formatting Options


Configure Columns

The Configure Columns button runs a special configuration wizard flow that lets you select the columns(fields) to include in your datatable. Once the fields are selected, it creates a sample table that you can interact with to customize your datatable. Upon completion of the customization, the wizard will populate up to 8 separate Column Attribute parameters for you.

Column Fields

You can select and order your fields from a list of all the fields from your datatable’s object.

You also have the option to type in a list of the field API names instead of picking from a list.

Once the fields are selected, you will see a sample datatable with your selected fields and the first 10 records from your selected object.

Column Alignments

You can change the default Column Alignment by selecting the drop-down on a column heading and then selecting Align Left, Align Center or Align Right.

Column Edits

You can pick which columns you want to allow editing on by selecting the drop-down on a column heading and then clicking the Allow Edit tag on or off. You can also click the “Make all columns editable” button below the table to make all or none of the columns editable.

Note that some data types cannot be edited in a datable (lookup, picklist, location, encrypted, rich text, long text area). The edited record values are not saved directly to the object, but are passed back to the Flow where an Update Records can be used to permanently save the changes.

Column Filters

You can pick which columns you want to allow filtering on by selecting the drop-down on a column heading and then clicking the Allow Filter tag on or off. You can also click the “Make all columns filterable” button below the table to make all or none of the columns filterable.

Column Filters allow a user to narrow down the number of displayed records in the Datatable by entering filter values for any columns where filters are allowed. See the Filter Example at the end of this article.

Column Icons

You can add an Icon to the header of any column by selecting the drop-down on a column heading and then clicking Select Icon. Use the Icon Picker to select the Icon Type and then the Icon. See for a complete list of available Icons.

Column Labels

Column Labels can be changed by selecting the drop-down on a column heading and then clicking Change Label. If a column label has been changed, you can reset it back to the default by selecting the drop-down on a column heading and then clicking Cancel Change.

Column Widths

By default, the sample table will start with each column the same width. You can change column widths by dragging the vertical line between columns.

To assist with column width consistency, once you have the columns sized approximately the way you want them, you can click the “Snap each Column Width to the Nearest 5 pixel Boundary” button below the table to adjust each column’s width to the nearest 5 pixel width.

Special Note: If you want the entire table width to fill the available container with columns all the same size, activate the “Show/Edit Column Attributes” toggle in the Advanced section and clear the entry for Column Widths. If you want certain columns to start with a particular width, set just their entries in the attribute with the desired width in pixels and all the rest of the columns with no entries will expand to fill the rest of the container width.

Column Wraps

You can specify if a column should wrap or clip text when it is first displayed by selecting the drop-down on a column heading and then clicking Wrap Text or Clip Text. By default all columns are set to Clip Text with the exception of the Object’s Name field, which will always display as wrapped.

When you have finished making adjustments to the sample table, click the Next button then close the final window to return to the Flow Builder.


Table Behavior

The Table Behavior checkboxes let you fine-tune how you want the user’s interaction with the table to be. Certain options could be disabled based on the values of other options.



The advanced options let you do things like see and change all of the individual column attributes or select an Apex-Defined object instead of a regular Salesforce object.

When you select the “Show/Edit Column Attributes” toggle, you will see each of individual column attributes settings. These are the same attributes that were required for datatableV2. You can enter your own data here or change what was pre-filled by the Configure Columns Wizard.

If you select the “Input data is Apex-Defined” checkbox, other attributes will be displayed including different selections for which records to display and which records are pre-selected.

For more information about using Apex-Defined Data Types, please see these additional resources.
Manipulate Rich Web Data in Flow Without Code (Apex-Defined Data Types)
How to use Apex-Defined Objects with the Datatable

The Configure Columns Wizard is not available for Apex-Defined objects. By default, each of the individual Column Attributes will be displayed, including Column Scales and Column Types which are unique to Apex-Defined data sources.

NOTE: For non-standard field types in Apex Defined Objects (Arrays, JSON, etc), specify a Column Type of ‘richtext‘ in order to display the complete field contents.

Special Formatting for Comma Separated List Attributes

  • Column Alignments
  • Column Edits
  • Column Filters
  • Column Icons
  • Column Labels
  • Column Scales
  • Column Types
  • Column Widths
  • Column Wraps

These optional attributes can be specified as a comma separated list of Column Identifier:Value pairs. The Column Identifiers can be either the column number or the field API name. Keep in mind that if you use column numbers instead of the field API name, you will have to update the identifiers if you insert, remove or change the order of the columns.

Another option is to omit the column identifiers and just provide a comma separated list of values. If you choose this method, you must provide a value for every column (A,B,,D would be invalid) and you can’t use this method with attributes that already contain a ‘:’, such as Column Icons (standard:account).

These Column Widths attributes would all work the same for setting the initial column widths of the sample table at the top of this page.

  • Name:300, Phone:150, BillingCity:140, Type:120
  • 1:300, 2:150, 3:140, 4:120
  • Name:300, 2:150, BillingCity:140, 4:120
  • 300,150,140,120

Special Formatting for Semicolon Separated List Attributes

  • Special CellAttributes
  • Special TypeAttributes
  • Special Other Attributes

These optional attributes can be specified as a semicolon separated list of Column Identifier:Value pairs. The Column Identifiers can be either the column number or the field API name. Keep in mind that if you use column numbers instead of the field API name, you will have to update the identifiers if you insert, remove or change the order of the columns. Another option is to omit the column identifiers and just provide a semicolon separated list of values. If you choose this method, you must provide a value for every column.

The reason for these attributes is to give the user more control over how their datatable is formatted. I included predefined options for standard attributes like Label, Alignment, and Width. These additional options allow the user to manually add in other standard attributes like WrapText, CellAttributes like appending an icon to column data, and TypeAttributes to fine-tune how different data types (like dates) are displayed. See the Salesforce Datatable Documentation for details.

Example #1: Column Icons, Column Widths & Special Column TypeAttributes

Column Icons
1:standard:account, 2:utility:builder, 3:utility:date_input, 4:utility:date_time

Column Widths
200, 120, 200, 200

Special: Column TypeAttributes
2:{year: 2-digit, month: numeric, day: numeric}; 3:{year: numeric, month: long, day: 2-digit, weekday: long}; 4:{year: 2-digit, month: 2-digit, day: 2-digit, hour: 2-digit, minute: 2-digit, time-zone-name: short}

Special Note for Date & Datetime Formatting

If you add custom TypeAttributes to a Date or Datetime field, the value will be converted from a ‘date-local’ value to a standard datetime value. This will cause the value to be processed as UTC time rather than being converted to the browser’s local time zone.

For more details on Date and Datetime formatting see the Salesforce Formatted Date Time documentation.

Example #2: Column Labels, Special Column CellAttributes & Special Column Other Attributes

Column Labels
Name:Account Name, dt_Text__c:Field Value Used as Attribute, FancyField__c:Icon Value from a Different Field, IconValue__c:Icon Value

Special: Column CellAttributes
dt_Text__c:{class: {fieldName: dt_Text__c}}; FancyField__c:{class: slds-theme_shade slds-theme_alert-texture, iconName: {fieldName: IconValue__c}, iconPosition: left}

Special: Column Other Attributes


Output Attributes

The following Output Attributes are available in your Flow. There is no need to manually assign these values as the system will make them available to the rest of your Flow automatically. .

Output Edited Rows ±SObject Collection VariableRecord Collection variable to contain only the records that were edited in the datatable.
NOTE: To write these edits back to the Object, you will need to do a Record Update in the Flow.
Output Edited Rows (User Defined) ±StringSerialized String of Apex-Defined object records
± Only one of these is provided based on the value of (User Defined) Display User Defined Object?
Output Number of Selected RecordsIntegerTotal count of the number of selected records
Output Selected Row (Object)SObject VariableRecord Object variable that contains the single record that was selected in the datatable.
NOTE: This is only provided when just a single record is selected.
Output Selected Rows (Collection)±±SObject Collection VariableRecord Collection variable to contain only the records that were selected in the datatable
NOTE: The Selected Rows collection will contain all of the selected records but you will need to also access the Edited Rows collection to see the edited field values. See this link in the Additional Resources section to review How to use both the Selected and the Edited records in a Datatable.
Output Selected Rows (User Defined) ±±StringSerialized String of Apex-Defined object records
±± Only one of these is provided based on the value of (User Defined) Display User Defined Object?



Review this 4-part Blog series for some ideas on how you can take advantage of datatables in your Flows. Eric writes about how he used his original datatable component to do things like dynamic record presentation and selection, how to select and act on a collection of records, displaying formatted interactive tables and how to inline edit a group of records.

Part 1: Use a Datatable to present a dynamic choice for record selection in a Flow.
Part 2: Use a Datatable in a Flow to select and act on a collection of records.
Part 3: Use a Datatable to display a formatted, interactive table in your Flow.
Part 4: Use a Datatable to inline edit a group of records.

How to use Apex-Defined Objects with the Datatable

How to use both the Selected and the Edited records in a Datatable

Display Rich Text and Custom Links and Images in Datatables

New features for displaying and interacting with the Datatable (Fall ’20)



Datatable Overview

Formatting and Customizing

Custom User Defined Object

Column Filtering Example

This image has an empty alt attribute; its file name is ColumnFilter.gif

How and why I created this component


Old Versions & Release Notes


Click Here for Installation Links

Release Notes & Previous Versions

4/15/21 – Eric Smith – Version 3.1.1 – Current Version


  • Moved the “Display ALL Objects for Selection” choice in the CPE from Advanced to Data Source
  • Added an attribute to hide all column header actions such as Sort, Clip/Wrap Text and Filters
  • If Multi-Currency is enabled, convert currency field values to the User’s currency (Thanks to Novarg1)

Bug Fixes:

  • Text formula fields will now wrap correctly
  • Display ALL Objects for Selection attribute is now persistent
  • Input data is Apex-Defined attribute is now persistent
  • The number of pre-selected rows will now not exceed the Maximum Number of Records to Display attribute value
  • Don’t require the key field to be explicitly listed in the Column Edits attribute for Apex Defined Objects
  • The Clear Selection button will no longer appear on single row tables when Disallow row selection is checked
  • The Clear Selection button will clear the Output Selected Rows (User Defined) attribute for Apex Defined Objects
  • Fixed the column filtering on Checkbox Fields when the filter value is ‘false’
  • Fixed the vertical alignment of the table header text

2/27/21 – Eric Smith – Version 3.0.10


  • Record links have been updated to now support a Flow running in a Community
  • Added a new Table Behavior option to specify if Links should open in the same Tab
  • You can now use a Flow variable to set the Maximum Number of Rows value
  • Changed the display of error messages to match the Salesforce standard
  • Allow all TypeAttibute settings for Date fields (This will switch datetime fields to UTC)
  • Added a Permission Set that gives access to the @AuraEnabled Apex Classes that are part of the Datatable Flow Screen LWC

Bug Fixes:

  • Fixed incorrect links when running in a Sandbox whose name started with the letter c
  • Now longer require the Checkbox column if any columns are selected for editing
  • Reset the Number of Rows Selected to 0 when clearing the row selections
  • Retain the new setting when clearing a checkbox in the CPE
  • Fixed an error when trying to exit the CPE after selecting the Apex Defined Object option
  • Fixed the delay that occurred when selecting a large (>200) number of records
  • Fixed the delay that occurred when editing multiple (>20) records
  • Fixed an issue with being unable to edit Apex-Defined columns unless Type was specified
  • Made sure that the Key Field could not be edited
  • Now regular Textarea fields of 255 characters or less can be edited

2/17/21 – Eric Smith – Version 3.0.9
Add option to Display Row Numbers (default=false)
Allow setting of Table Header for Apex Defined Objects
Display the current Version # at the bottom of the CPE
Bug Fixes:
Allow a Type Attribute to set the Maximum number of decimal places to display to be less than the field default Minimum
Fix initial attribute display in the CPE when using an Apex Defined Object
Fix attribute corruption when updating multiple times

1/8/21 – Eric Smith – Version 3.0.8
Relocate source code to the correct packaging org
Users with version 3.0.3 through 3.0.6 will need to uninstall & reinstall
Users with versions up to 3.0.2 should be able to upgrade directly

1/6/21 – Eric Smith – Version 3.0.6
Bug Fixes:

Fixed checkbox behavior in the CPE
Fixed an error selecting checkboxes in the CPE
Fixed an error with attributes not being able to be cleared
Fixed an error with Textarea not showing Rich Text correctly

1/1/21 – Eric Smith – Version 3.0.5
Added Icon Pickers to the CPE and Column Wizard (Requires FlowScreenComponentBasePack v2.1.2 or later)
Changed ‘Display ALL Objects for Selection’ checkbox to default to unchecked
Bug Fixes:
Removed field names from Empty Table Header
Fixed “Apex CPU time limit exceeded” error (FlowActionsBasePack v2.9 or greater)

12/19/20 – Eric Smith – Version 3.0.4
Updates: Object picklist now supports an option to include ALL Salesforce SObjects

12/14/20 – Eric Smith – First Version 3 Release – Now with a Custom Property Editor (CPE)
Production or Developer Version 3.0.2
Sandbox Version 3.0.2

10/14/20 – Eric Smith – datatableV2 – v2.47
Bug Fix:
Display correct icon for Table Header (was always showing standard:account icon)

Use the Deploy to Salesforce button found here –

10/7/20 – Eric Smith – datatableV2 – v2.46
Added new Output Parameter for the # of Selected Records
(this can be used for conditional visibility on the same screen as the datatable)
New Selected Record Output Parameter – Returns an SObject record if just a single record is selected
New Required? Parameter – Requires the user to select at least 1 row to proceed
New option to suppress the link for the object’s standard Name field
New optional Table Header with Table Icon and Table Label Parameters
Switched DualListbox to the fbc version
Added spinners while sorting & filtering data
Allow case insensitive field API names
Allow custom field API names w/o the __c suffix
Bug Fixes:
Display Picklist Labels instead of API Names for Picklist and Multipicklist fields
Added a Clear Selection button for tables with just a single record

9/22/20 – Eric Smith – datatableV2 – v2.45
Bug Fix: Fixed inability to edit some field types (introduced by v2.44)

9/20/20 – Kevin Hart – datatableV2 – v2.44
Updates: Added ability to display Rich Text fields
Bug Fix: Eric Smith – Fixed error when selecting column action of WrapText or ClipText

8/26/20 – Eric Smith – datatableV2 – v2.43
Bug Fix: Update Percent Field Handling and set Formula Fields to be Non-Editable

8/26/20 – Eric Smith – datatableV2 – v2.42
Bug Fix: Update Time fields with the User’s Timezone Offset value so they display as intended
Bug Fix: Fix field type so Datetime fields display correctly

8/14/20 – Eric Smith – datatableV2 – v2.41
Bug Fix: Fixed issue with time and date-time fields being displayed as a day earlier 

8/11/20 – Eric Smith – datatableV2 – v2.40
Updates: Added attribute to allow the suppression of the record link on the SObject’s ‘Name’ field
Bug Fix: Fixed code so the ‘Name’ Field column now sorts correctly

7/31/20 – Eric Smith – datatableV2
v2.39 – Updates: Added Datatable Configuration Helper Flow
REQUIRES: Flow Base Components (
REQUIRES: Dual List Box (
REQUIRES: Remote Site Setting (Setup)

7/31/20 – Andy Hass – datatableV2
v2.38 – Updates: Added support for Checkbox Field Type

7/7/20 – Eric Smith – datatableV2
v2.37 – Bug Fix: Fixed issue with the date being displayed as a day earlier

7/1/20 – Eric Smith – datatableV2
v2.36 – Updates: Now displays the primary “Name” field as a Link (textWrap = true)
Added button in Config Mode to round off Column Width values 
v2.35 – Updates: Extended Configuration Mode to handle Column Alignments, Labels, Widths, Allow Edit & Allow Filter
Added Configuration Mode buttons to select all columns for Edit and/or Filter
Selecting an attribute string now copies the contents into the system Clipboard

6/24/20 – Eric Smith – datatableV2
v2.34 – Bug Fix: Fixed issue with column widths resetting when filtering
Updates: Added Datatable Configuration Helper Flow
(Requires transferMetadata LWC @

6/19/20 – Eric Smith – datatableV2
v2.33 – Updates: Removed default value for Table Height
Bug Fix: Fixed issue with lookup fields being blank in the first record

6/9/20 – Eric Smith – datatableV2
v2.32 – Fixed error when editing multiple columns on the same row while Cancel/Save buttons were suppressed

Unmanaged v2.32 (Production/Developer)
Unmanaged v2.32 (Sandbox)

6/4/20 – Eric Smith – datatableV2
v2.31 – Initial release for Summer ’20 orgs

Unmanaged v2.31 (Production/Developer)
Unmanaged v2.31 (Sandbox)

Prior versions of the datatableLwcFsc can now be replaced by datatableV2 starting in Summer ’20 orgs

4/22/20 – Eric Smith 
v2.0 – NOTE: Summer ’20 pre-release orgs only – Unmanaged v2.0 (Developer Org)

4/15/20 – Eric Smith 
v1.1 – Added the ability to filter a datatable by individual columns, cleaned up some error handling.

Unmanaged v1.1 (Production/Developer)
Unmanaged v1.1 (Sandbox)

4/2/20 – Eric Smith 
v1.0 – Initial Release – Includes versions for Account, Asset, Campaign, Case, Contact, Contract, Lead, Opportunity, OpportunityLineItem, Product2, User

Unmanaged v1.0 (Production/Developer)
Unmanaged v1.0 (Sandbox)

The original datatableFSC component is a Lightning Aura Component that supports up to 10 columns. It can be found here.

View Source

Click Here for Source Link