Flow Screen LWC : Datatable (Part 2)

Part 1 contains all the apex code that we will need to support the flow screen component. So, please have a look at it first:
Flow Screen LWC : Datatable (Part 1)

But before going into the nitty-gritty of the LWC side, I’d like to highlight one of the current limitations of the Lightning Datatable: there’s no out-of-the-box way to render data table cells as picklists or lookup. Which particularly in the cases of lookups, as you can see in the image below, it can be a bit of a nuisance.

The above limitation will be addressed with our Lightning Web Components.
Below there’s an example on how the custom Lightning Datatable will look like in a flow screen.

Example of a datatable in a flow with a lookup and a picklist

The solution will be based on three Lightning Web Components:

1. Custom Data Type Component. Renders custom cell types.
2. Enhanced Lightning Datatable. Extends the out-of-the-box Lightning datatable to support the custom data type.
3. Flow Screen Component. To be used in flow screens, will make use of the enhanced lightning datatable.

If you are new to Lightning datatable custom types, I suggest first having a look at the Salesforce example: Create a Custom Data Type

Custom Data Type Component

First LWC we need to create. It will be used to render a custom data table cell, in our case a picklist or a lookup that will be in line with the object field definition, therefore lookup filters will not be ignored and lookup object icons will be shown.

LightningDataTableCustomType.js

LightningDataTableCustomType.html

Enhanced Lightning Datatable

Our second LWC. Here we will be extending the out-of-the-box lightning datatable to make use of the cell custom type previously defined.

The folder structure of this component will be the following:

The first file we need to create is the HTML template file that will be used to instantiate the custom type — the file name is different from the LWC and it still will be hosted in the LWC folder. You will have to manually create this file.

customLightningDataTableCustomType.html

The LWC standard .js file extends the out-of-the-box Lightning Datatable component to have one extra column custom type. There’s no need to update the other two LWC standard files .html and .js-meta.xml.

customLightningDataTable.js

Flow Screen Component

Finally, the last component: the Flow Screen Component that will can be used in the flow.

flowScreen_DataTableBasedOnFieldSet.html

The LWC JavaScript code is slightly complex, but hopefully with the comments it will make sense.

FlowScreen_DataTableBasedOnFieldSet.js

The metadata file contains the settings that makes the LWC a flow screen component.

flowScreen_DataTableBasedOnFieldSet.js-meta.xml

The CSS file contains the CSS classes that limits data table height. This ensures the table looks neater, avoiding multiple vertical scrollbars.

Flow Configuration Example

Inputs
In this example, it’s actually being passed the record collection instead of the list of Ids.

Outputs
In the case shown below, the selected records are stored in the the record collection variable selectedContacts.

Final Thoughts

A few additional things could have been explored, such as sortable columns and dependent picklists. It is possible to use the above component as a kind of related list, i.e. to add on a Lightning Record Page, but for that a few tweaks would be required, for example in the custom type LWC.

I hope you’ve found the story useful.