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

0 0 vote
Article Rating
Subscribe
Notify of
guest
24 Comments
Inline Feedbacks
View all comments
Adam White
1 month ago

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

Adam White
1 month ago
Reply to  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
Kou Xiong
1 month ago

Thanks for your work on this!

Keith Sadler
Keith Sadler
1 month ago

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

Yanir
Yanir
1 month ago

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
Yanir
1 month ago
Reply to  Eric Smith

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
1 month ago

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
1 month ago
Reply to  Eric Smith

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
Nkosi
1 month ago

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
Martijn Reekmans
1 month ago

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
Bobby K
1 month ago

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
Rachel A
28 days ago
Reply to  Eric Smith

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.

Martijn
Martijn
1 month ago

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
Lay
16 days ago
Reply to  Eric Smith

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
Nick Sauer
3 days ago

Finally got to use this – beautiful work!

Eric Smith
3 days ago
Reply to  Nick Sauer

Thank You

Martijn
Martijn
2 days ago

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
2 days ago
Reply to  Martijn

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