Custom Data Table in LWC

I say this time and again, Lightning Data Tables are awesome, but there are a few caveats that give us no other option other than creating our own Custom Data Tables in LWC.

What are Data Tables in LWC?

It's a standard component given to us by the framework which we can use when we want to display the content in tabular format. The beauty of this component is we can make a lot of changes to the table just by altering the JSON input given to the tag.

Conceptually you can think of these as Page Block Tables in visualforce, with the only difference that Data Tables in LWC are built using a different architecture altogether.

Why Custom Data Tables in LWC?

We cannot have pick-list fields, lookup fields, dynamically fetching rows and etc in Lightning Data Tables. In those scenarios, we will end up using Custom Data Tables in LWC.

Any other alternative to Custom Data Tables in LWC?

In this example, I have just played around with the JSON input given to the tag and I have also used the standard <lightning-datatable></lightning-datatable> tag.

We can also create our own component which takes care of displaying the data in tabular format using <table></table> & <tr></tr><td><td/> tags.

In this post, we will look at how to create dynamic data tables that fetch the list of fields that we select from a multi-select pick-list.

We will start off with the Apex class.

In case you are interested in knowing how to use @AuraEnabled(cacheable=true) method and Schema.getGlobalDescribe() I have written a separate blog post, check it out.

Then the interesting part is going to be the JS file, as we will be doing a lot of magic there.

And finally comes the template file.

Here is the source code.

I have written a whole bunch of articles on LWC and in case you are interested you can check this out.

Hope this helps!

I have put together a FREE course on Javascript that helps you master Lightning Web Components.

It just takes 2 hours to finish the course and you will be able to feel the difference.