Lightning Datatable for LWC and Aura

Lightning DataTable : Aura Component

LightningDataTableController(Apex Controller )

public class LightningDataTableController{
    @AuraEnabled
    public static List<Contact> fetchAccountContacts(String accountId) { 
        List<Contact> lstContact=new List<Contact>();
        lstContact=[select id ,Name,Email,Phone from contact where accountid=:accountId];
        return lstContact;
    }
}

LightningDataTable.cmp (Component)

<aura:component controller="LightningDataTableController" 
                implements="force:hasRecordId,flexipage:availableForAllPageTypes,force:lightningQuickActionWithoutHeader" access="global">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="data" type="Object"/>
    <aura:attribute name="columns" type="List" default="[{label: 'Name', fieldName: 'LinkName', type: 'url', typeAttributes: {label: { fieldName: 'Name' }, target: '_blank'}},
            {label: 'Email', fieldName: 'Email', type: 'text'},
            {label: 'Phone', fieldName: 'Phone', type: 'text'}]"/>
    <aura:attribute name="recordId" type="String" default="" />
    <!-- the container element determine the height of the datatable -->
    <lightning:card aura:id="lightCard" class="slds-card_boundary" title="{!'Contacts ('+v.data.length+')'}" iconName="standard:contact">    
    <div style="overflow-x: auto;">
        <lightning:datatable style="height: 90% !important;display: block;"
                             aura:id="contacts"
                             columns="{!v.columns}"
                             data="{!v.data}"
                             keyField="id"
        />        
    </div>
        </lightning:card>
</aura:component>

LightningDataTableController.js (JS Controller )

({
 doInit : function(component, event){
        var contactAction = component.get("c.fetchAccountContacts"); 
        contactAction.setParams({
            accountId : component.get("v.recordId")
        });
        contactAction.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS" && response.getReturnValue() != '') {
                var records =response.getReturnValue();
                records.forEach(function(record){
                    record.LinkName = '/'+record.Id;
                });
                component.set('v.data',response.getReturnValue());
            }else if(state === "ERROR"){
                console.log('A problem occurred: ' + JSON.stringify(response.error));
            }
        });
        $A.enqueueAction(contactAction); 
    }
})

Lightning DataTable : Lightning Web Component

LightningDataTableController(Apex Controller )

public class LightningDataTableController{
    @AuraEnabled(cacheable=true)
    public static List<Contact> fetchAccountContacts(String contactId) { 
        List<Contact> lstContact=new List<Contact>();
        lstContact=[select id ,Name,Email,Phone from contact where accountid=:contactId];
        return lstContact;
    }
}

LightningDataTable.html (Template)

<template>
    <div class="hr">
</div>
<lightning-card icon-name="standard:record" title="{strTitle}">            
        <div class="slds-m-around_medium">
<template if:true="{contacts}">
                <lightning-datatable columns="{columns}" data="{contacts}" hide-checkbox-column="true" key-field="Id">
                </lightning-datatable>                
            </template>                        
        </div>
</lightning-card>  
    <div class="hr">
</div>
</template>

LightningDataTable.Js (JS Controller )

import { LightningElement, api, wire,track } from 'lwc';  
import fetchRecords from '@salesforce/apex/LightningDataTableController.fetchAccountContacts';
const columns = [
    { 
        label: 'Name', 
        fieldName: 'RecordUrl',
        type: 'url',
        typeAttributes: {
            label: { fieldName: 'Name' }, 
            target: '_self'
        } 
    },
    { 
        label: 'Email', 
        fieldName: 'Email'
    },
    { 
        label: 'Phone', 
        fieldName: 'Phone'
    }
];
export default class LightningDataTable extends LightningElement {  
    @api recordId;  
    @api strTitle;  
    @track columns;
    @track contacts;
    constructor() {
        super();
        this.strTitle='Account Contacts';
        this.columns = columns;
        this.contacts = [];
    }    

    // retrieving the data using wire service
    @wire(fetchRecords, {contactId:'$recordId' })
    records(result) {
        if (result.data) {
            this.contacts = [];
            result.data.forEach(item => {
                let contact = {};
                contact = {
                    RecordUrl:'/lightning/r/Contact/' + item.Id + '/view',
                    Id:item.Id,
                    Email:item.Email,
                    Name:item.Name
                    Phone:item.Phone
                };
                this.contacts.push(contact);            
            });
        }
    }
    
}

LightningDataTable.js-meta.xml (XML for Config File in Salesforce)

<lightningcomponentbundle fqn="LightningDataTable" xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiversion>45.0</apiversion>
    <isexposed>true</isexposed>  
    <targets>  
        <target>lightning__RecordPage</target>  
    </targets>  
</lightningcomponentbundle>

LightningDataTable.css (CSS)

.hr {
    border: 0;
    clear:both;
    display:block;
    width: 99%;               
    background-color:#CCC;
    height: 1px;
    margin-top:10px;
    margin-bottom: 10px;
  }

Note: After save whole code you will drag and drop code into Lightning Record Detail Page of Account

Happy Sharing...

Everyone has their own favourites, so please feel free to share yours in the comments below!