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 !!