How to map relationship query results to Lighting Data Table ?

We can not straight forward map relationship filed from apex to LWC data table. When we get query results related object information comes  as different object itself. So we need to traverse the query results and map the way we want to.

Hers is your controller method

@AuraEnabled(cacheable=true)

    public static List<Associated_Healthcare_Center__c> getAssociatedFacility(Id sLeadId,Id sAccountId){

       

    return [SELECT id,Signature_Healthcare_Center__c,Signature_Healthcare_Center__r.phone__c,

                 Signature_Healthcare_Center__r.Facility_Short_Name__c,

                 Signature_Healthcare_Center__r.Admission_Director__r.Name

                 FROM Associated_Healthcare_Center__c WHERE Account__c =:sAccountId 

                 Order By Signature_Healthcare_Center__r.Facility_Short_Name__c];

          

       

    }

Template Data table code 

      <div style="height: 300px;">

            <lightning-datatable

                    key-field="Signature_Healthcare_Center__c"

                    data={data}

                    columns={columns}>

            </lightning-datatable>

        </div>

Template Java script code.

import { LightningElement,api,wire,track} from 'lwc';

import getAssociatedFacility from '@salesforce/apex/AssignFacilityLWCController.getAssociatedFacility';

const columns = [

    { label: 'Facility', fieldName: 'Facility' },

    { label: 'Admission Director', fieldName: 'AdmissionDirector', type: 'text' },

    { label: 'Phone', fieldName: 'Phone', type: 'phone' },

    

];

export default class AssignFacilityLWCModal extends LightningElement {

    @api recordId;

    @api accountId;

   

    @track data;

    @track columns = columns;

    @track error;

    /*connectedCallback() {

       console.log('Inside chield component record Id -->',this.recordId);

       if(this.recordId){

           getAssociatedFacility({sLeadId:this.recordId,sAccountId:this.accountId})

            .then(result=>{

                console.log('result-->',result);

            }).catch(err => {

                console.log('err',err)

                this.showError(err.message);

            });

       }

       

    }*/

    @wire(getAssociatedFacility,{sLeadId:'$recordId',sAccountId:'$accountId'})

    getAssociatedFacilityWired({ error, data }) {

        if (data) {

            

            

               let tempRecords = JSON.parse( JSON.stringify( data ) );

                    tempRecords = tempRecords.map( row => {

                    return { ...row, Facility: row.Signature_Healthcare_Center__r.Facility_Short_Name__c,

AdmissionDirector: row.Signature_Healthcare_Center__r.Admission_Director__r.Name, 

Phone: row.Signature_Healthcare_Center__r.Phone__c };

                });

                 console.log(' this.datempRecordta-->', this.tempRecords);

                this.data = tempRecords;

           

            this.error = undefined;

        } else if (error) {

            this.error = error;

            this.data = undefined;

        }

    }

In Console this is how query results will be shown before mapping

Here is actual Output