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 ?
Best Answer
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