function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Akash v 6Akash v 6 

How to edit the row in Lightning:table


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 size="4">
            <lightning:input name="input2" value="{!v.value2}" label="Field 2" />
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem size="4">
                <lightning:button variant="base" label="Add Field" title="Add Field" onclick="{! c.handleClick }"/>
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem size="4">
                                 columns="{! v.columns }"
                                 data="{! }"
                                 onrowaction="{! c.handleRowAction }"
    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("");
        var obj = {  "id": listID,
                   "concatenatedResult": newVal};
        component.set("", 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('');
        switch ( {
            case 'edit':
                //modal logic may come here
            case 'remove':
                data = {
                    if ( == {
                        let confirmed = confirm("Are you sure?");
                        if (confirmed === true) {
                            data = data.filter(element => !=;
                            component.set("", data);
                            alert("This has been Deleted");

Rounak SharmaRounak Sharma
Hello Akash,

Please refer the following

Please let me know if it helps.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Akash,

Greetings to you!

Please refer to the below links which might help you further with the above requirement.

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
Ajay K DubediAjay K Dubedi
Hi Akash,

If you create an Inline edit button in Lighting datatable then use the below links:




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