Skip to main content

Custom Table In LWC

I'm assuming you've Basic understanding of Lightning Web Component, I'll be explaining you the syntax that will be generic.

HTML:

<template>
<!-- Header Part -->
    <lightning-card title="Custom Data table in Lightning Web Components">
        <div class="slds-grid slds-gutters">
            <div class="slds-col">
                <span></span>
            </div>
            <div class="slds-col">
                <span>
<!--A Button For extra feature-->
                    <lightning-button label="Show Selected Contacts" 
onclick={showContacts} style="margin-left: 40%" variant="brand">
</lightning-button>
                </span>
            </div>
        </div><br/>
<!-- Table start-->
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
<!--Column Header start-->
            <thead>
                <tr class="slds-line-height_reset">
                    <th class="" scope="col">
                        <div class="slds-truncate">
<!--Column Header For CheckBox-->
                            <lightning-input onchange={allSelected} type="checkbox">
</lightning-input>
                        </div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Name">Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="First Name">Account Name
</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Last Name">Last Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Phone">Phone</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Email">Email</div>
                    </th>
                </tr>
            </thead>
            <tbody>
<!--data is an array of record which is set in .js file-->
                <template for:each={data} for:item="con">
                    <tr key={con.Id}>
                        <th scope="col">
                            <div>
                             <lightning-input type="checkbox" value={con.Name} 
data-id={con.Id}></lightning-input>
                            </div>
                        </th>
                        <th scope="col">
<!--First Column Value as a link-->
                            <lightning-button label={con.Name} value={con.Name}
  data-id={con.Id} onclick={showDetail} variant="base">
</lightning-button>
                        </th>
                        <th scope="col">
                            <div>{con.FirstName}</div>
                        </th>
                        <th scope="col">
                            <div>{con.LastName}</div>
                        </th>
                        <th scope="col">
                            <div>
                                <lightning-formatted-phone value={con.Phone}>
</lightning-formatted-phone>
                            </div>
                        </th>
                        <th scope="col">
                            <div>
                                <lightning-formatted-email value={con.Email}>
</lightning-formatted-email>
                            </div>
                        </th>
                    </tr>
                </template>
            </tbody>
        </table>
</lightning-card>
  </template>

You can change the Datatype or the style or the format by using HTML tags or styles.

.js Sample:

import { LightningElementtrackwire  } from 'lwc';
import retriveCons from '@salesforce/apex/LWCExampleController.getContacts';
export default class CustomDatatableInLWC extends LightningElement {
@track data = [];
    @track error;
    @track selectedCons;
// Getting Contacts using Wire Service
    @wire(retriveCons)
    contacts(result) {
        if (result.data) {
            this.data = result.data;
            this.error = undefined;

        } else if (result.error) {
            this.error = result.error;
            this.data = undefined;
        }
    }
// Select the all rows
    allSelected(event) {
        let selectedRows = this.template.querySelectorAll('lightning-input');
        
        for(let i = 0i < selectedRows.lengthi++) {
            if(selectedRows[i].type === 'checkbox') {
                selectedRows[i].checked = event.target.checked;
            }
        }
    }

}

In metaData file just replace <isExposed>false</isExposed> with the below lines of code:

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

ApexClass:

public inherited sharing class LWCExampleController {    
 @AuraEnabled(Cacheable = true)
    public static List<ContactgetContacts(){
        return [SELECT IdNameFirstName,LastNamePhoneEmail FROM Contact 
limit 10];
    }
}

Let me know in Comment section in case of any Doubt... 

Comments

Popular posts from this blog

Platform Developer I Certification Maintenance (Winter '23)

 Maintain Your Platform Developer I Certification for Winter ’23 1. Field update actions have changed in API Version 54.0. Which record-triggered flows do field update actions now execute? Answer: Before-Save after After-Save 2. Which Apex class is used to determine the hostnames for the domains that Salesforce hosts for your org? Answer: System.DomainCreator 3. Which modules can be used for notifications in a Lightning web component instead of native APIs? Answer: LightningAlert, LightningConfirm, and LightningPrompt 4. What determines an org’s “shape” in Salesforce? Answer: Features, settings, edition, limits, and licenses 5. Which lightning-modal-* component is required to create a modal? Answer: Body 6. How do you call an invocable action from Apex code? Answer: Reference Invocable.Action Get Hands-On With Apex Assertions 1. Create Two Apex class: Copy and Paste below codes (A.) TestFactory @isTest public class TestFactory {    public static Account getAccount(String accountName, B

LWC js-meta.xml Configuration File Tags

Each Lightning web component folder must include a configuration file named <componentName>.js-meta.xml. The configuration file defines the metadata values for the component, including the design configuration for the Lightning App Builder and Community Builder. Some Standard Key metadata values: apiVersion : A double value that binds the component to a Salesforce API version. isExposed : If isExposed is false, the component is not exposed to Lightning App Builder or Community Builder. To allow the component to be used in Lightning App Builder or Community Builder, set isExposed to true and define at least one <target>, which is a type of Lightning page. Some Standard Optional metadata values: description : A short description of the component, usually a single sentence. masterLabel : The title of the component. Appears in list views, like the list of Lightning Components in Setup, and in the Lightning App Builder and in Community Builder. targets : Specifies wher

Translate