LWC Table Search – With Example!

Now that we have covered how to make a table in LWC and how to sort it based on columns, lets cover how to implement LWC table search. When you build a table of data without search options, it can quickly get unwieldy to pore over the data. If you have a search bar near the table that filters the data based on the value entered into the search bar, using the table to get data becomes much easier. This article will cover how to do that.

How Will The Search Work?

There are a few things to consider when creating a search bar to filter data:

• Which piece of information are you applying the search to? One column or multiple?
• How many characters do you kick the search off for?
• How do you handle clearing the search bar after data has been retrieved?

In this example, we will sort our People table by Name. We will trigger the sort to run after the search bar has 3 or more characters entered in it. Finally, when there are less than three characters, we will return all the records back in the table. Also, we will actually be making another object to hold the sorted data! This way, the original data that we are querying from the database remains untouched. We need to do this so we can recall the information we originally query if the search filter value is removed.

HTML And JS for Search Bar

Let’s add the html to our sortedTable component to render the search bar. We will give it an onkeyup event, which triggers when a key press is released, and a max-width so it sizes properly:

<input onkeyup={filter} type="text" class="slds-input" style="max-width: 400px;"/>

Then, we’ll write our function. The People table needs to be stored in another array, which we will call ‘searchable.’ We will then initially populate searchable with the value of People in our constructor:

    constructor(){
        super();
        getPeopleApex().then(result => {        
                this.People = result;
                this.searchable = this.People;
            }
        )
    }

Then, we’ll write our search event that is tied to the search bar:

    search(e){
        this.searchTerm = e.target.value;
        this.searchTerm = this.searchTerm.toLowerCase();
        const regex = new RegExp('(^' + this.searchTerm + ')|(.' + this.searchTerm + ')|(' + this.searchTerm + '$)');
        if(this.searchTerm.length > 2){
            this.searchable = this.People.filter(item => {
             
                if(regex.test(item.Name__c.toLowerCase() + ' ' + item.Name__c.toLowerCase())){
                    return item;
                }
            
            })
        }
        else if(this.searchTerm.length <= 2){this.searchable = this.People}                
    }

Table Searches!

And that’s it! Now if you try to search in the bar, you will the table responsively updates the table if the search term matches the name of a person in the table. If the term is 3 characters or more, this event triggers; if it’s not, the table is then set equal to People again, so all the people are visible.

This table is searching based on the name field, but you can switch it to anything. Also, we are using a regex, which is a Regular Expression to do the search. A regex is it’s own topic, but essentially it is a coded string that represents a term that you are interested in matching against in a string. You can play around with one here: https://regexr.com/.

You can also implement LWC table search by having the search event make a backend call to a database, building a dynamic query and returning that result to the front-end. This is useful if you have a lot of records initially (upwards of 20k) but still want to have searching.

Now that you have a table that searched, try enhancing it with pagination!