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.
Hi,
ReplyDeleteThank 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.
Hi, glad to hear that this blog is helpful for you. You can find the controller here
Deletehttps://github.com/jangidyogi94/SFDC-Recipes/tree/Custom-Lightning-Datatable/src
Hi,
ReplyDeleteThanks again. That is super helpful. I've learned a lot from your blog.
Hi,
ReplyDeleteThanks 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?
Hi, the height is controlled in datatablePicklist component and then there are customDatatable css file that loads and give the styling and its positioning.
DeleteHi, how to dynamically display data for a picklist, for example using the standard @wire getPicklistValues?
ReplyDeleteAll 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.
Deleteon click of cancel button is not rendering the orginal data.
ReplyDeleteInstead of hardcoding can we dynamically get the values for picklist in data table?, Please share the reference
ReplyDelete