Fetching Account Records From @wire Decorators in Lightning Web Components through Apex Method “@AuraEnabled (cacheable=true)” in The Table Format — LWC

[vijayk3327]

Hey guys, today in this post we are going to learn about How to Fetching Account Records From @wire Decorators in Lightning Web Components with Apex Method “@AuraEnabled (cacheable=true)” in The Table Format.

→ Get source code live demo link:-

Step 1:- Create Lightning Web Component : getDataWireDecoratorsWithTable.html

`

@wire Decorators in Lightning web components with apex method @AuraEnabled (cacheable=true)

    <table class="tblColPad" border="1" cellpadding="5" cellspacing="5" bordercolor="#ccc" style="border-collapse:collapse;">
       <thead>
           <tr>
               <th>Name</th>
               <th>Phone</th>
               <th>Industry</th>
           </tr>
       </thead>
        <tbody>
            
           <template for:each={accData} for:item="accItem">
               <tr key={accItem.Id}>
                   <td>{accItem.Name}</td>
                   <td>{accItem.Phone}</td>
                   <td>{accItem.Industry}</td>
               </tr>
           </template>                 
        </tbody>
    </table>

</lightning-card>

`

Step 2:- Create Lightning Web Component : getDataWireDecoratorsWithTable.js

` import { api, LightningElement, track, wire } from 'lwc';
import getAccountList from '@salesforce/apex/lwcAppExampleApex.getAccountList';

import {NavigationMixin} from 'lightning/navigation';

export default class getDataWireDecoratorsWithTable extends NavigationMixin (LightningElement) {
@api title;
@api greetings;
@track greeting;

//Using @wire decorator for fatching the data from account 
  @track accData;
  @track errorData;
 @wire(getAccountList)
 dataRecord({data, error}){
   if(data){
       this.accData = data;
   }
   else if(error){
       this.errorData = error;
   }
 }

}`

Step 3:- Create Lightning Web Component : getDataWireDecoratorsWithTable.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?> <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata"> <apiVersion>45.0</apiVersion> <isExposed>true</isExposed> <targets> <target>lightning__AppPage</target> <target>lightning__RecordPage</target> <target>lightning__HomePage</target> </targets> <targetConfigs> <targetConfig targets="lightning__AppPage"> <property name="title" type="string"/> <property name="greetings" type="string"/> </targetConfig> </targetConfigs> </LightningComponentBundle>

→ Get source code live demo link:-