Skip to main content

LWC Show Records In Table

Requirement :


Create a LWC component which will show the most recently created 10 Opportunity from the org and show them in table having Name , Close Date , Stage Name , Type and Create .

or in other words

Show Opportunity data in table format.

cmpOpportunityRecords.html

<template>
    <lightning-card title="Opportunity Records" icon-name="standard:opportunity">       
        <lightning-datatable             
            data={data} 
            columns={columns} 
            key-field="Id">
        </lightning-datatable>
    </lightning-card>
</template>

cmpOpportunityRecords.js

import { LightningElement ,api,wire,track } from 'lwc';
import getOpportunity from '@salesforce/apex/cmpOpportunityRecordsCls.getOpportunity';
export default class DevCmpShowRecords extends LightningElement {
    @track columns =[
        {
            label: 'Opportunity name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
        },
        {
            label : 'Stage Name',
            fieldName : 'StageName',
            type : 'text',
            sortable : true
        },
        {
            label : 'Close Date',
            fieldName : 'CloseDate',
            type : 'date',
            sortable : true
        },
        {
            label : 'Type',
            fieldName : 'Type',
            type : 'Picklist',
            sortable : true
        },
        {
            label : 'Create Date',
            fieldName : 'CreatedDate',
            type : 'date',
            sortable : true
        }
    ];
    @track data;
    @track error; 
    @wire(getOpportunity)    
    wiredOpps({
        error,
        data
    }) {
        if (data) {
            this.data = data;
            console.log(data);
            console.log(JSON.stringify(data, null, '\t'));
        } else if (error) {
            this.error = error;
        }
    }
}

cmpOpportunityRecords.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__Tab</target>
      </targets>
</LightningComponentBundle>

cmpOpportunityRecordsCls.cls

public with sharing class cmpOpportunityRecordsCls {
    @AuraEnabled(cacheable=true)    
    public static List<Opportunity> getOpportunity(){
        return[
            SELECT ID,Name,StageName,CloseDate,Type,Account.Name,CreatedDate 
            FROM Opportunity 
            ORDER BY createdDate DESC
            LIMIT 10
        ];
    }
}

Output


Other Useful Blog

Lightning Component

Happy Learning !!

Comments

Post a Comment

Popular posts from this blog

LWC Decorators

Decorators : ‹ › In LWC decorators are used to add functionality to a property or function. There are three types of decorators : 1. @track 2. @api 3. @wire @track : It is used to make properties or methods in LWC is private. This properties is not accessible outside the LWC in which it is declared. @api : It is used to make properties or methods in LWC is public. This way they are accessible outside of the component in which they are declared. For ex : parent component can set the value of the properties in the child component. @wire : It is used to read the Salesforce data from apex class into LWC. It is generally used while making the server call to apex class. LWC Properties : There are two type of LWC properties. 1. Reactive Properties 2. Non-Reactive Properties Reactive Properties : In case of reactive properties , value of the properties change when the component re-render. There are two types of Reactive Properties. 1. Public properties  -
Post a Comment
Read more

LWC Life Cycle

Requirement : ‹ › LWC Life Cycle : Life Cycle is nothing but a callback method which is triggered at a specific phase of a component's lifecycle. LWC lifecycle contains the following phases: 1. constructor() 2. connectedCallback() 3. disconnectedCallback() 4. render() 5.renderedCallback() 6. errorCallback(error,stack) 1. constructor(): constructor is invoked when the component is created, it is similar to Init method in aura component. Only difference here is that, flow is from Parent to Child, and opposite to that of Init where child component Init is called first then the parent component Init gets called. First Statement must be super() with no parameters. It is required to assign the proper prototype and value to this attribute. 2. connectedCallback(): connectedCallback() is invoked when the component is inserted into DOM. 3. disconnectedCallback(): disconnectedCallback() is invoked when the component is removed from DOM. 4. render(): render(
Post a Comment
Read more