Like in the below image in Quantity columns, I need to add input text field so that user can enter value in it.
Is it possible?
-
Yes its possible, but what have you tried – Nagendra Singh Jan 22 at 9:02
Add a comment
|
Asuming you are using Aura, yes you can. Fist you would need please find code snippets below.
CMP file:
<div style="height: 300px">
<lightning:datatable
keyField="Id"
columns="{!v.orderLabels}"
data="{!v.orders}"
hideCheckboxColumn="true"
minColumnWidth="120"
errors="{!v.errors}"
draftValues="{!v.draftValues}"
onsave="{!c.handleSave}"
onrowaction="{!c.handleRowAction}"
showRowNumberColumn="false"
/>
</div>
JS to prepare the table on init and set which fields are editable:
setTableLabels: function(component) {
let action = component.get("c.getOrderLabels");
action.setCallback(this, function(response) {
if (response.getState() === "SUCCESS") {
var labelsMap = response.getReturnValue();
var moreInfoLabel = $A.get("$Label.c.CM_More_Info");
component.set("v.orderLabels", [
{label: labelsMap.OrderLine, type: "button", typeAttributes:{
label: moreInfoLabel,
name: "showOrderLine",
disabled: false
}},
{label: labelsMap.Name, fieldName: "Name", type: "text"},
{label: labelsMap.RecipientName, fieldName: "recipient", type: "text"},
{label: labelsMap.OrderType, fieldName: "OrderType__c", type: "text"},
{label: labelsMap.Status, fieldName: "Status__c", type: "text"},
{label: labelsMap.OrderPeriodStartDate, fieldName: "OrderPeriodStartDate__c", type: "date"},
{label: labelsMap.OrderPeriodEndDate, fieldName: "OrderPeriodEndDate__c", type: "date"},
{label: labelsMap.TotalAmount, fieldName: "TotalAmount__c", type: "currency"},
{label: labelsMap.CancelledDate, fieldName: "CancelledDate__c", type: "date"},
{label: labelsMap.ShippingZipPostalCode, fieldName: "ShippingZipPostalCode__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingStreet2, fieldName: "ShippingStreet2__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingStreet1, fieldName: "ShippingStreet1__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingStateProvince, fieldName: "ShippingStateProvince__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingCountry, fieldName: "ShippingCountry__c", type: "text", editable: "true", hideDefaultActions: true},
{label: labelsMap.ShippingCity, fieldName: "ShippingCity__c", type: "text", editable: "true", hideDefaultActions: true}
]);
}
});
$A.enqueueAction(action);
},
JS to handle the save actions:
handleSave : function(component, event, helper) {
var draftValues = event.getParam('draftValues');
var action = component.get("c.updateOrders");
action.setParams({"orders": draftValues});
action.setCallback(this, function(response){
var state = response.getState();
if (state === "SUCCESS") {
helper.showToastMessage(component, "Success!", "Order information updated successfully.", "success");
$A.get('e.force:refreshView').fire();
} else {
var errors = response.getError();
console.log(errors);
helper.showToastMessage(component, "Error! Can't update record.", errors[0].message, "error");
$A.get('e.force:refreshView').fire();
}
});
$A.enqueueAction(action);
},
There are more details, but I think this could give you a good start.
