Wednesday, 14 October 2020

LWC Data table

 import {LightningElementtrackwirefrom 'lwc';

import retriveOpportunities from '@salesforce/apex/LWCExampleController.retriveOpportunities';

// Datatable Columns
const columns = [
   /* { label: 'Company Website', fieldName: 'website', type: 'url',
    typeAttributes: { tooltip: { fieldName: 'website' } } }
    {
        label: 'Duplicate Website', 
        fieldName: 'duplicateWebsite', 
        type: 'url' , 
        typeAttributes:{
            label: { 
                fieldName: 'websiteLabel'                 
            } ,
            target : '_blank'           
        }

    }*/
    {
        label: 'Related To',
        fieldName: 'AccId',
        type: 'url',
        typeAttributes: {
            label: {
                fieldName: 'AccName'
            },
            target: '_blank'
        },
        sortable:true
    },{
        label: 'Opportunity Name',
        fieldName: 'Name',
        type: 'text',
    }, {
        label: 'Account Name',
        fieldName: 'AccountName',
        type: 'text',
        sortable:true
    }, {
        label: 'Account Owner',
        fieldName: 'AccountOwner',
        type: 'text',
        sortable:true
    }, {
        label: 'Opportunity Owner',
        fieldName: 'OpportunityOwner',
        type: 'text',
        sortable:true
    }, {
        label: 'CreatedDate',
        fieldName: 'CreatedDate',
        type: 'date',
        sortable:true
    }, {
        label: 'test acc',
        fieldName: 'testacc',
        type: 'text',
        sortable:true
    }
];


export default class ParentFieldsInLWC extends LightningElement {
    @track data = [];
    @track columns = columns;
    @track recordCount =0;
    @track sortBy;
    @track sortDirection;

    @wire(retriveOpportunities)
    opp({errordata}) {
        if(data) {

            let currentData = [];
            let url = 'https://'+location.host+'/';
            data.forEach((row=> {

                
                let rowData = {};

                rowData.Name = row.Name;
                rowData.CreatedDate = row.CreatedDate;
                
                if (row.Account) {
                    rowData.AccName = row.Account.Name//Here define your value which you want to display
                    rowData.AccId = url+row.Id;
                    rowData.AccountName = row.Account.Name;
                    rowData.AccountOwner = row.Account.Owner.Name;
                }

                if (row.Owner) {
                    rowData.OpportunityOwner = row.Owner.Name;
                }
                if (row.test_acc__c) {
                    rowData.testacc = row.test_acc__r.Name;
                }
                currentData.push(rowData);
            });

            this.data = currentData
            this.recordCount = currentData.length;
        }
        else if(error) {
        }
    }
    handleSortdata(event) {
        // field name
        this.sortBy = event.detail.fieldName;

        // sort direction
        this.sortDirection = event.detail.sortDirection;

        // calling sortdata function to sort the data based on direction and selected field
        this.sortData(event.detail.fieldNameevent.detail.sortDirection);
    }

    sortData(fieldnamedirection) {
        // serialize the data before calling sort function
        let parseData = JSON.parse(JSON.stringify(this.data));

        // Return the value stored in the field
        let keyValue = (a=> {
            return a[fieldname];
        };

        // cheking reverse direction 
        let isReverse = direction === 'asc' ? 1: -1;

        // sorting data 
        parseData.sort((xy=> {
            x = keyValue(x) ? keyValue(x) : ''// handling null values
            y = keyValue(y) ? keyValue(y) : '';

            // sorting values based on direction
            return isReverse * ((x > y) - (y > x));
        });

        // set the sorted data to data table data
        this.data = parseData;

    }
}



<template>
    <lightning-card title="">
       <H4>Showing Reference Fields Data in Lightning Datatable {recordCount}</H4> 
        <lightning-datatable columns={columns} 
                            data={data} 
                            key-field="id"
                            hide-checkbox-column="true"
                            show-row-number-column="true"
                            sorted-by={sortBy}
                                     sorted-direction={sortDirection}
                                     onsort={handleSortdata}></lightning-datatable>
    </lightning-card>
</template>


public with sharing class LWCExampleController {
    @AuraEnabled(cacheable=true)
    public static list<OpportunityretriveOpportunities() {
        return [SELECT Id
                       Name,
                       test_acc__r.Name,
                       AccountID,
                       Account.Name
                       Account.owner.name
                       Owner.Name
                       CreatedDate 
                FROM Opportunity LIMIT 10];
    }
}



No comments:

Post a Comment