function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brian CBrian C 

Conditional editing in Lightning Datatable

When defining the columns for a Lightning Datatable, is it possible to set the editable property for a column based on data in another column?

Here is what I have for the column definitions currently: 
var columns = [
                { label: "Ship To", initialWidth: 235, fieldName: "fulfilltype", type: "text" },
                { label: "Status", initialWidth: 100, fieldName: "status", type: "text" },
                { label: "Cost", fixedWidth: 165, fieldName: "cost", type: "currency", editable: true }
            ];

I would like the "cost" field to be editable based on the value in the "status" field. For example, if the status is "Shipped," allow the cost to be edited on that line. If it is any other status, switch that line's cost editable property to false.

I've looked into Validation Rules for setting this criteria on the object in question, but I'd prefer the user to not even see the pencil to edit within the datatable.
Raj VakatiRaj Vakati
I dnt think so you can able to set the conditional edit because the editable property is set at the table column header level  ..
these are the options 
 
  1. Validation rule 
  2. Or Dnt save then  column when you are saving the edit valued when save is performed on edited cells 

like below  
saveDataTable : function(component, event, helper) {
var editedRecords = component.find(“accountDataTable”).get(“v.draftValues”);
If(totalRecordEdited[0].status!='Shipped'){
Dnt save though an alert message or you can skip them at apex class also 
}else{
var totalRecordEdited = editedRecords.length;
var action = component.get(“c.updateAccounts”);
action.setParams({
‘editedAccountList’ : editedRecords
});
action.setCallback(this,function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
//if update is successful
if(response.getReturnValue() === true){
helper.showToast({
“title”: “Record Update”,
“type”: “success”,
“message”: totalRecordEdited+” Account Records Updated”
});
helper.reloadDataTable();
} else{ //if update got failed
helper.showToast({
“title”: “Error!!”,
“type”: “error”,
“message”: “Error in update”
});
}
}
});
$A.enqueueAction(action);
}
},