How To Use Custom Lightning Datatable

Custom Lightning Datatable Unmanaged Package

Package Info: 
Use this URL to install the package into any organization:
https://login.salesforce.com/packaging/installPackage.apexp?p0=04t0K000000wUik

Note: If you are installing into a sandbox organization you must replace the initial portion of the URL with http://test.salesforce.com

Component Details

This unmanaged package consists of following component:
  • Static Resource
    • CustomDataTable: A CSS for customizing Lookup and Picklist options
  • LWC
    • customDatatable: This is extension of lightning datatable with new custom datatypes defined lookup and picklist.
    • datatableLookup: This component is responsible to render lookup field. Following events are fired from this LWC component
      • itemregister: Fired when component is loaded to register itself(GUID) as child of customDatatable. This event can then be listened at parent customDatatable component to do further operation.
      • valuechange: Fired when lookup is changed. This event can then be listened at parent customDatatable component to do further operation.
      • edit: Fired when edit(Pencil) icon is clicked on inline edit of  custom lightning datatable to show the lookup field. This event can then be listened at parent customDatatable component to do further operation.
    • datatablePicklist: This component is responsible to render lightning combobox. Following events are fired from this LWC component
      • itemregister: Fired when component is loaded to register itself(GUID) as child of customDatatable. This event can then be listened at parent customDatatable component to do further operation.
      • valuechange: Fired when picklist value is changed. This event can then be listened at parent customDatatable component to do further operation.
      • edit: Fired when edit(Pencil) icon is clicked on inline edit of  custom lightning datatable to show the lookup field. This event can then be listened at parent customDatatable component to do further operation.
      • customblur: Fired when Blur event of lightning combobox is triggered. This event can then be listened at parent customDatatable component to do further operation.

Usages

Click here to know how to use the custom lightning datatable, This contains detailed overview of how to use the custom events fired at different LWC component level.

Comments

  1. Anonymous10 June 2021 at 22:44

    Hi,
    Thank you very much for your help. This is an amazing alternative. Can you please also share the OpportunityRelatedListController apex class to check the getRelatedRecords and saveDraftValues? I'm not able to find it anywhere.

    ReplyDelete
    Replies
    1. Yogendra Jangid10 June 2021 at 23:06

      Hi, glad to hear that this blog is helpful for you. You can find the controller here
      https://github.com/jangidyogi94/SFDC-Recipes/tree/Custom-Lightning-Datatable/src

      Delete
  2. Anonymous12 June 2021 at 01:41

    Hi,

    Thanks again. That is super helpful. I've learned a lot from your blog.

    ReplyDelete
  3. Anonymous11 August 2021 at 13:15

    Hi,

    Thanks so much for posting this! The code works perfectly but I am encountering an issue with how the picklist values are displayed. The height of the picklist seems to be adapting to the height of the table. Can you please help?

    ReplyDelete
    Replies
    1. Yogendra Jangid11 August 2021 at 22:15

      Hi, the height is controlled in datatablePicklist component and then there are customDatatable css file that loads and give the styling and its positioning.

      Delete
  4. Anonymous14 September 2021 at 20:32

    Hi, how to dynamically display data for a picklist, for example using the standard @wire getPicklistValues?

    ReplyDelete
    Replies
    1. Yogendra Jangid14 September 2021 at 21:39

      All you need is to get the required picklist values using either @wire getPicklistValues or using imperative approach to call an apex method which returns the picklist values. Once you have that list with you, create a picklist set and assign that to options when defining the column attributes. This will have dynamic picklist rendering then.

      Delete
  5. Anonymous16 January 2022 at 07:25

    on click of cancel button is not rendering the orginal data.

    ReplyDelete
  6. sabareesh1 April 2023 at 11:27

    Instead of hardcoding can we dynamically get the values for picklist in data table?, Please share the reference

    ReplyDelete
  7. Dinesh6 August 2024 at 20:12

    Hi Thank you for sharing the details @Yogendra. I tried to implement the same and stuck with an issue. Can you guide me where this has to be fixed.
    When trying to edit the lookup field, picklist values in the combobox are going behind the save and cancel button bar.
    Can we do any z-index for that?

    ReplyDelete

Post a Comment