0

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;
}
1

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>
| improve this answer | |
  • I found that with the DataTable you cannot get Account__r.Name. Is there a way to get the parent name on the Grid easily? – CodeMonger Jan 31 at 13:07
  • To my knowledge it is not possible to display traversed items in the the datatable without mapping them. Try doing something similar to this: @wire(getOpportunityLineItems, {oppId: '$recordId'}) lineitems(result) { this.refreshTable = result; if (result.data) { this.data = result.data.map(row=>{ return{...row, productName: row.Product2.Name} }) this.error = undefined; } else if (result.error) { this.error = result.error; this.data = undefined; } } – Jemat Jan 31 at 15:53
0

I found a simple Example for anyone else that has the same issue I did.

JavaScript:

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

        <lightning-datatable
            key-field="Id"
            data={myContacts.data}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}>
        </lightning-datatable>


    </template>

</div>

HTML

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

        <lightning-datatable
            key-field="Id"
            data={myContacts.data}
            columns={columns}
            onsave={handleSave}
            draft-values={draftValues}>
        </lightning-datatable>


    </template>

</div>
</lightning-card>
</template>
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.