[SalesForce] Lightning Web Component Create DataTable

I have a very simple LWC(just learning) I am trying to create something like a datatable(.net) or like the old visualforce page(PageBlockSection) like structure such as the related list and display it.

I can get data to display using the template however instead of just displaying it i want it displayed in a grid. Is there a very simple example anywhere?

Apex Class

public with sharing class ContactData {
@AuraEnabled(cacheable=true)

public static List<Contact> getContacts(String accId) {
    return [SELECT Id, Name ,Email, Phone, Account.Name from Contact where AccountId = :accId];
}

}

HTML 

<template>
    <lightning-card title="Account Collection" icon-name="custom:custom14">
<div class="boarder"> 
    <template if:true={myContacts.data}>

            <ul class="slds-list_ordered">



                    <template for:each={myContacts.data} for:item="contact">


                    <li key={contact.Id}>
                            {contact.Name}
                            {contact.Email}

                    </li> 

                    </template>

        </ul>




    </template>

</div>

JavaScript

import { LightningElement,api,wire } from 'lwc';
//Reads the Controller Class Get Contacts. Must Specify the file path - Class and Function returned. 
import getContacts from '@salesforce/apex/ContactData.getContacts';

export default class RecordIdExample extends LightningElement {
//Passes a Record Id from the page to the Class. 
 @api recordId;
@wire(getContacts, {accId:'$recordId' })
//returns MyContacts as a variable that is then used in the HTML.
  myContacts;
}

Best Answer

This could be done in a couple of ways. If you are wanting a data table, then you would do as already mentioned https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/example

HTML

<template>
    <lightning-card title="Contacts" icon-name="standard:contact"> 
           <template if:true={data}>
                   <lightning-datatable data={data}
                                    columns={columns}
                                    key-field="id"
                                    onrowselection={getSelectedRecords}>
                    </lightning-datatable>
           </template>
   </lightning-card>

JS

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

// importing apex class methods
import getContacts from '@salesforce/apex/LWCContactController.getContacts';


// datatable columns
const columns = [
    {
        label: 'First Name',
        fieldName: 'FirstName',
        editable: true
    }, {
        label: 'Last Name',
        fieldName: 'LastName'
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'phone'
    }, {
        label: 'Email',
        fieldName: 'Email',
        type: 'email'

    }
];

export default class contactTableLWC extends LightningElement {

    @track data;
    @track columns = columns;
    @track isTrue = false;
    @track recordsCount = 0;
    @api recordId;



    // retrieving the data using wire service
    @wire(getContacts, {conId: '$recordId'})
    contacts(result) {
        this.refreshTable = result;
        if (result.data) {
            this.data = result.data;
            this.error = undefined;

        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }

}

If it is not a data table that you are looking for, then you can utilize the LDS grid system to control how the elements are displayed in the component. https://www.lightningdesignsystem.com/utilities/grid/#site-main-content

HTML Example


<template>
    <lightning-card title="Account Collection" icon-name="custom:custom14">
<div class="boarder"> 
    <template if:true={myContacts.data}>
       <div class="slds-grid slds-wrap">
          <template for:each={myContacts.data} for:item="contact">
             <div key={contact.Id}>  
                <div key={contact.Id} class="slds-col">  
                  {contact.Name}      
                </div> 
                <div class="slds-col">  
                  {contact.Email}    
                </div> 
             </div> 
           </template>
      </div>
    </template>
</div>
Related Topic