1

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?

enter image description here

1
  • Yes its possible, but what have you tried – Nagendra Singh Jan 22 at 9:02
2

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.

1
  • Hi Boris - Thank you so much for the response. It works.. – Vinit Mehta Jan 22 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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