Picklist in Lightning Datatable

Use Case:

Very often we come across a requirement where we need inline editing in data-table across all possible field types. This includes picklist as well and is currently not supportive with the standard inline editing of lightning-datatable. Generally one has to deviate from using lightning-datatable to customizing approach with HTML Table to achieve such requirement. But using lightning web components, same can be achieved with standard lightning-datatable allowing us to leverage other valuable inbuilt features.
Picklist in Lightning Datatable using LWC
Picklist in Lightning Datatable

Implementation:

  1. Create CSS file CustomDatatable and upload in Static Resource.
  2. Create LWC component datatablePicklist
  3. Create LWC component customDatatable
  4. Create Apex Class OpportunityRelatedListController.
  5. Create LWC component customDatatableDemo.
Click here to view/download the code for Picklist-In-Lightning-Datatable.
Click here to know the detailed view of each component and related events.

Once you are done with the code deployment to your environment, follow following steps to verify the changes.
  1. Create a Custom Lightning Component Tab eg. Custom Datatable Demo
  2. You can have tab as Default Off or On for demo purpose.
  3. Search for any Account, and if there are any related Opportunities on selected Account, will be displayed in Related Opportunities section.




Other Related Link: Lookup in Lightning Datatable

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

Lookup in Lightning DatatableRefesh Lightning Datatable →


If you like this blog content and find inciteful, please comment and let me know.

Comments

  1. Really helpful. Now we can have picklist on lightning datatable.

    ReplyDelete
  2. Yes, and in next blog, I will explain how lookup can be used in standard lightning datatable.

    ReplyDelete
  3. Blog is really good, well done๐Ÿ‘

    ReplyDelete
  4. where is the code of OpportunityRelatedListController?

    ReplyDelete
    Replies
    1. Hi, you can find it at below gitHub
      https://github.com/jangidyogi94/SFDC-Recipes/tree/Custom-Lightning-Datatable/src

      Delete
    2. not there

      Delete
  5. Hi, Thank you so much for this Blog. This feature is really helpful In terms of adding Picklist in the data table. I have added the same but I have observed one thing in the component that when You do inline editing, let's say you add the picklist value in 1st record(Inline Edit Save & Cancel Button is displayed as expected) and now if you want to add picklist value in last record, then Inline Edit Save or Cancel button hides the picklist value. How Can I fix this issue, I am trying to modify css but its not working. Could you please try to replicate the issue or suggest the solution?

    ReplyDelete
    Replies
    1. .picklist-container{
      margin-top: -1rem;
      margin-left: -0.5rem;
      position: absolute !important;
      z-index: 10000;
      }

      Try above, probably z-index is missing from the css.

      Delete
  6. Hi, I have added the z-index , it's now showing 2 pencil icon, 1 is standard one(Inline Edit Pencil Icon) and another is Custom one after adding z-index but somehow the issue mentioned in my previous comments gets resolved. Is there any way where we can keep only one pencil icon? Also, In You Static Resource css file, z-index is not mentioned.

    ReplyDelete
    Replies
    1. Two pencil icons are not the result of z-index but some wrong code reference. Z-index is just
      to move the picklist on top of save docker.

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Mayhaps I am doing something wrong - but it seems like maybe something has changed. I am Also seeing 2 pencil icons now - when this was not the case, and I have done nothing to edit my code.

      Delete
    4. Seems there has some changes in lightning-datatable in Winter'22 release, just set editable as false instead true and you will be good in your main LWC component where you create the datatable columns

      Delete
  7. Hello. Does this also support mass update? Like in standard lightning data-table, if we select 5 rows, make change in a single row, we get a checkbox for 'Update selected rows' and once checked, all 5 rows will be updated with the same row? Is this supported in your component for picklist?

    Thanks.

    ReplyDelete
  8. Does this work in analytics too for salesforce?

    ReplyDelete
  9. Hello, how to test mass update?

    ReplyDelete
    Replies
    1. See my video attached in the blog. It is already doing mass update. Source code you can get from the github, link is already available in the blog for github. Alternatively you can install the unmanaged package given in this blog.

      Delete
    2. Hi Yogendra, thanks for getting back. Actualy I mean Mass Editting: by editting 1 record's pick list value, it will apply all Selected (check box checked) records' picklist column value. Is it possible?

      Delete
  10. The custom data type is editable even when the editable attribute is set to false. Could not find anything in the documentation as well. Please let me know if you have any idea to make custom type editable conditionally.

    ReplyDelete
    Replies
    1. You will need to do some customization for this to work. Either you set some public boolean variable in datatablePicklist and pass this field as true or false dynamically from your datatable columns or set your datatable column as simple text for specific scenarios and re-render the datatable.

      Delete
  11. Thanks for the response! Seems like this could be done using the read-only attribute of lightning combo box. But the problem is it cannot be set to true or false. If it is present the combobox is read only whether you keep it as true or false.

    ReplyDelete
  12. Hi Yogendra, thanks for sharing this! Once I click inside the datatableDemo component to change the picklist value a cursor starts to appear. It propagates to the next screen. Any idea how to resolve that?

    ReplyDelete

Post a Comment