Salesforce LWC: Generic Lightning Datatable using Lightning Web Component

By -

Today in this blog we will go though generic Lightning Data Table using Lightning Web Component.
Using below code user can show data of any object in Salesforce Org.

Below is the HTML code where we have used lightning-datatable standard lightning web component. In this component we are passing two values.

1. columns: List of columns which needs to be added in table.
2. finalData: this is the list of data which needs to be displayed.


1
2
3
4
5
6
<template>
    <div style="height: 300px;">
        <lightning-datatable key-field="Id" data={finalData} columns={columns} hide-checkbox-column=true>
        </lightning-datatable>
    </div>
</template>

Now in Java Script file we need to handle the data which will be sent by its parent component.


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { LightningElement, api, track } from 'lwc';
import dataTableContent from '@salesforce/apex/GenericDataTableHandler.getAllAccountData';

export default class GenericDataTableLWC extends LightningElement { 
    _allRecords = [];
    @track columns = [];
    @api
    get columnvalue(){};
    set columnvalue(value){
        let columnValues = value;
        if(columnValues !== undefined){
            this.columns = value;
        }
    }

    @api
    get genericData(){}
    set genericData(value){
        this._allRecords = JSON.parse(JSON.stringify(value));
    }

    @api
    get finalData(){
        let allrecords = [];
        for(let i = 0; i < this._allRecords.length; i++){
            let rowData = this._allRecords[i];
            let row = rowData;
            row.Id = rowData.Id;
            for(let col in this.columnValues){
                if(col.fieldName != 'Id'){
                    row[col.fieldName] = rowData[col.fieldName];
                }
            }
            allrecords.push(row);
        }
        return allrecords;
    }
}

Now when we use this above lightning web component as child component of other LWC or aura component then we need to pass two tings to this Lightning Data Table component:

1. columns: Column values will be passing in form of Map where key will be Field API name and Value will be the Column name in data table.
2. data: data will be the list of records or filtered record based on some criteria.

Example: Below example explains how to use above component:

Lets use this Lightning data table in one of our Component:


1
2
3
4
5
6
7
8
<template>
    <lightning-card  variant="Narrow"  title="Reusable Lightning Datatable" icon-name="standard:customer_portal_users">
        <lightning-button label="Load Table" slot="actions" onclick={loadData}></lightning-button>
        <div class="slds-p-around_x-small">
           <c-generic-data-table columnvalue={columns} generic-data={accountData}></c-generic-data-table>
        </div>
    </lightning-card>
</template>

Now as you can see there are 2 attribute passed from this parent component to child component (Lightning Data Table component).
Its controller will look like this:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { LightningElement, api} from 'lwc';
import columnName from '@salesforce/apex/GenericDataTableHandler.getAllColumns';
import dataTableContent from '@salesforce/apex/GenericDataTableHandler.getAllAccountData';

export default class ParentCmpHoldingDataTable extends LightningElement {
    @api columns;
    @api accountData = [];
    
    loadData(event){
        columnName().then(result => {
            let columnData = []
            for (let key in result) {
                columnData.push({
                    label : result[key],
                    fieldName : key
                })
            }
            this.columns = columnData;
        }).catch(error => {
            window.alert(error);
        });
        dataTableContent().then(response => {
            this.accountData = response;
        }).catch(error => {
            window.alert(error);
        });
    }
}


So in controller of this parent component we are calling Apex class, which will provide the Column details and data for the table and below is the Apex class which is passing data to Lightning Web Component:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
public with sharing class GenericDataTableHandler {
    @AuraEnabled
    public static Map<String, String> getAllColumns(){
        Map<String, String> allColumnMap = new Map<String, String>();
        allColumnMap.put('Name', 'Account Name');
        allColumnMap.put('Website', 'Account Website');
        allColumnMap.put('Phone', 'Account Phone');
        allColumnMap.put('CreatedDate', 'Account Created on');
        return allColumnMap;
    }
    @AuraEnabled
    public static List<Account> getAllAccountData(){
        return [Select Id, Name, Website, Phone, CreatedDate from Account LIMIT 100];
    }
}

If you see above class, there are two methods used. One is sending list of Column and other one is sending data to LWC.

Comments

Post a Comment

Followers

Popular posts from this blog

Salesforce LWC: Multi-Record Creation using Lightning Web Component

By -
Image
In this blog we will learn about one very common business use case. Most of the time we get requirement to create a table kind of view from which we can see most of the record's information and also we can manage creating updating and deleting record from same view.  So in this blog we will see how to create such kind of UI using Lightning Web Component. We will take one use case and will implement the same. Use Case:  There will be one input field for Account selection. Once user select any account then user can see all related Contacts. Also user should have capability to add multiple new contacts for selected Account and user can delete existing Contacts. Solutions: To implement above solution first we need one input field where user can select Account Name. For this we can utilize Lightning Data Service. Once User will select Account we can pass the Account Id to Apex Class for getting related Contacts and show it on UI using HTML table. Lets see some code for the UI: 1 ...
Read more

Salesforce LWC: Basic Drag and Drop Functionality

By -
Image
Recently I attended Salesforce VirtualDearmin session and I found this session very interesting and I thought to share this with everyone of you. For more detail you can refer below link on Drag and Drop Functionality: https://forcementor.github.io/lwc_dnd_20/#/ In this blog we will see about Drag and Drop functionality in Salesforce using Lightning Web Component. To implement drag and drop functionality there are few standard HTML events which we will use to implement. Lets see first what we are going to achieve in this blog with a small video- Now we have clear understanding what we are going to achieve. Let us go to the code. First we will create very basic UI with 3 layout-item. One for each New Task, In Progress Task and Completed Task. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <template> <lightning -layout vertical-align= "stretch" multiple-rows= "true" class= "x-large" > <lightning -layout-item...
Read more

Salesforce Lightning Web Component: Dynamic Column Selection in Lightning Datatable

By -
Image
Today in this post we will see how to create Lightning Data Table where we can dynamically select the columns of lightning data table. Below are the properties of this Lightning Data Table: User can select any column for Lightning Data Table User can select only those fields on which user has FLS. User can re-arrange the order of Columns in Data Table. So in UI we will show one Dual List box where user can select any field for table. Once user will select the fields and click on save then selected fields will be visible on UI: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 <template> <lightning -card title= "Dynamic Lead Table" > <lightning -button label= "Modify Columns" slot= "actions" onclick= {showColumnSelectionWindow} > < /lightning-button> <p class= "slds-p-horizontal_small" > <lightning -...
Read more