June 21, 2019

lightning:datatable with buttons in Lightning Web Component in Salesforce

Sample Code:

Component HTML:

  1. <template>  
  2.       
  3.     <lightning-card title = "Search Accounts" icon-name = "custom:custom63">  
  4.   
  5.         <div class = "slds-m-around_medium">  
  6.   
  7.             <lightning-input type = "search" onchange = {handleKeyChange} class = "slds-m-bottom_small" label = "Search" >  
  8.             </lightning-input>  
  9.   
  10.             <template if:true = {accounts}>  
  11.                   
  12.                 <div style="height: 300px;">  
  13.   
  14.                     <lightning-datatable key-field="id"  
  15.                                          data={accounts}  
  16.                                          columns={columns}  
  17.                                          hide-checkbox-column="true"  
  18.                                          show-row-number-column="true"  
  19.                                          onrowaction={callRowAction}>  
  20.                     </lightning-datatable>  
  21.   
  22.                 </div>                   
  23.       
  24.             </template>  
  25.       
  26.             <template if:true = {error}>  
  27.   
  28.                 {error}>  
  29.                   
  30.             </template>  
  31.   
  32.         </div>  
  33.   
  34.     </lightning-card>  
  35.   
  36. </template>  

Component JAVASCRIPT:

  1. import { LightningElement, track } from 'lwc';  
  2. import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';  
  3. import { NavigationMixin } from 'lightning/navigation';  
  4.   
  5. const columns = [  
  6.     { label: 'Id', fieldName: 'Id' },  
  7.     { label: 'Name', fieldName: 'Name' },  
  8.     { label: 'Industry', fieldName: 'Industry' },  
  9.     {type: "button", typeAttributes: {  
  10.         label: 'View',  
  11.         name: 'View',  
  12.         title: 'View',  
  13.         disabled: false,  
  14.         value: 'view',  
  15.         iconPosition: 'left'  
  16.     }},  
  17.     {type: "button", typeAttributes: {  
  18.         label: 'Edit',  
  19.         name: 'Edit',  
  20.         title: 'Edit',  
  21.         disabled: false,  
  22.         value: 'edit',  
  23.         iconPosition: 'left'  
  24.     }}  
  25. ];  
  26.   
  27. export default class accountSearchLWC extends NavigationMixin(LightningElement) {  
  28.   
  29.     @track accounts;  
  30.     @track error;  
  31.     @track columns = columns;  
  32.   
  33.     handleKeyChange( event ) {  
  34.           
  35.         const searchKey = event.target.value;  
  36.   
  37.         if ( searchKey ) {  
  38.   
  39.             fetchAccounts( { searchKey } )    
  40.             .then(result => {  
  41.   
  42.                 this.accounts = result;  
  43.   
  44.             })  
  45.             .catch(error => {  
  46.   
  47.                 this.error = error;  
  48.   
  49.             });  
  50.   
  51.         } else  
  52.         this.accounts = undefined;  
  53.   
  54.     }      
  55.       
  56.     callRowAction( event ) {  
  57.           
  58.         const recId =  event.detail.row.Id;  
  59.         const actionName = event.detail.action.name;  
  60.         if ( actionName === 'Edit' ) {  
  61.   
  62.             this[NavigationMixin.Navigate]({  
  63.                 type: 'standard__recordPage',  
  64.                 attributes: {  
  65.                     recordId: recId,  
  66.                     objectApiName: 'Account',  
  67.                     actionName: 'edit'  
  68.                 }  
  69.             })  
  70.   
  71.         } else if ( actionName === 'View') {  
  72.   
  73.             this[NavigationMixin.Navigate]({  
  74.                 type: 'standard__recordPage',  
  75.                 attributes: {  
  76.                     recordId: recId,  
  77.                     objectApiName: 'Account',  
  78.                     actionName: 'view'  
  79.                 }  
  80.             })  
  81.   
  82.         }          
  83.   
  84.     }  
  85.   
  86. }  

Apex Class:

  1. public with sharing class AccountController {  
  2.   
  3.     @AuraEnabled( cacheable = true )  
  4.     public static List< Account > fetchAccounts( String searchKey ) {  
  5.       
  6.         String strKey = '%' + searchKey + '%';  
  7.         return [ SELECT Id, Name, Industry FROM Account WHERE Name LIKE: strKey LIMIT 10 ];  
  8.           
  9.     }  
  10.       
  11. }  

Output:


No comments:

Post a Comment