Salesforce LWC Lightning Data Table With Search Bar

In Salesforce LWC data tables, there are a number of records, and to view the records with any specific values that we already know are in the data table, we can use the search bar to view the records that match the search input.

In this Salesforce tutorial, we will learn how to add a search bar in Salesforce LWC Lightning Data Table.

This Tutorial Covers:

Search Bar in Salesforce LWC Data Table

In a Salesforce Lightning Web Component (LWC) data table, records are displayed by fetching data from Salesforce objects via Apex calls or from external sources using third-party APIs.

A search bar is commonly implemented to locate or filter specific records within the LWC data table, allowing users to find records based on text input.

The search bar filters and returns records in the data table by matching the user’s input for the values in any column, regardless of the field type. In other words, it performs a global search across all fields in the table, retrieving and displaying only the records that contain matching data.

Add Search Bar in LWC Lightning Data Table

We will add a global search bar to the LWC data table in this example. In the search bar, we can search data dynamically, like we can search for opportunity name, stage name, or type.

Create a controller class to fetch the data from the opportunity object through the Apex calling method.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, StageName, Type, CloseDate 
                FROM Opportunity 
                WHERE IsDeleted = false 
                LIMIT 100];
    }
}

Now, create the LWC component using the <lightning-datatable> extension by following the code below in the JS file defining the logic of the global search bar.

import { LightningElement, wire } from 'lwc';
import getOpportunities from '@salesforce/apex/OpportunityController.getOpportunities';

export default class OpportunityDatatable extends LightningElement {
    filteredData = [];
    originalData = [];

    columns = [
        { label: 'Opportunity Name', fieldName: 'Name', type: 'text' },
        { label: 'Stage', fieldName: 'StageName', type: 'text' },
        { label: 'Type', fieldName: 'Type', type: 'text' },
        { label: 'Close Date', fieldName: 'CloseDate', type: 'date' }
    ];

    @wire(getOpportunities)
    wiredOpportunities({ error, data }) {
        if (data) {
            this.originalData = data;
            this.filteredData = [...this.originalData];
        }
    }

    handleGlobalSearch(event) {
        const searchTerm = event.target.value.toLowerCase();
        this.filteredData = !searchTerm 
            ? [...this.originalData]
            : this.originalData.filter(row => 
                row.Name?.toLowerCase().includes(searchTerm) ||
                row.StageName?.toLowerCase().includes(searchTerm) ||
                row.Type?.toLowerCase().includes(searchTerm)
            );
    }
}

In the above method, we have fetched the records from the apex class using getOpportunities. Then, in the columns array, we have defined the field label, name, and type of column fields.

If data is fetched successfully, it’s assigned to originalData.filteredData, which is initialised as a copy of originalData using the spread operator ([…]), ensuring the initial display shows all records.

For the main logic of dynamic global search, we have created an event handleGlobalSearch. When the user enters any value in the search bar, the event captures the user’s input via event.target.value and converts it to lowercase using toLowerCase().

If the input is empty, it resets filteredData to all records