Salesforce Casts

Custom Data Table in Lightning Experience

Teja -

If you are a Salesforce Lightning Developer there is a good possibility that you would have used Data Table component at-least once. It is one of the mostly used Aura Components which has its own advantages and pitfalls.

Let me throw some light on the advantages to start with, post which I will try to focus on pitfalls and finally we will look at how to implement a Custom Data Table in Lightning Experience.

Pros

  1. You get a visually appealing tabular structure just like <apex:pageBlockTable> with all sort of options like inline-editing, static and dynamic menu items for each row, infinite loading and etc.
  2. You can programatically select the rows of a Table.
  3. It's very easy to get the selected rows in client-side controller. There are predefined attributes and methods that we can make use of to access the selected rows.
  4. By adding a few configurations here and there we can make sure the Data Table has infinite loading feature.
  5. Customisable just by modifying the JSON configuration string in client-side controller and etc.

Cons

  1. It's not possible to have pick-list fields and lookup fields in Data Table.
  2. Row Highlighting is not possible.
  3. Anything which has got something to do with accessing the DOM is not possible.

The component that I created tries to act as a bridge between the Pros and Cons. I tried creating a Custom Data Table that has pick-list field as one of it column. If you understand the logic that's used in the component it becomes lot more easy to extend this to fields like lookup fields and other fields of that sort.

So lets get started ..

In case you have any questions, let me know in the comments below.

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