Saturday, May 15, 2021

Sample LWC data table using Apex class

 import { LightningElement ,api, wire, track} from 'lwc';

import getInvestigations from '@salesforce/apex/IMS_CaseFieldSet.getInvestigations';

export default class IMS_PrintInvestigations extends LightningElement {

    @track columns = [{

            label: 'Name',

            fieldName: 'Name',

            type: 'text',

            sortable: true

        },

        {

            label: 'Type',

            fieldName: 'Type__c',

            type: 'text',

            sortable: true

        },

        {

            label: 'Other Text',

            fieldName: 'Other_Text__c',

            type: 'Currency',

            sortable: true

        },

        {

            label: 'Phone',

            fieldName: 'Phone',

            type: 'phone',

            sortable: true

        },

        {

            label: 'CreatedById',

            fieldName: 'CreatedById',

            type: 'date',

            sortable: true

        },

        {

            label: 'LastModifiedById',

            fieldName: 'LastModifiedById',

            type: 'Date',

            sortable: true

        },

{

            label: 'Investigator Notes',

            fieldName: 'Investigator_Notes__c',

            type: 'text',

            sortable: true

        }

    ];

 

    @track error;

    @track invlist ;

    @wire(getInvestigations, { CaseId: '$CaseId' })

    wiredAccounts({

        error,

        data

    }) {

        if (data) {

            this.invlist = data;

        } else if (error) {

            this.error = error;

        }

    }

}



<template>

    <h2> Related Investigations </h2>

    <template if:true={invlist}>

        <lightning-datatable data={invlist} columns={columns} key-field="Id">

        </lightning-datatable>

    </template>

    <template if:true={error}>

        {error}

    </template>

</template>

No comments:

Post a Comment

CSS Styling

Styling: 1. Inline Styling: < div style = "font-size: 2rem;font-weight: 400;" > Good Evening </ div > 2. Usi...