preselect rows in lightning:datatable

Question

I have a data table, where I'm showing Pricebook entries with other values using the wrapper. I need to show some rows preselected, but it seems to be not working.

Component:

    <aura:attribute name="selectedRows" type="Object"/>
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />

        <div style="height: 600px; width:1200px;">
                                    
                                    <lightning:datatable
                                                         columns="{! v.columns }"
                                                         data="{! v.data }"
                                                         keyField="id"
                                                         onrowselection="{! c.updateSelectedText }"
                                                         selectedRows="{! v.selectedRows }"
                                                         />
                                </div>

Controller:

doInit : function(component, event, helper) {
        let selectedIds = ['01u4S000000oZIxQAM','01t4S000000M0rwQAC'];
        component.set("v.selectedRows",selectedIds);
        
        component.set('v.columns', [
            {label: 'Product name', fieldName: 'ProductName', type: 'text',minColumnWidth: 70},
            {label: 'Product Code', fieldName: 'ProductCode', type: 'text'},
            {label: 'List Price', fieldName: 'UnitPrice', type: 'text'},
            {label: 'Product Description', fieldName: 'ProductDescription', type: 'text'},
            {label: 'Product Family', fieldName: 'ProductFamily', type: 'text'}
        ]);

            var action = component.get("c.getPriceBookEntry");
            action.setParams({ pricebookId : component.get("v.selectedPriceBookId") });
            action.setCallback(this, function(a) {
                var state = a.getState();
                if (state === "SUCCESS"){
                    var rows = a.getReturnValue();
                    //var rows = response.getReturnValue();
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i];
                        if (row.priceBook.Product2){
                            row.ProductName = row.priceBook.Product2.Name;
                            row.ProductDescription = row.priceBook.Product2.Description;
                            row.ProductFamily = row.priceBook.Product2.Family;
                            row.UnitPrice = row.priceBook.UnitPrice;
                            row.ProductCode = row.priceBook.ProductCode;
                            row.Required = true;
                            row.deleted = false;
                            row.heading = '';
                            row.id = row.priceBook.Id;
                        } 
                    }
                    component.set('v.data', rows);
                } 
            });
            $A.enqueueAction(action);
        
    },

Not sure what I'm doing wrong, but I can't see the rows preselected .

Answer 1

Everything looks right here except, I can think of the sequencing of setting variables. Can you try this?

if (state === "SUCCESS"){
                        var rows = a.getReturnValue();
                        //var rows = response.getReturnValue();
                        for (var i = 0; i < rows.length; i++) {
                            var row = rows[i];
                            if (row.priceBook.Product2){
                                row.ProductName = row.priceBook.Product2.Name;
                                row.ProductDescription = row.priceBook.Product2.Description;
                                row.ProductFamily = row.priceBook.Product2.Family;
                                row.UnitPrice = row.priceBook.UnitPrice;
                                row.ProductCode = row.priceBook.ProductCode;
                                row.Required = true;
                                row.deleted = false;
                                row.heading = '';
                                row.id = row.priceBook.Id;
                            } 
                        }
                        component.set('v.data', rows);
    
                       let selectedIds = ['01u4S000000oZIxQAM','01t4S000000M0rwQAC'];
                       component.set("v.selectedRows",selectedIds);
                    }