You need to sign in to do that
Don't have an account?

How to edit the row in Lightning:table
Hi,
I have below code the is working fine except the edit button..I want the data to edit and update the row the modal box.
I have below code the is working fine except the edit button..I want the data to edit and update the row the modal box.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" controller= "YouTubeSearchController"> <aura:attribute name="value1" type="String" default="" /> <aura:attribute name="value2" type="String" default="" /> <aura:attribute name="idsList" type="Integer" default="1" /> <aura:attribute name="columns" type="List" default="[]"/> <aura:attribute name="data" type="List" default="[]"/> <aura:handler name="init" value="{! this }" action="{! c.init }"/> <lightning:layout horizontalAlign="space"> <lightning:layoutItem size="4"> <lightning:input name="input1" value="{!v.value1}" label="Field 1" /> </lightning:layoutItem> <lightning:layoutItem size="4"> <lightning:input name="input2" value="{!v.value2}" label="Field 2" /> </lightning:layoutItem> <lightning:layout horizontalAlign="space"> <lightning:layoutItem size="4"> <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.handleClick }"/> </lightning:layoutItem> </lightning:layout> </lightning:layout> <lightning:layout horizontalAlign="space"> <lightning:layoutItem size="4"> <lightning:datatable columns="{! v.columns }" data="{! v.data }" keyField="id" onrowaction="{! c.handleRowAction }" hideCheckboxColumn="true"/> </lightning:layoutItem> </lightning:layout> </aura:component>
({ init: function(component, event, helper) { component.set('v.columns', [ {label: 'Concatenated Result', fieldName: 'concatenatedResult', type: 'text'}, {label: 'View', type: 'button', initialWidth: 135, typeAttributes: { label: 'Edit', name: 'edit', title: 'Edit'}}, {label: 'Remove', type: 'button', initialWidth: 135, typeAttributes: { label: 'Remove', name: 'remove', title: 'Remove'}} ]); }, handleClick : function(component, event, helper) { var listID= component.get("v.idsList"); // concatenate Strings var value1 = component.get("v.value1"); var value2 = component.get("v.value2"); var newVal = value1+value2; var data = component.get("v.data"); var obj = { "id": listID, "concatenatedResult": newVal}; data.push(obj); component.set("v.data", data); component.set("v.idsList", parseInt(component.get("v.idsList"))+1); }, handleRowAction : function(component, event, helper) { var action = event.getParam('action'); var row = event.getParam('row'); var data = component.get('v.data'); switch (action.name) { case 'edit': //modal logic may come here break; case 'remove': data = data.map(function(rowData) { if (rowData.id == row.id) { let confirmed = confirm("Are you sure?"); if (confirmed === true) { data = data.filter(element => element.id != row.id); component.set("v.data", data); alert("This has been Deleted"); } else{ return; } } }); break; } } })
Please refer the following
https://developer.salesforce.com/docs/component-library/bundle/lightning:recordEditForm/example
Please let me know if it helps.
Thanks
Greetings to you!
Please refer to the below links which might help you further with the above requirement.
http://www.infallibletechie.com/2018/04/lightningdatatable-with-buttons-in.html
http://www.sfdcpanda.com/lightning-datatable-with-picklist-select-powered-in-edit-mode/
https://rajvakati.com/2018/11/13/lightningdatatable-inline-editing/
I hope it helps you.
Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.
Thanks and Regards,
Khan Anas
If you create an Inline edit button in Lighting datatable then use the below links:
1.https://rajvakati.com/2018/11/13/lightningdatatable-inline-editing/
2.https://salesforce.stackexchange.com/questions/251592/lightning-data-table-inline-edit
3.http://sfdcmonkey.com/2017/12/08/lightning-data-table-inline-editing/
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks and Regards,
Ajay Dubedi
www.ajaydubedi.com