1

I want to have inline edit functionality using lightning:dataTable . In my custom object , I have a field called Cabin_Class__c which is a picklist field. When i render this field in the table it is shown as text field. I know picklist fields are not part of lightning datatable but just want to be sure that is there any workaround to achieve this using lightning:dataTable component itself.

Sample Snippets

<lightning:card title="Flight Records">
        <lightning:datatable aura:id="FlightDataTable"
                             columns="{!v.tableColumns}"
                             data="{!v.tableData}"
                             onsort="{!c.updateColumnSorting}"
                             sortedBy="{!v.sortedBy}"
                             sortedDirection="{!v.sortedDirection}"
                             keyField="Id"
                             onsave ="{!c.onSave}"
                             hideCheckboxColumn="true"
                             />
    </lightning:card>

Controller.js

({
    doInit : function(component, event, helper) {        
        component.set('v.tableColumns', [
            {label: 'Name', fieldName: 'Name', editable:'true', sortable:'true', type: 'text'},
            {label: 'Arrival Airport', fieldName: 'Arrival_Airport__c', sortable:'true', editable:'true', type: 'phone'},
            {label: 'Cabin Class', fieldName: 'Cabin_Class__c', sortable:'true', editable:'true', type: 'text'},
            {label: 'Departure Airport', fieldName: 'Departure_Airport__c', sortable:'true', editable:'true', type: 'text'},
            {label: 'Fare Basis', fieldName: 'Fare_Basis__c', sortable:'true', editable:'true', type: 'text'},
            {label: 'Flight Number', fieldName: 'Flight_Number__c', sortable:'true', editable:'true', type: 'text'},
            {label: 'Flight Date', fieldName: 'Flight_Date__c', sortable:'true', editable:'true', type: 'date'}
        ]);        
        helper.getAllFlights(component, event, helper);
    },

    updateColumnSorting: function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        // assign the latest attribute with the sorted column fieldName and sorted direction
        cmp.set("v.sortedBy", fieldName);
        cmp.set("v.sortedDirection", sortDirection);
        helper.sortData(cmp, fieldName, sortDirection);
    },

    onSave : function (component, event, helper) {
        helper.saveDataTable(component, event, helper);

        // to refresh the Base method after Save.
        var tableRefresh = component.get("c.doInit");
        $A.enqueueAction(tableRefresh);
    }
})

I am looking for solution using Lightning tag and not inline edit with custom code. Is it possible in standard tag ?

-2

I also implemented a workaround for this with a modal: 1. Change the type of the picklist column from picklist to button 2. on button press open a modal which fetches and displays the picklist values

  • Kindly explain how you've implemented the workaround – User2529 Jul 19 '19 at 6:19

Not the answer you're looking for? Browse other questions tagged or ask your own question.