Populate Preselected Checkbox for Records/Rows On LWC Lightning Data Table Using Wrapper Class

Populate Preselected Checkbox for Records/Rows On LWC Lightning Data Table Using Wrapper Class

salesforcepoint → Sunday, 19 July 2020

Lightning Data Table with Pre populated selected records in Lightning Web Components   

In some scenarios we need auto populate selected checkbox for records in lightning-datatable on page load. In this post we also covered how to use wrapper class in Lightning web components (LWC).Let's see how to populate preselected rows in LWC data table.

Also Check: How To Add Hyper Link For Name Column In lightning-datatable in LWC

We have a key-field attribute in lightning-datatable  tag which is unique for every row in the table and based on this field only we can populate pre selected checkbox in data table. By using "selected-rows" attribute we can set the on load selected records in lightning-datatable, this is a array of unique key-field values. As per the requirements we set this attribute value in code.

Example for preselected rows/records in LWC data table:

Display all opportunity records and all these records should be pre selected.

Step1: Create Apex class: OpportunityController.

public with sharing class OpportunityController {  
   @AuraEnabled(cacheable=true)  
   public static oppWrapper getOpportunityRecords(){  
     oppWrapper ow = new oppWrapper();  
     ow.oppList = [SELECT Id, Name, StageName,Amount From Opportunity LIMIT 100];  
     Set<Id> selectedOppIdSet = new Set<Id>();  
     for(Opportunity opp: ow.oppList){  
       selectedOppIdSet.add(opp.Id);  
     }  
     ow.selectedIdSet = selectedOppIdSet;  
     return ow;  
   }  
      public class oppWrapper{  
     @AuraEnabled public List<opportunity> oppList {get; set;}  
     @AuraEnabled public set<Id> selectedIdSet {get; set;}  
   }  
 }  

Step2: Create New lightning web component: preSelectedLightningDataTable.

preSelectedLightningDataTable.js

import { LightningElement,track,wire } from 'lwc';
import getOpportunityList from '@salesforce/apex/OpportunityController.getOpportunityRecords';
const COLS=[
    {label:'Name',fieldName:'Name', type:'text'},
    {label:'Stage',fieldName:'StageName', type:'text'},
    {label:'Amount',fieldName:'Amount', type:'currency'}
];
export default class PreSelectedLightningDataTable extends LightningElement {
    oppList;
    cols = COLS;
    @track preSelectedRows;

    @wire(getOpportunityList)
    getOpportunityList(result){
        if(result.data) {
            this.oppList=result.data.oppList;
            this.preSelectedRows = result.data.selectedIdSet;
            this.errorList=undefined;
        }else if(result.error){
            this.oppList=undefined;
            this.errorList=result.error;
        }
    }
}
 

preSelectedLightningDataTable.html

<template>  
   <lightning-card title="Opportunity Records">  
     <div class="slds-box">  
       <lightning-datatable selected-rows={preSelectedRows}  
       data={oppList} columns={cols} key-field="Id">  
       </lightning-datatable>  
     </div>  
   </lightning-card>  
 </template>  

Output: Data Table with Pre populated selected checkbox records in Lightning Web Components.

How To Add Hyper Link For Name Column In lightning-datatable in LWC

How To Add Hyper Link For Name Column In lightning-datatable in LWC

salesforcepoint → Tuesday, 23 June 2020

Lightning Web Component (LWC) Examples: Add Hyper Link Url For Name Column/Field In lightning Data Table Example

Hello guys, in this post we are  going to see how to add hyper link url for lwc data table. As we know that if we use lightning-datatable tag we can show list of records data in table. But for name field if we use type:"text" we can't show clickable hyper link for record name on lightning Data Table. If we want display any field or column with link we need to make some tweaks on data what we are going to display on table. So that we can show link and once we click on that it will takes you to respective record page. Check below example code.

Hyper Link For Name field In lightning-datatable in LWC:

Create apex class: OpportunityController

 public with sharing class OpportunityController {  
   @AuraEnabled(cacheable=true)  
   public static List<opportunity> fetchOpportunityList(){  
     return [SELECT Id, Name, StageName,Amount From Opportunity LIMIT 100];  
   }  
 }  

Create Lightning Web Component with name lwcDataTableHyperLink:

lwcDataTableHyperLink.js

 import { LightningElement, wire, track } from "lwc";  
 import getOpportunities from "@salesforce/apex/OpportunityController.fetchOpportunityList";  
 const COLS = [  
  {  
   label: "Name",  
   fieldName: "recordLink",  
   type: "url",  
   typeAttributes: { label: { fieldName: "Name" }, tooltip:"Name", target: "_blank" }  
  },  
  { label: "Stage", fieldName: "StageName", type: "text" },  
  { label: "Amount", fieldName: "Amount", type: "currency" }  
 ];  
 export default class LwcDataTableHyperLink extends LightningElement {  
  cols = COLS;  
  error;  
  @track oppList = [];  
  @wire(getOpportunities)  
  getOppList({ error, data }) {  
   if (data) {  
    var tempOppList = [];  
    for (var i = 0; i < data.length; i++) {  
     let tempRecord = Object.assign({}, data[i]); //cloning object  
     tempRecord.recordLink = "/" + tempRecord.Id;  
     tempOppList.push(tempRecord);  
    }  
    this.oppList = tempOppList;  
    this.error = undefined;  
   } else if (error) {  
    this.error = error;  
    this.oppList = undefined;  
   }  
  }  
 }  

If we see above code we are not assigning wire function data directly to oppList property, instead we are modifying every record to assign link for Name column (tempRecord.recordLink = "/" + tempRecord.Id;).

lwcDataTableHyperLink.html

 <template>  
   <lightning-card title="Data Table In LWC">  
     <div class="slds-box">  
       <lightning-datatable  
       data={oppList} columns={cols} key-field="Id">  
       </lightning-datatable>  
     </div>  
   </lightning-card>  
 </template>  

Output:

 <aura:application extends="force:slds">  
   <c:lwcDataTableHyperLink/>  
 </aura:application>