I say this time and again, Lightning Data Tables are awesome, but there are a few caveats that gives 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.

Custom Data Table in LWC

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 a dynamic data tables that fetches the list of fields that we select from 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.

Interested in learning LWC Development with me? Subscribe to my course (use this if you are out of India).

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