Hi Mahesh,

Greetings to you!

You can show Contact details in modal pop up or in a lightning table. Please try the below code, I have tested in my org and it is working fine. I am showing contact details in a modal popup. Kindly modify the code as per your requirement.

Component:

<aura:component controller="TreeC"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="items" type="Object"/>
    <aura:attribute name="contact" type="List"/>
    
    <!--Lightning Tree-->
    <div class="slds-m-around_xx-large">
        <lightning:tree items="{!v.items}" onselect="{!c.handleSelect}" header="Account and Contacts"/>
    </div>
    <!--Lightning Spinner-->
    <div>
        <lightning:spinner alternativeText="Processing.." title="Processing.." aura:id="spnr" variant="brand" size="large" />
    </div>
    
    <div role="dialog" tabindex="-1" aria-labelledby="header43" aura:id="Modalbox" class="slds-modal slds-modal_large">
        <div class="slds-modal__container" style="width: 40%;">
            <div class="slds-modal__header">
                <p>Contact Details</p>
            </div>
            <div class="slds-modal__content slds-p-around--medium">  
                <aura:iteration items="{!v.contact}" var="acc">
                    Contact Name : <ui:outputText value="{!acc.Name}" />
                    <br/><br/>
                    Phone : <ui:outputText value="{!acc.Phone}" />
                </aura:iteration>
                
            </div>
            <div class="slds-modal__footer">
                <lightning:button label="close" onclick="{!c.closeModal}" />
            </div>
        </div>
    </div>
    
</aura:component>

Controller:

({
    doInit: function (component, event, helper) {
        var spinner = component.find("spnr");
        var action = component.get('c.getAccountTree');
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                //get account and respective contact list, and initialize with items
                component.set('v.items', response.getReturnValue());
                //hide spinner after getting data
                $A.util.toggleClass(spinner, "slds-hide");
            }else{
                $A.util.toggleClass(spinner, "slds-hide");
                alert('ERROR');
            }
        });
        $A.enqueueAction(action);
    },
    
    handleSelect: function(component,event, helper) {
        var cmpTarget = component.find('Modalbox');
		var cmpBack = component.find('Modalbackdrop');
		$A.util.addClass(cmpTarget, 'slds-fade-in-open');
		$A.util.addClass(cmpBack, 'slds-backdrop--open');
        
        var cId = event.getParam('name');        
        var action = component.get('c.getContactDetails');
        action.setParams({
            recordId : cId
        });
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === 'SUCCESS'){
                component.set('v.contact', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
    
    closeModal: function(component, event, helper) {
        var cmpTarget = component.find('Modalbox');
        var cmpBack = component.find('Modalbackdrop');
        $A.util.removeClass(cmpBack,'slds-backdrop--open');
        $A.util.removeClass(cmpTarget, 'slds-fade-in-open');
    },
})

CSS:

.THIS {
}

.THIS .slds-section__title{
    background-color: YellowGreen;
    color: white
}
.THIS .slds-modal__header{
    background-color: OliveDrab;
    color: white
}

Apex:

public class TreeC {
    
    @AuraEnabled
    public static List<item> getAccountTree(){
        
        List<item> items = new List<item>();
        List<Account> acctList = new List<Account>();
        //get list of accounts and respective contacts
        acctList = [SELECT Id, Name, (SELECT Id, Name, Phone From Contacts) From Account LIMIT 10];
        for(Account acc: acctList){
            
            //get contacts of current account record
            List<item> conitems = new List<item>();
            for(Contact c: acc.Contacts){
                //add contact items
                item conitem = new item(c.Name, String.valueOf(c.Id), false, null);
                conitems.add(conitem);
            }
            
            //add account items
            item accitem = new item(acc.Name, String.valueOf(acc.Id), false, conitems);
            items.add(accitem);
        }
        return items;
    }
    
    //Item Wrapper Class
    public class item{
        @AuraEnabled
        public String label {get; set;}
        @AuraEnabled
        public String name {get; set;}
        @AuraEnabled
        public Boolean expanded {get; set;}
        @AuraEnabled
        public List<item> items {get; set;}
        
        public item(String label, String name, Boolean expanded, List<item> items){
            this.label = label;
            this.name = name;
            this.expanded = expanded;
            this.items = items;
        }
    }
    
    @AuraEnabled
    public static Contact getContactDetails(Id recordId){
        Contact con = [SELECT Id, Name, Phone FROM Contact where Id=:recordId];
        return con;
         
    }
}

Also, please refer to below link which might help you further with the above requirement.

http://www.cloudyabhi.com/2017/09/lightningtree-to-display-account.html

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future.

Thanks and Regards,
Khan Anas