Gist for displaying parent values on lightning datatable using wrapper class

DisplayParentFieldValCont.apx

/**
 *A class to display the value of the  parent field on the standard lightning datatable using wrapper.
 **/
public class DisplayParentFieldValCont{
    
    /**
     *@Desc: A method to fetch details of parent record
	 **/
    @AuraEnabled
    public static map<String,Object> getParentDetails(){
        map<String,Object> mapData = new map<String,Object>();
        list<DataWrapper> listContact  = new list<DataWrapper>();
            for(Contact objContact : [Select Id, Account.Name,
                                      		Account.Description,
                                      		Name,firstName,lastname 
                                      from Contact 
                                      Where AccountId <> NULL limit 5]){
                if(objContact.Account.Description <> NULL){
                      listContact.add(new DataWrapper(objContact.Account.Name,objContact.Name,
                                                objContact.Account.Description));                        
               }                          
                
            }
        mapData.put('ParentDetails',JSON.serialize(listContact));
        return mapData;
    }
    
   
    //A wrapper class that will be use do display the data of the object
    public class DataWrapper{
        @AuraEnabled public String strParentName	{get;set;}
        @AuraEnabled public String strChildName		{get;set;}
        @AuraEnabled public String strParentDesc	{get;set;}
        
        
        public DataWrapper(String p_strParentName,
                           String p_strChildName,
                           String p_strParentDesc){
        	this.strParentName =  p_strParentName;
            this.strChildName = p_strChildName;
            this.strParentDesc = p_strParentDesc;                   
        }
    }

}

DisplayparentFieldWithWrapper

/** lightning component code***/
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction"
                access="global" controller="DisplayParentFieldValCont">
    <aura:attribute name="listRecords" type="list" />
    <aura:attribute name="listCol" type="list" />
    
    <!-- aura helper methods -->
    <aura:handler name="init" value="{!this}" action="{!c.init}" />
    
    
    
    <!-- the container element determine the height of the datatable -->
    <div class="slds-page-header">
        		<article class="slds-card">
                    <div class="slds-card__header slds-grid">
                        <header class="slds-media slds-media_center slds-has-flexi-truncate">
                            <div class="slds-media__figure">
                                <span class="slds-icon_container slds-icon-standard-account" title="contact">
                                    
                                        <lightning:icon iconName="utility:contact"  size="medium"/>
                                        
                                    
                                    <span class="slds-assistive-text">Contact Details</span>
                                </span>
                            </div>
                            <div class="slds-media__body">
                                <h2 class="slds-card__header-title">
                                    <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
                                        <span>Display contact parent fields value using wrapper</span>
                                    </a>
                                </h2>
                            </div>
                            
                        </header>
                    </div>
                    <div class="slds-card__body slds-card__body_inner">
                         <lightning:datatable
                                            keyField="id"
                                            data="{!v.listRecords}"
                                            columns="{!v.listCol}"
                                            hideCheckboxColumn="true"/>
                        
                    </div>
                </article>
            	<div style="padding-top:2%;text-align:center">
                    
                </div>
          </div> 
</aura:component>

/** lightning component controller**/
({
	init : function(component, event, helper) {
		helper.getData(component,event);
	}
})

/** lightning component helper **/
({
	getData : function(component,event) {
        
        var columnslist =[
            {label: 'Parent AccountName', fieldName: 'strParentName', type: 'text'},
            {label: 'Child Contact Name', fieldName: 'strChildName', type: 'text'},
            {label: 'Parent AccountDesc', fieldName: 'strParentDesc', type: 'text'}];
        var self = this;
        var fetchDataAction = component.get("c.getParentDetails");
        self.serverSideCall(component,fetchDataAction).then(
            function(responseData){
                var fetchedData  = JSON.parse(responseData.ParentDetails);
                console.log(fetchedData);
                component.set("v.listRecords",fetchedData);
                component.set("v.listCol",columnslist);
             }
        ).catch(function(error){
            console.log('errod recieved***'+error);
            
        });
		
	},
    
    /**
     *  Inclusion of  Promise then to handle the response recieved from controller in a more appropriate way 
     **/
    serverSideCall : function(component,action) {
        return new Promise(function(resolve, reject) { 
            action.setCallback(this, 
                               function(response) {
                                   var state = response.getState();
                                   if (state === "SUCCESS") {
                                       var result = response.getReturnValue(); 
                                       resolve(result);
                                   } else {
                                       reject(new Error(response.getError()));
                                   }
                               }); 
            $A.enqueueAction(action);
        });
    },
    
})