Lighting Web コンポネット DataTable With Button

DataTableの縦スクロールバー表示したい場合、
以下のように
<div style=”with:200px”><lightning-datatable><lightning-datatable></div>
でできます。

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

/////

  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. }  

//////

  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. }