Deselect the specific checkbox of the row of aura lightning dataTable

lightning-aura-componentslightning-datatable

I am using aura lightning dataTable to show the records with the checkbox, when click on the checkbox the selected rows printing below the dataTable and now I want that, when remove any of the selected records then the same record checkbox of the dataTable should be deselect.

DataTable

In the above screenshot if I will remove

In the above screenshot if remove AE User21 pills then it should deselect same name row checkbox.

<lightning:datatable
                    keyField="id"
                    columns="{!v.columnsCopy }"
                    data="{!v.data}"
                    hideCheckBoxColumn="true"
                    defaultSortDirection="{!v.defaultSortDirection}"
                    sortedDirection="{!v.sortDirection}"
                    sortedBy="{!v.sortedBy}"
                    onsort="{!c.handleSort}"
                    onrowselection="{!c.handleSelect}"                 >
                    </lightning:datatable>

handleSelect : function(component, event, helper) {
    
    var selectedRows = event.getParam('selectedRows'); 
    var setRows = [];
    for ( var i = 0; i < selectedRows.length; i++ ) {
        
        setRows.push(selectedRows[i]);

    }
    component.set("v.selectedUsers", setRows);
    
    console.log('selectedUsers '+JSON.stringify(component.get('v.selectedUsers')));
    
}

removeUser:function(component, event, helper){
    var eventDataSet = event.target.dataset.index;
    alert('eventDataSet ' + eventDataSet);
    var Users = component.get('v.selectedUsers');
    Users.splice(Number(eventDataSet),1);
    component.set("v.selectedUsers", Users);
}

Best Answer

You can use the 'selectedRows' attribute of the data table to achieve this.

You can store and update the selected rows as you are doing, but then then you update that from the buttons below the table make sure that you also set that selectedRows attribute for the table as well as updating the list.

There's a section on selecting rows programmatically within the datatable documentation here: https://developer.salesforce.com/docs/component-library/bundle/lightning:datatable/documentation

Related Topic