New LWC Datatable Component!

The datatable Flow Screen Component has been one of the most popular add-ons found on unofficialsf.com.  Admins have found many great use cases for the component and we have been able to add some nice updates to it as well.

One of the drawbacks to the component was the requirement to hard-code the Objects you wanted to display records from.  Starting in Summer ‘20, that restriction should go away for Flow components, if they are written as Lightning Web Components.  Unfortunately, the original datatable is written as a Lightning Aura Component.

I decided to start from scratch and create a brand new LWC datatable component.  I think it is easier to configure and use than the original component and it offers some great new features.

  • The only required attributes are the Record Collection and a list of field names
  • Lookup fields are displayed with the record name as a link rather than showing the Id  
  • You can restrict the number of records to be displayed in the table
  • Percent and Time fields now display correctly
  • When using inline editing, only the changed records are passed back to the flow
  • You can set overrides just for the columns you want for attributes like:
    • Alignment
    • Icon
    • Label
    • Width
    • Editability
  • You can easily add advanced attributes like CellAttributes and TypeAttributes
  • Advanced attributes can even use the values of other fields in the records

Until Summer ‘20, the new component still needs to have the Object hard-coded but I have included versions for 11 different Standard Objects and complete instructions on how to modify the component to create versions for other Standard and Custom Objects.

Please give the new component a try and let me know how it works for you.

Eric Smith

Subscribe
Notify of
guest
39 Comments
Inline Feedbacks
View all comments
Adam White

Amazing work! Thanks Eric for all you’re doing for the #Flowhana!

Adam White

I really like the csv/semicolon method of specifying columns – makes it easier to make changes AND you could can use invoked actions from here to specify your column output dynamically!

Kou Xiong

Thanks for your work on this!

Keith Sadler

This is awesome! Just shared with our internal admin/dev team and look forward to incorporating in our flow solutions. Thank you!

Yanir

Thanks, it Looks Great!! 🙂

I wonder if now that is on LWC we could add filtering functionality in the header – that will transform this component to the ultimate component ever built!!! 🙂

Yanir

Thank you so much for this Eric!!
Your work really helps us admins with only a little knowledge in programming to stay ahead on the curve and deliver great results with a fraction of the time it would take to our in-house developers.
I’m using some of your components and it’s helping me be good at my job.
I really appreciate your work!

Per Eric Johansen

Hi, We currently use the Datatable FSC component. We have discovered that this one isn’t responsive/do not support mobile devices. Is the new LWC Component responsive? We currently also have a challenge with the FSC edition. In our flow we have the ability to select products in the table, on the next screen the selected products are displayed. If we allow the user to go back to previous screen, select some other products in the table, still the first selection is presented in the second table. We have a clear collection operation and re-populate the collection variable between the two… Read more »

Per Eric Johansen

Thanks Eric! We’ll try the reset-mode. Have tried to change column width, but have not got the result as desired. Maybe we one day will see an responsive edition 😉

Nkosi

Hi @ Per Eric Johansen, I am also using datatable FSC component , I was getting frustrated by it not clearing the previous selection. What solved it for me was to only have the selected output collection variable on the output values variables and nothing else.

Martijn Reekmans

Hi Eric, great work you’ve done on this component! I’m using it to display a list of records out of which the user can only select a single one. However, even if he does not select a record from the table, he is able to click “Next”. In my case, a standard flow error message will then appear since I’m trying to create a record based on the selection made. My workaround is to display a screen element with a custom error message if the Collection Variable used for the Output Selected Rows is null. I was wondering though if… Read more »

Bobby K

Anyone have any experience making this work with new records? wondering if it can be adapted/work with a collection that has no id’s yet…my thought process was to allow users to create multiple junction objects records quickly from one screen. Would love to hear if anyone has done anything similar!

Rachel A

Can you clarify what you mean by using a KeyField? I, too, am trying to allow users to create multiple records from a single screen.

Drue

Hey Eric! This is such a great tool and I am loving using it! I have a custom object with records that I would like users to be able to edit and add to. The problem I am running in to is when a user adds a new object it uses the same recordId as one of the current objects. So when they go to edit an object, multiple records in the collection variable have the same recordId and I get an error. I am looping through the collection variable with the current and newly added products and using the… Read more »

Drue

I’m collecting data for the fields I need in text and date fields on the screen, assigning them to the object fields and then storing them in a collection variable until I am ready to actually create the records, at the end of the flow.

Drue

Hey Eric. I am still trying to add opportunity products in my flow and have the added products display using the datatableV2. I have a screen that collects the information I need to create an opportunity product. Because there will be no ID because I’m not creating is immediately, I have a UniqueID__c as my Key Field.
data:image/png;base64

Last edited 1 month ago by Eric Smith
Drue

Well that was a fail. I’ll post the screen shots as attachments and resend the message so it makes sense. I am still trying to add opportunity products in my flow and have the added products display using the datatableV2. I have a screen that collects the information I need to create an opportunity product. Because there will be no ID because I’m not creating is immediately, I have a UniqueID__c as my Key Field. I am then assigning the collected fields to the record variable. (image Assign to record variable) And then assigning that to the collection variable I… Read more »

Eric.PNG
Martijn

Hi Eric,

I’m trying to display the records of a junction object in the datatable-component.
When I add one of the two master-detail relationship-fields to the Column Fields, no records are shown anymore in the table (spinner keeps spinning).
Are you aware of this behavior?

Best regards,
Martijn

Lay

Hi Eric, many thanks for this component. It is extremely useful! I was experiencing the same behaviour as Martijn as your reparenting instruction worked a charm. Thank you!

Nick Sauer

Finally got to use this – beautiful work!

Eric Smith

Thank You

Martijn

Hi Eric,
 
It seems that since the Summer ’20 release, this component is no longer working as before.
The collection variable that stores the Output Selected Rows always returns NULL, even though a record has been selected in the datatable.
Any idea what is the reason for this issue, and how it can be fixed?
 
Thank you.

Eric Smith

I will be releasing a new Summer ’20 version this week. Or You can try this temporary version in your sandbox
https://test.salesforce.com/packaging/installPackage.apexp?p0=04t6C000000Hrzg&isdtp=p1

Samuel Israeli

Hello, thanks a-lot but installing this new version request me to unistall the previous version that is already in use in multiple place.
Can you release in github or so the source code ?

Samuel Israeli

So I deployed the package to a different Sndbx and manually changed the code.
It worked like a charm, thank you so much.
BTW this is also the way to copy the logic to any custom object 🙂

Yanir

Hi Eric, I manged to install the Package and it works Really Nice 🙂 I want to use it as a “Listview” On a Community. This I hope will be a great solution for exposing the right data to users according to a more complex logic. However when clicking on the record Name in the DataTable the URL takes me to a wrong address ( a mixture of the Community Portal and the lightning CRM) here is an example: https://communitydomain.lightning.force.com/lightning/r/MyObject/a1CL0000004xJpDMAU/view Is there a way to bypass it/change the link so it will fit to Community? Thank you very much. Yanir.… Read more »

John F

Similar to Yanir’s question, is there anyway to disable the automatic hyperlinking of the Name field?

Eric Smith

John F – I plan on adding an option to suppress the link.

Eric Smith

Yanir – I will look into finding a way to support links that work in a Community.

Yanir

Thank you Eric 🙂