Simple lightning-datatable using Lightning Web Component LWC in Salesforce

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.                     </lightning-datatable>  
  20.   
  21.                 </div>                   
  22.       
  23.             </template>  
  24.       
  25.             <template if:true = {error}>  
  26.   
  27.                 {error}>  
  28.                   
  29.             </template>  
  30.   
  31.         </div>  
  32.   
  33.     </lightning-card>  
  34.   
  35. </template>  

Component JAVASCRIPT:


  1. import { LightningElement, track } from 'lwc';  
  2. import fetchAccounts from '@salesforce/apex/AccountController.fetchAccounts';  
  3.   
  4. const columns = [  
  5.     { label: 'Id', fieldName: 'Id' },  
  6.     { label: 'Name', fieldName: 'Name' },  
  7.     { label: 'Industry', fieldName: 'Industry' },  
  8. ];  
  9.   
  10. export default class accountSearchLWC extends LightningElement {  
  11.   
  12.     @track accounts;  
  13.     @track error;  
  14.     @track columns = columns;  
  15.   
  16.     handleKeyChange( event ) {  
  17.           
  18.         const searchKey = event.target.value;  
  19.   
  20.         if ( searchKey ) {  
  21.   
  22.             fetchAccounts( { searchKey } )    
  23.             .then(result => {  
  24.   
  25.                 this.accounts = result;  
  26.   
  27.             })  
  28.             .catch(error => {  
  29.   
  30.                 this.error = error;  
  31.   
  32.             });  
  33.   
  34.         } else  
  35.         this.accounts = undefined;  
  36.   
  37.     }  
  38.   
  39. }  

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:


Simple Hide and Show in Lightning Web Component in Salesforce

Sample Code:

Component HTML:

  1. <template>  
  2.       
  3.     <lightning-button variant="brand" label={clickedButtonLabel} title="Show" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>  
  4.   
  5.     <template if:true={boolVisible}>  
  6.   
  7.         <div>Testing Hide and Show</div>  
  8.           
  9.     </template>  
  10.   
  11. </template>  

Component JAVASCRIPT:

  1. import { LightningElement, track } from 'lwc';  
  2.   
  3. export default class HideAndShowLWC extends LightningElement {  
  4.   
  5.     @track clickedButtonLabel = 'Show';  
  6.     @track boolVisible = false;  
  7.   
  8.     handleClick(event) {  
  9.         const label = event.target.label;  
  10.   
  11.         if ( label === 'Show' ) {  
  12.   
  13.             this.clickedButtonLabel = 'Hide';  
  14.             this.boolVisible = true;  
  15.   
  16.         } else if  ( label === 'Hide' ) {  
  17.               
  18.             this.clickedButtonLabel = 'Show';  
  19.             this.boolVisible = false;  
  20.   
  21.         }  
  22.     }  
  23.   
  24. }  

Output:

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: