function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sesha boddapatisesha boddapati 

In lightning web components how to display records using table

Hi All,

Help me this, how to display records in lightning web components.using <table> tag.. import from apex class..

Thanks, Sesha.
Best Answer chosen by sesha boddapati
Gian Piere VallejosGian Piere Vallejos
Hi Sesha.

Maybe this can help you: 

Javascript file: 
import { LightningElement, api, wire, track } from 'lwc';
import getRows from '@salesforce/apex/ControllerLwcExample.getData';

export default class DatatableUpdate extends LightningElement {
    @track curData;
    @api recordId;

    @wire(getRows, { recordId: "$recordId" }) curData;
}

ControllerLwcExample.cls file: 
public with sharing class ControllerLwcExample {
    @AuraEnabled(cacheable = true)
    public static List<Account> getData(Id recordId){
        List <Account> listAccount = [SELECT Id, Name, Phone, Website FROM Account WHERE Id =: recordId];
        return listAccount;
    }
}

HTML file: ​​​​​
<template>
    <template if:true={curData}>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Website</th>                
              </tr>
            </thead>
            <tbody>
                <template for:each={curData} for:item="curItem">
                    <tr>
                        <td>{curItem.Name}</td>
                        <td>{curItem.Phone}</td>
                        <td>{curItem.Website}</td>
                    </tr>
                </template>
            </tbody>            
        </table>
    </template>
</template>

References: 
https://salesforce.stackexchange.com/questions/284842/lwc-inside-an-html-template-for-loop-set-loop-variable-property-to-new-user-ty
https://salesforce.stackexchange.com/questions/251934/iterate-over-object-in-lightning-web-component-template

All Answers

Gian Piere VallejosGian Piere Vallejos
You need to use a Datatable component. To import data from apex class, you need to create an Apex Controller and call it from the javascript file using the line "@salesforce/apex/ControllerLwcExample.getData".

Controller ControllerLwcExample.cls should be: 
public with sharing class ControllerLwcExample {
    @AuraEnabled(cacheable=true)
    public static List<wrapperAccount> getData(Id recordId){
        List <Account> listAccounts = [SELECT Id, Name FROM Account WHERE Id =: recordId];
        List <wrapperAccount> wAccountList= new List<wrapperAccount>();

        for( Account ac : listAccounts ){
            wrapperAccount wAcc = new wrapperAccount();
            wAcc.name = ac.Name;
            wAccountList.add(wAcc);
        }

        return wAccountList;
    }

    public class wrapperAccount {
        @AuraEnabled public string name {get; set;}        
        //@AuraEnabled public string field2 {get; set;}        
        //@AuraEnabled public string field3 {get; set;}        
    }
}
Javascript file should be: 
import { LightningElement, api, wire, track } from 'lwc';
import getRows from '@salesforce/apex/ControllerLwcExample.getData';

const columns = [
    {
        label: 'Name',
        fieldName: 'Name'
    }, {
        label: 'Phone',
        fieldName: 'Phone',
        type: 'phone'
    }, {
        label: 'Email',
        fieldName: 'Email',
        type: 'email'
    },
];

export default class DatatableUpdate extends LightningElement {
    @track curData;
    @track columns = columns;
    @api recordId;

    @wire(getRows, { recordId: "$recordId" }) curData;
}
And HTML
<template>
    <template if:true={curData}>
        <lightning-datatable
            key-field="Id"
            data={curData.data}
            columns={columns}>
        </lightning-datatable>
    </template>
</template>

Also can send the data without a Wrapper Class, just returning a list of the object if you want. For more information, you can visit next pages: 
Caleb Kuester 27Caleb Kuester 27

To create a Lightning Component, there are many options.

https://www.lightningdesignsystem.com/components/data-tables/#site-main-content

This shows several examples. Here is one:

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">
        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Account Name">Account Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Close Date">Close Date</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Stage">Stage</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Confidence">Confidence</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Amount">Amount</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Contact">Contact</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="slds-hint-parent">
      <th data-label="Opportunity Name" scope="row">
        <div class="slds-truncate" title="Cloudhub">
          <a href="javascript:void(0);" tabindex="-1">Cloudhub</a>
        </div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com">
          <a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
        </div>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <th data-label="Opportunity Name" scope="row">
        <div class="slds-truncate" title="Cloudhub + Anypoint Connectors">
          <a href="javascript:void(0);" tabindex="-1">Cloudhub + Anypoint Connectors</a>
        </div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com">
          <a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
        </div>
      </td>
    </tr>
    <tr class="slds-hint-parent">
      <th data-label="Opportunity Name" scope="row">
        <div class="slds-truncate" title="Cloudhub">
          <a href="javascript:void(0);" tabindex="-1">Cloudhub</a>
        </div>
      </th>
      <td data-label="Account Name">
        <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
      </td>
      <td data-label="Close Date">
        <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
      </td>
      <td data-label="Prospecting">
        <div class="slds-truncate" title="Prospecting">Prospecting</div>
      </td>
      <td data-label="Confidence">
        <div class="slds-truncate" title="20%">20%</div>
      </td>
      <td data-label="Amount">
        <div class="slds-truncate" title="$25k">$25k</div>
      </td>
      <td data-label="Contact">
        <div class="slds-truncate" title="jrogers@cloudhub.com">
          <a href="javascript:void(0);" tabindex="-1">jrogers@cloudhub.com</a>
        </div>
      </td>
    </tr>
  </tbody>
