How can we make inline edit form features for relational record in the lightning datatable?
Below is the current code, and I would like to you to correct this code to achive inline edit for relational reocrd.
component
<lightning:datatable columns="{!v.columns}"
data="{!v.data}"
keyField="id"/>
Javascript
var columns = [
{label:'product code', fieldName:'prod_code', type:'STRING', editable:true},
{label:'product name', fieldName:'prod_name', type:'STRING'}, editable:true},
{label:'employee name', fieldName:'emp_name', type:'url', editable:true, typeAttributes:{label:{fieldName: "emp_name"}}}
];
//please assume that employee name is the relational record with a parent object.
//and other two records are the normal records.
component.set("v.columns", columns);
var data = [
{prod_code:"001K89", prod_name:"product A", emp_name:{Name:"employee A"}}
];
component.set("v.data", data);
By this code something like this picture is shown and cannot edit relational record.
I would like to make inline edit like attached.
Thnak you in advance.