function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SimmoSimmo 

Can you add a picklist to an aura datatable?

Is there any way of displaying a picklist within an aura datatable?

I've read that only certain data types can be used within a datatable, but there must be a way of displaying a picklist or something similar where the user can select a value from a list of values?

Anybody managed to do this?
 
Best Answer chosen by Simmo
Khan AnasKhan Anas (Salesforce Developers) 
Hi Simmo,

Greetings to you!

As of now, we can not do that. There's an idea that is active on the success community with a similar discussion for which you can upvote so that it gets available in the future.

https://success.salesforce.com/ideaView?id=0873A000000PZJ4QAO

As an alternative, you would need to implement a custom HTML data table if you wanted to have this feature available. 
Or You can change the type of the picklist column from the picklist to button. On button press, open a modal that fetches and displays the picklist values.

Please refer to the below links which might help you further with the above requirement.

http://www.sfdcpanda.com/lightning-datatable-with-picklist-select-powered-in-edit-mode/

https://github.com/dineshdk/lightning-datatable-with-picklist-select-powered-in-Edit-Mode

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas

All Answers

Khan AnasKhan Anas (Salesforce Developers) 
Hi Simmo,

Greetings to you!

As of now, we can not do that. There's an idea that is active on the success community with a similar discussion for which you can upvote so that it gets available in the future.

https://success.salesforce.com/ideaView?id=0873A000000PZJ4QAO

As an alternative, you would need to implement a custom HTML data table if you wanted to have this feature available. 
Or You can change the type of the picklist column from the picklist to button. On button press, open a modal that fetches and displays the picklist values.

Please refer to the below links which might help you further with the above requirement.

http://www.sfdcpanda.com/lightning-datatable-with-picklist-select-powered-in-edit-mode/

https://github.com/dineshdk/lightning-datatable-with-picklist-select-powered-in-Edit-Mode

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
This was selected as the best answer
Deepali KulshresthaDeepali Kulshrestha
Hi Simmo,

In the below example, I’m retrieving the “Account” object “Industry” picklist values and populating on the lightning component using ui:inputSelect.

Apex:
public class AccountAuraController {
    @AuraEnabled
    public static List<String> getIndustry(){
        List<String> options = new List<String>();
        Schema.DescribeFieldResult fieldResult = Account.Industry.getDescribe();
        List<Schema.PicklistEntry> pList = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry p: pList) {
            options.add(p.getLabel());
        }
        return options;
    }
}

component:
<!--TestComponent-->
<aura:component controller="AccountAuraController" access="global" implements="force:appHostable">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>    
    <div class="slds-form-element">
        <label class="slds-form-element__label" for="select-01">Select Industry</label>
        <div class="slds-select_container">
            <ui:inputSelect label="Industry" class="dynamic" aura:id="InputAccountIndustry" change="{!c.onPicklistChange}"/> 
        </div>
    </div>
</aura:component>

js controller:
({
    doInit: function(component, event, helper) {
        var action = component.get("c.getIndustry");
        var inputIndustry = component.find("InputAccountIndustry");
        var opts=[];
        action.setCallback(this, function(a) {
            opts.push({
                class: "optionClass",
                label: "--- None ---",
                value: ""
            });
            for(var i=0;i< a.getReturnValue().length;i++){
                opts.push({"class": "optionClass", label: a.getReturnValue()[i], value: a.getReturnValue()[i]});
            }
            inputIndustry.set("v.options", opts);
             
        });
        $A.enqueueAction(action); 
    },
    onPicklistChange: function(component, event, helper) {
        //get the value of select option
        var selectedIndustry = component.find("InputAccountIndustry");
        alert(selectedIndustry.get("v.value"));
    },
})

App
<!--TestApp-->
<aura:application extends="ltng:outApp" access="global">
    <c:TestComponent />
</aura:application>


I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
www.kdeepali.com
SimmoSimmo
Hi Deepali,
Thank you for the code snippets, I will give this a try and get back to you to let you know if it worked for me.
Jon
 
SimmoSimmo
Hi Khan,
Thank you for the links, I will have a read and see if it helps.
Jon
 
Steve Coleman 5Steve Coleman 5
Hi Khan, Thank you. Marking this as a best answer. Manifest your mind and thoughts (https://tecsmash.com/ultra-manifestation-review/) bro. So that you could help more people like us.
SimmoSimmo
I ended up creating a HTML table to solve this problem, then styling it to give it the Salesforce look.
 
lkatneylkatney
There is a custom utility developed by Venky Kambham which solves this issue. Please download this utility from below link
https://www.playg.app/play/picklist-in-lightning-datatable-aura
 
Shaik naina 5Shaik naina 5

hi simmo

how did you create the html table to solve the issue?

can i have that code please???