Search the data loaded into the Datatable in Lightning Web Component (LWC).

Look in the datatable for previously loaded information without accessing the server's database each time. This results in an instantaneous response and fewer visits to the server. Users may use the feature to search for a specific item in a list. Users can rapidly retrieve records by entering initials rather than reading through a long list.

How the Search filter works

Let's use the example of a table showing a list of more than 500 records. The search box compares text input by the user against all 500 records and provides the record that matches the text or it returns blank.

Sample Project

Let's build a search filter that looks through the contact record and shows the results on a lightning datatable.

search_filter_lwc.HTML

<template>
    <div class="slds-m-around_medium" style="width: 65%">
       <lightning-input label = "Search Contact" value={searchKey} onchange={notes_search}></lightning-input>
    </div>    
    <div class="slds-grid slds-wrap">
          	<div class="slds-m-around_medium" style="height: 300px; width: 65%">
                  	
              	<lightning-datatable
                      class="slds-table_header-fixed_container slds-scrollable_x slds-border_top"
                          key-field="Id"
                      	data={contacts_data}
                      	columns={columns}
                          hide-checkbox-column=true
                      	>
          	    </lightning-datatable>
          	</div>
        </div>
</template>

search_filter_lwc.JS

import { LightningElement , wire } from 'lwc';
import get_contact_details from '@salesforce/apex/search_filter_lwc_controller.get_contact_details';
 
export default class Search_filter_lwc extends LightningElement {
 
    searchKey
    columns = [
        { label: 'Name', fieldName: 'Name' },
        { label: 'Phone', fieldName: 'Phone' },
        { label: 'Email ', fieldName: 'Email' },
     ]; 	
 
     data
     error
     contacts_data = [];
     retrieved_data = []
	
 
     @wire(get_contact_details)
     wired_details({ error, data }) {
         if (data) {
             console.log('data',data);            
             this.contacts_data = data;
             this.retrieved_data = data;
         } else if (error) {
             console.log(error);
             this.error = error;
         }
     }
 
    notes_search(event){
        var name_search = event.target.value;
        console.log('notes_search--',name_search); 	
        var searchString = name_search.toUpperCase();
        console.log('searchString--',searchString);  
        var allRecords = this.retrieved_data;
        var new_search_result = []
        console.log('allRecords--',allRecords);  
        var i;
          
            for (i = 0; i < allRecords.length; i++) {
           	if ((allRecords[i].Name) && searchString != '' &&(allRecords[i].Name.toUpperCase().includes(searchString))) {
             	
                	new_search_result.push(allRecords[i]);
                	console.log('match--');
            	}
            }
            console.log('new_search_result--',new_search_result);
            if(new_search_result.length !=0){
            	this.contacts_data = new_search_result
            	console.log('not blank--');
            }else if((new_search_result.length ==0 && searchString != '')){
            	this.contacts_data = [];
            }else{
            	this.contacts_data = this.retrieved_data
            	console.log('blank--');
            }       	
        }
}

Apex Controller Class(search_filter_lwc_controller)

public class search_filter_lwc_controller {
   @AuraEnabled(cacheable=true)
   public static list<contact> get_contact_details(){
      
        list<contact> cont_list = [select id,name,phone,Email from contact  limit 10];
        return cont_list; 
   }
}

OUTPUT

entered "sa" in the search bar.