Salesforce : Lightning DataTable

Lightning DataTable

LightningDataTableController(Apex Controller )

public class LightningDataTableController{
    @AuraEnabled
    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.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({
            contactId: 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); 
    }
})

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!