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
Ayan JanaAyan Jana 

How to pass a list of values in a html table in Lwc?

Hi, I've fetched some values in the form of a list from the js of my LWC. I'd like to put them inside a html table inside my LWC. Does anyone know how I can achieve that? 
Best Answer chosen by Ayan Jana
CharuDuttCharuDutt
HII Ayan
Try Below Code
LWC
<div class="slds-box slds-theme_default">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Account Name">Name</div>
                      </th>
                      <th class="" scope="col">
                        <div class="slds-truncate" title="Account Industry">Industry</div>
                      </th>
                      <th class="" scope="col">
                          <div class="slds-truncate" title="Account Type">Type</div>
                        </th>
                        <th class="" scope="col">
                          <div class="slds-truncate" title="Account Number">Account Number</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Site">Site</div>
                          </th>
                </tr>
            </thead>
            <tbody>
                <template for:each={accounts} for:item="acc">
                    <tr key={acc.Id}>
                        <td>{acc.Name}</td>
                        <td>{acc.Industry}</td>
                        <td>{acc.Type}</td>
                        <td>{acc.AccountNumber}</td>
                        <td>{acc.Site}</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>   




JS
import { LightningElement, wire, track } from 'lwc';
import fetchAccounts from '@salesforce/apex/ExampleController.fetchAccounts';

export default class Example extends LightningElement {

    @track accounts;
   
    @wire( fetchAccounts ) 
    caseRecord({ error, data }) { 
 
        if ( data ) { 
 
            this.accounts = data; 
 
        } else if ( error )
            console.log( 'Error is ' + JSON.stringify( error ) );
         
    }

}




Apex


public class ExampleController {

    @AuraEnabled(cacheable=true)
    public static List < Account > fetchAccounts() {

        return [ SELECT Id, Name, Industry, Type, AccountNumber, Site FROM Account LIMIT 10 ];
       
    }
   
}
Please Mark It As Best Answer If It Helps
Thank You!

 

All Answers

CharuDuttCharuDutt
HII Ayan
Try Below Code
LWC
<div class="slds-box slds-theme_default">
        <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
            <thead>
                <tr>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Account Name">Name</div>
                      </th>
                      <th class="" scope="col">
                        <div class="slds-truncate" title="Account Industry">Industry</div>
                      </th>
                      <th class="" scope="col">
                          <div class="slds-truncate" title="Account Type">Type</div>
                        </th>
                        <th class="" scope="col">
                          <div class="slds-truncate" title="Account Number">Account Number</div>
                        </th>
                        <th class="" scope="col">
                            <div class="slds-truncate" title="Site">Site</div>
                          </th>
                </tr>
            </thead>
            <tbody>
                <template for:each={accounts} for:item="acc">
                    <tr key={acc.Id}>
                        <td>{acc.Name}</td>
                        <td>{acc.Industry}</td>
                        <td>{acc.Type}</td>
                        <td>{acc.AccountNumber}</td>
                        <td>{acc.Site}</td>
                    </tr>
                </template>
            </tbody>
        </table>
    </div>   




JS
import { LightningElement, wire, track } from 'lwc';
import fetchAccounts from '@salesforce/apex/ExampleController.fetchAccounts';

export default class Example extends LightningElement {

    @track accounts;
   
    @wire( fetchAccounts ) 
    caseRecord({ error, data }) { 
 
        if ( data ) { 
 
            this.accounts = data; 
 
        } else if ( error )
            console.log( 'Error is ' + JSON.stringify( error ) );
         
    }

}




Apex


public class ExampleController {

    @AuraEnabled(cacheable=true)
    public static List < Account > fetchAccounts() {

        return [ SELECT Id, Name, Industry, Type, AccountNumber, Site FROM Account LIMIT 10 ];
       
    }
   
}
Please Mark It As Best Answer If It Helps
Thank You!

 
This was selected as the best answer
CharuDuttCharuDutt
Hii Ayan 
Please Close Your Query By Marking It As Best Answer If It Helps
Thank You!