How to display Reference(Parent) Fields Data in Datatable in Lightning Component

By default, the lightning data table shows the current record data, it will not display parent record data.
Ex: Account.Owner.Name

This post explains how to display reference(Parent) fields data in the lightning data table

Example:
In this example, I am querying the opportunity data along with Account related data and Owner related data.

ReferenceDataInDatatable.cmp

<aura:component controller="LWCExampleController" implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="data" type="List" />
    <aura:attribute name="columns" type="List"/>
        
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    
    <lightning:card title="Showing Reference Fileds Data in Lightning Datatable">
        <lightning:datatable data="{!v.data}"
                             columns="{!v.columns}"
                             keyField="id"
                             hideCheckboxColumn="true"/>
    </lightning:card>
    
</aura:component>

ReferenceDataInDatatable.js

({
    doInit : function(component, event, helper) {
        component.set('v.columns', [
            {label: 'Opportunity Name', fieldName: 'Name', type: 'text'},
            {label: 'Account Name', fieldName: 'AccountName', type: 'text'},
            {label: 'Account Owner', fieldName: 'AccountOwner', type: 'text'},
            {label: 'Opportunity Owner', fieldName: 'OpportunityOwner', type:'text'},
            {label: 'CreatedDate', fieldName: 'CreatedDate', type:'Date'}
        ]); 
        
        // getting Opportunity data from server
        var action = component.get("c.retriveOpportunities");
        action.setParams({
            // set parameters if any 
        });
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                var rows = response.getReturnValue();
                
                for (var i = 0; i < rows.length; i++) {
                    var row = rows[i];
                    // checking if any account related data in row
                    if (row.Account) {
                        row.AccountName = row.Account.Name;
                        row.AccountOwner = row.Account.Owner.Name;
                    }
                    // checking if any owner related data in row
                    if(row.Owner) {
                        row.OpportunityOwner = row.Owner.Name;
                    } 
                    // formatting created date 
                    row.CreatedDate = $A.localizationService.formatDate(row.CreatedDate, "MMMM DD YYYY, hh:mm:ss a")
                }
                // setting formatted data to the datatable
                component.set("v.data", rows);
            }
        });
        $A.enqueueAction(action);
    }
})

ApexClass

public inherited sharing class LWCExampleController {
    @AuraEnabled(cacheable=true)
    public static list<Opportunity> retriveOpportunities() {
        return [SELECT Id, Name, Account.Name, Account.owner.name, Owner.Name, CreatedDate FROM Opportunity LIMIT 10];
    }
}

Result