function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Jagadesh BandaruJagadesh Bandaru 

print lightning datatable

HI,

I have a requirement to print the results returned on a lightning component (being shown on lightning datatable) . I have tried pulling in the HTML from the div that contains the datatable, but I could not get that done. Any suggestions?
Ajay K DubediAjay K Dubedi
Hi Jagadesh,
        
        Here is a solution to your Problem.
        
        
        /--------Component------/
        
<aura:component controller="AuraUtility"
                implements="flexipage:availableForAllPageTypes,lightning:actionOverride,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:appHostable" >
    <aura:attribute name="productList" type="sobject[]"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <div class="slds-page-header" style="background-color: darkturquoise;" >
        <div class="slds-media">
            <div class="slds-media__figure">
                <span class="slds-icon_container">
                    <lightning:icon iconName="utility:automate" size="small" 
                                    alternativeText="Indicates Logo"/>
                </span>
            </div>
            <div class="slds-media__body">
                <h1 class="slds-page-header__title slds-truncate slds-align-middle" 
                    title="Products List">Product List</h1>
            </div>
        </div>
    </div>
    
    <div class="slds-m-vertical_xx-large slds-m-horizontal_xx-large">
        <aura:if isTrue="{!v.productList.length > 0}">
            <lightning:datatable data="{! v.productList }" columns="{! v.mycolumns }" keyField="id" />    
        </aura:if>
    </div>
</aura:component>

        /--------Controller_js------/
({
    doInit : function(component, event, helper) {
        console.log('>>>>>>>>>>>>>fetch All>>>');
        helper.fetchProduct_helper(component, event, helper);        
    }
})

        /--------Helper_js------/
        
        
({
    fetchProduct_helper : function(component, event, helper) {
        component.set('v.mycolumns', [
            {label: 'Product Code', fieldName: 'ProductCode', type: 'text'},
                {label: 'Product Name', fieldName: 'Name', type: 'text'},
                {label: 'Product Description', fieldName: 'Description', type: 'text'}
            ]);
        var action = component.get("c.displayPro");
        action.setParams({
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set("v.productList", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

    /--------AuraUtility_ApexClass------/    
    
    public class AuraUtility {
        @AuraEnabled    
        public static List<Product2> displayPro() {
            List<Product2> proList = new List<Product2>();
                proList = [SELECT Id,ProductCode,Name,Description FROM Product2 Limit 10];
            if(proList.size()>0)
                return proList;
            else
                return null;
        } 
    }
    /--------Application------/
    
    <aura:application extends="force:slds"> 
        <c:showTable/>
    </aura:application>    
 
Hope this explanation will help you.
Thanks.
Ajay Dubedi