LWC Full Dynamic Working Code to Filter Search in LWC Lightning Datatable

Introduction:

In this blog post, we will explore how to implement a dynamic search filter in a Lightning Web Component (LWC) using the Lightning Datatable component. The search filter will allow users to search and filter records within the datatable based on specific criteria. We will provide a step-by-step guide and provide a complete working code example to help you understand the implementation.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of LWC and be familiar with the Lightning Datatable component.

Step 1: Set up the Lightning Web Component

1. Create a new LWC component using the Salesforce CLI or the Salesforce Developer Console.
2. Open the component's HTML file and add the following code to create a search input field and the Lightning Datatable:

<template>

    <lightning-input type="search" label="Search" onchange={handleSearch}></lightning-input>

    <lightning-datatable

        key-field="Id"

        data={filteredData}

        columns={columns}>

    </lightning-datatable>

</template>

Step 2: Define the Component JavaScript Logic

1. Open the component's JavaScript file and add the following code to import the required modules:

import { LightningElement, wire } from 'lwc';

import { CurrentPageReference } from 'lightning/navigation';

import { fireEvent } from 'c/pubsub';

import { registerListener, unregisterAllListeners } from 'c/pubsub';

2. Declare the necessary properties and variables:

export default class MyComponent extends LightningElement {

    currentPageReference = null;

    searchKey = '';

    data = []; // The complete data to be displayed in the datatable

    filteredData = []; // The filtered data based on the search key

    columns = [ /* Define the columns for the datatable */ ];

}

3. Implement the lifecycle hooks to register and unregister the listeners for navigation events:

connectedCallback() {

    registerListener('searchEvent', this.handleSearchEvent, this);

}

disconnectedCallback() {

    unregisterAllListeners(this);

}

4. Implement the handleSearch method to capture the user input and trigger the search event:

handleSearch(event) {

    this.searchKey = event.target.value;

    fireEvent(this.currentPageReference, 'searchEvent', this.searchKey);

}

5. Implement the handleSearchEvent method to update the datatable with the filtered data:

handleSearchEvent(searchKey) {

    this.filteredData = this.data.filter(record => /* Apply your custom filtering logic here */);

}

Step 3: Implement PubSub to Communicate Between Components

1. Create a new folder named pubsub under the force-app/main/default/lwc directory.
2. Inside the pubsub folder, create two files: pubsub.js and pubsub.html.
3. Add the following code to pubsub.js:

import { LightningElement } from 'lwc';

export default class PubSub extends LightningElement {}

export function registerListener(eventName, callback, thisArg) {

    window.addEventListener(eventName, callback.bind(thisArg));

}

export function unregisterAllListeners(thisArg) {

    window.removeEventListener(null, null, thisArg);

}

export function fireEvent(eventName, data) {

    window.dispatchEvent(new CustomEvent(eventName, { detail: data }));

}

4. Add the following code to pubsub:

<template></template>

Step 4: Implement the Parent Component

1. Create a new LWC component for the parent, for example, parentComponent.
2. Inside the parentComponent, import the pubsub component using import PubSub from 'c/pubsub';.
3. Use the PubSub component in the HTML file to wrap the child component where you want to implement the search filter.

<template>

    <c-pubsub>

        <c-child-component></c-child-component>

    </c-pubsub>

</template>

Step 5: Test and Verify

1. Deploy the components to your Salesforce org and add the `parentComponent` to a Lightning page or a Lightning app.
2. Open the page and verify that the search input and the datatable are displayed correctly.
3. Enter a search term in the search input field and observe that the datatable updates dynamically based on the search criteria.

Conclusion:

In this blog post, we have learned how to implement a dynamic search filter in an LWC using the Lightning Datatable component. By following the step-by-step guide and using the provided code example, you can enhance your LWC components with a powerful search functionality. Feel free to customize the code as per your specific requirements and explore further possibilities to improve the user experience.

Remember to consult the official Salesforce Lightning Web Component documentation for more detailed information on LWC and its components.