</table>


In order to customize this, you should replace all of those non-head <tr> items with an aura:iteration section that uses your data resource

Here is an example:

<aura:attribute name="opportunityList" type="Opportunity[]"/>

<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
  <thead>
    <tr class="slds-line-height_reset">
      <th class="" scope="col">
        <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Account Name">Account Name</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Close Date">Close Date</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Stage">Stage</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Confidence">Confidence</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Amount">Amount</div>
      </th>
      <th class="" scope="col">
        <div class="slds-truncate" title="Contact">Contact</div>
      </th>
    </tr>
  </thead>
  <tbody>
    <aura:iteration items="{!v.opportunityList}" var="opportunity">
      <tr class="slds-hint-parent">
        <th data-label="Opportunity Name" scope="row">
          <div class="slds-truncate" title="Cloudhub">
            <a href="javascript:void(0);" tabindex="-1">Cloudhub</a>
          </div>
        </th>
        <td data-label="Account Name">
          <div class="slds-truncate" title="Cloudhub">{!opportunity.Accoun}</div>
        </td>
        <td data-label="Close Date">
          <div class="slds-truncate" title="4/14/2015">{!opportunity.closeDate}</div>
        </td>
        <td data-label="Prospecting">
          <div class="slds-truncate" title="Prospecting">{!opportunity.stage}</div>
        </td>
        <td data-label="Confidence">
          <div class="slds-truncate" title="20%">{!opportunity.confidence}</div>
        </td>
        <td data-label="Amount">
          <div class="slds-truncate" title="$25k">{!opportunity.amount}</div>
        </td>
        <td data-label="Contact">
          <div class="slds-truncate" title="{!opportunity.contact.email}">
            <a href="javascript:void(0);" tabindex="-1">{!opportunity.contact.email}</a>
          </div>
        </td>
      </tr>
    </aura:iteration>
  </tbody>
</table>

Keep in mind that if you just copy/paste this code, it definitely won't work, but intuitively, it'll be something like this.
sesha boddapatisesha boddapati
Hi Gian Piere Vallejos,

Thanks for Reply... I am done with display records using <lightning-datatable>...
using <table> to display records... 

for example in lightning aura components, we are displaying records using <lightning:datatable> and  using <table> table tag in slds..

i.e Is it possible to display records using <table> tag using Apex controller...

Thanks, Sesha.
sesha boddapatisesha boddapati
Hi Caleb Kuester 27,

Thanks for Reply.... I need to fetch records from Apex class..Is it posible to get records from databse...

Thanks, Sesha.
Gian Piere VallejosGian Piere Vallejos
Hi Sesha.

Maybe this can help you: 

Javascript file: 
import { LightningElement, api, wire, track } from 'lwc';
import getRows from '@salesforce/apex/ControllerLwcExample.getData';

export default class DatatableUpdate extends LightningElement {
    @track curData;
    @api recordId;

    @wire(getRows, { recordId: "$recordId" }) curData;
}

ControllerLwcExample.cls file: 
public with sharing class ControllerLwcExample {
    @AuraEnabled(cacheable = true)
    public static List<Account> getData(Id recordId){
        List <Account> listAccount = [SELECT Id, Name, Phone, Website FROM Account WHERE Id =: recordId];
        return listAccount;
    }
}

HTML file: ​​​​​
<template>
    <template if:true={curData}>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Phone</th>
                <th>Website</th>                
              </tr>
            </thead>
            <tbody>
                <template for:each={curData} for:item="curItem">
                    <tr>
                        <td>{curItem.Name}</td>
                        <td>{curItem.Phone}</td>
                        <td>{curItem.Website}</td>
                    </tr>
                </template>
            </tbody>            
        </table>
    </template>
</template>

References: 
https://salesforce.stackexchange.com/questions/284842/lwc-inside-an-html-template-for-loop-set-loop-variable-property-to-new-user-ty
https://salesforce.stackexchange.com/questions/251934/iterate-over-object-in-lightning-web-component-template
This was selected as the best answer