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: