[SalesForce] How to handle selected rows from two different data tables in Lightning

I am using two different data tables in lightning.

  1. On page load i am showing one data table.
  2. In search bar on search of particular keyword,i am displaying another datatable to display the search results.

when search results is displayed the page load datatable wont appear.

Now the issue is i will select one particular record from on page datatable.

I will search some results and will select one record from second datatable also.

on selection of results from second datatable the first datatable selected records were clearing out.How to handle this scenerio?

Component attributes:

<aura:attribute name="selectedRowsDetails" type="Object" />
    <aura:attribute name="selectedRowsList" type="List" />
    <aura:attribute name="maxRowSelection" type="Integer" default="25"/>
    <aura:attribute name="selectedRows" type="List" />

First data table i am using as below:

<aura:if isTrue="{!empty(v.searchResult)}">
<lightning:datatable columns="{!v.columns}"
                     data="{!v.data}"
                     keyField="Id"
                     onrowaction="{!c.handleRowAction}"
                     selectedRows="{!v.selectedRows}"                                                    
                     maxRowSelection="{!v.maxRowSelection}"
                     onrowselection="{!c.handleSelectedRow}"                                                                 
                     enableInfiniteLoading="true"
                     loadMoreOffset="{!v.loadMoreOffset}"
                     sortedBy="{!v.sortedBy}"                                                                
                     sortedDirection="{!v.sortedDirection}"                                                              
                     defaultSortDirection="{!v.defaultSortDirection }"
                     onsort="{!c.handleColumnSorting}"
                     onloadmore="{!c.handleLoadMoreAssets}"/>
</aura:if>

second data table as below:

<aura:if isTrue="{!not(empty(v.searchResult))}">
<lightning:datatable columns="{!v.columns}"
                     data="{!v.searchResult}"
                     keyField="Id"
                     onrowaction="{!c.handleRowAction}"
                     selectedRows="{!v.selectedRows}"                                                    
                     maxRowSelection="{!v.maxRowSelection}"
                     onrowselection="{!c.handleSelectedRow}"                                                                 
                     enableInfiniteLoading="true"
                     loadMoreOffset="{!v.loadMoreOffset}"
                     sortedBy="{!v.sortedBy}"                                                                
                     sortedDirection="{!v.sortedDirection}"                                                              
                     defaultSortDirection="{!v.defaultSortDirection }"
                     onsort="{!c.handleColumnSorting}"
                     onloadmore="{!c.handleLoadMoreAssets}"/>
</aura:if>

controller methods for the above tables:

    handleSelectedRows: function (component, event, helper) {
        var data = component.get('v.data');
        var selectedRowList =  component.get("v.selectedRowsList");
    },
handleSelectedRow: function(component, event, helper){
        var selectedRows = event.getParam('selectedRows');
        component.set("v.selectedRowsCount", selectedRows.length);
        let obj =[] ; 
        for (var i = 0; i < selectedRows.length; i++){
            obj.push({Name:selectedRows[i].Name});
            }
        component.set("v.selectedRowsDetails", JSON.stringify(obj) );
        component.set("v.selectedRowsList", event.getParam('selectedRows'));
        },

enter image description here

In the above screen shot added products from available datatable genwattdiesel100kw and added searched product SLA:Silver.In the same way i want to add the products from two datatables.

I wrote two different onrowselection functions,to handle two different datatable attributes.Now how to combile those two attributes into single attribute to get all the selected items.

Best Answer

Your data tables are sharing virtually all of their bindings and action handlers:

                 onrowaction="{!c.handleRowAction}"
                 selectedRows="{!v.selectedRows}"                                                    
                 maxRowSelection="{!v.maxRowSelection}"
                 onrowselection="{!c.handleSelectedRow}"                                                                 
                 loadMoreOffset="{!v.loadMoreOffset}"
                 sortedBy="{!v.sortedBy}"                                                                
                 sortedDirection="{!v.sortedDirection}"                                                              
                 defaultSortDirection="{!v.defaultSortDirection }"
                 onsort="{!c.handleColumnSorting}"
                 onloadmore="{!c.handleLoadMoreAssets}"

Your controller code doesn't look at which data table is the source of any given event, and instead populates the relevant data into a single component attribute:

    component.set("v.selectedRowsDetails", JSON.stringify(obj) );
    component.set("v.selectedRowsList", event.getParam('selectedRows'));

You will find that this code structure has a number of unexpected effects, including "smearing" of both selection and sorting data across your tables. I would anticipate your infinite loading to behave rather strangely too.

If your tables have data and action that's entirely independent of one another, you'll probably find it easiest to implement separate controller actions for the two tables. You'll certainly need separate attributes to act as backing stores for the table state, such as the sorting order and key and the current selected rows.

Related Topic