Hello

I would like to create a lightning datatable (or another other type of lightning tables) in my aura component in order to display a nested data.
The data is composed of accounts with their related contacts. I built it using a wrapper class in the apex controller and then i pass it to the component through a helper in order to display it in my component.

I tested the accessibility of that data in my component ( i managed to display it as simple text) but after trying to organize it in a datatable, this later is not displaying any of my data.

My question is how can i define the attribute column of the datatable so it allows me to show the accounts with their related contacts? 

Here is what i made.

Apex controller

public with sharing class ReferralProgramApexController {
      @AuraEnabled
    public static List<AccountRelatedContactsWrapper> getNestedAccounts() {
  
        //create a list to store in it the custom objects of type AccountRelatedContactsWrapper
        List<AccountRelatedContactsWrapper> AccountsContactsWrapperList = new List<AccountRelatedContactsWrapper>();
        //retreive 3 accounts each with all its related contacts
        List<Account> AccountsContactsNestedList = [SELECT Id, Name,
                                    (SELECT Id, Email, phone From Contacts)
                                    FROM Account Limit 3];
        //check if the accounts list is not empty
        if(!AccountsContactsNestedList.isEmpty()){
            //loop over the retrieved accounts
            for(Account acc : AccountsContactsNestedList){
                //create a wrapper object of type AccountRelatedContactsWrapperand add it to the objects list 
                AccountsContactsWrapperList.add(new AccountRelatedContactsWrapper(acc, acc.Contacts));
            }
        }
        return AccountsContactsWrapperList; 
    }

    // wrapper class with @AuraEnabled and {get;set;} properties 
    public class AccountRelatedContactsWrapper{
        //properties
        @AuraEnabled
        public Account accRecord{get;set;}
        @AuraEnabled
        public List<Contact> contactList{get;set;}
        //constructor
        public AccountRelatedContactsWrapper(Account accRecord,List<Contact> contactList){
            this.accRecord = accRecord;
            this.contactList = contactList;
        }
       
    }
    
}

Data structure i get 

helper

({
	getData : function(component) {
        // Create a remote method call (Action) from apex controller
        let action = component.get("c.getNestedAccounts");
        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            let state = response.getState();
            if (state === "SUCCESS") {
                //set the component accountlList attribute with fetched data
                component.set("v.AccountNestedList", response.getReturnValue());                   
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        // Send action off to be executed
        $A.enqueueAction(action);
    }
})

controller 

({
    // Load Accounts from Salesforce
    FetchData: function(component, event, helper) {
        //set the datatable according to the data to be fetched
        component.set('v.columns', [
            {label: 'Account Id', fieldName: 'accRecord.Id', type: 'text' },
            {label: 'Name', fieldName: 'accRecord.Name', type: 'text' },
            {label: 'Email', fieldName: 'contactList.Email', type: 'text' },
            {label: 'Phone', fieldName: 'contactList.Phone', type: 'text' }
        ]);
        helper.getData(component);
    }
  
})

component definition

<aura:component controller = "ReferralProgramApexController"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

    <aura:attribute name="AccountNestedList" type="object[]"/>
    <aura:attribute name="columns" type="List"/>

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

    <aura:if isTrue="{!not(empty(v.AccountNestedList))}">
         <lightning:datatable data="{!v.AccountNestedList.accRecord}" 
                         columns="{!v.columns}" 
                         keyField="Id"
                         hideCheckboxColumn="true"/>
      
      <!--  <aura:iteration items="{!v.AccountNestedList}" var="obj" indexVar="sNo"> 
                 {!obj.accRecord.Name}
            <aura:iteration items="{!obj.contactList}" var="cont"> 
                {!cont.Email} {!cont.Phone}
            </aura:iteration> 
        </aura:iteration>         
        -->
     <aura:set attribute="else">
                <div Style="text-align : center"> " There are no contacts " </div>
            </aura:set>
     </aura:if>
    
    
    
</aura:component>

​​​​​​
Thank you in advance.