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.

Table of Contents

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 from originalData. Otherwise, it filters originalData, keeping rows where Name, StageName, or Type contains the search term, which is checked with includes(), and updates the data table with the results according to the search input (searchTerm).

Enter the code below in the HTML file of the LWC component.

<template>
    <lightning-input 
        type="search" 
        label="Search Opportunities" 
        placeholder="Search by Name, Stage, or Type..." 
        onchange={handleGlobalSearch}>
    </lightning-input>
    <lightning-datatable
        key-field="Id"
        data={filteredData}
        columns={columns}>
    </lightning-datatable>
</template>

In the HTML template, we have displayed the search bar using the lightning-input, defining its type as search, and a placeholder for help text.

The onchange={handleGlobalSearch} calls the search handler on input changes, while <lightning-datatable> shows Opportunity records with key-field=”Id”, data={filteredData} binding the filtered data, and columns={columns} defining the table’s columns.

Make the component visible to the Lightning pages using the code below in the <LightningComponentBundle> tag.

<isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>

At last, deploy the LWC component to the Lightning page, where you have to view the table.

Now, we can filter opportunity records by name, stage, and type from the global search bar.

Filter by Name:

Salesforce LWC data table dynamic filter

Filter by Stage:

How to add global search filter in LWC data table

Filter by type:

This way, we can add a dynamic search bar in the LWC data table to sort the records based on the input in the search bar.

Conclusion

In this Salesforce tutorial, we learned how to add a search bar to the Salesforce LWC data table. By adding a search bar in the LWC data table, we can search the records by entering text in the search bar. Then, it checks all the columns and shows only the records that match what you entered in the input.

By following the above steps, you can efficiently add a dynamic search bar to the LWC Lightning data tables to search specific records.

Salesforce LWC Lightning Data Table With Search Bar

Search Bar in Salesforce LWC Data Table

Add Search Bar in LWC Lightning Data Table

Conclusion

DOWNLOAD FREE AGENTFORCE EBOOK

FREE SALESFORCE FLOW EBOOK