Lightning DataTable: composant Aura

LightningDataTableController (Contrôleur Apex)

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 (composant)

<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 (contrôleur JS)

({
 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: Composant Web Lightning

LightningDataTableController (Contrôleur Apex)

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 (Modèle)

<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 (contrôleur JS)

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 pour le fichier de configuration dans 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;
  }

Remarque: Une fois le code entier enregistré, vous allez le déposer dans la page Lightning Record Detail du compte.