Building a Full Dynamic LWC with Selected Rows Persistent in Filter Search - LWC DataTable

Introduction:

In this blog post, we will explore how to build a Lightning Web Component (LWC) that includes a dynamic datatable. We will focus on implementing a feature where selected rows persist even when filtering the search results. By the end of this tutorial, you will have a better understanding of how to create a fully functional and dynamic LWC datatable.

Prerequisites:

To follow along with this tutorial, you should have a basic understanding of Lightning Web Components (LWC) and have a Salesforce Developer Edition or any Salesforce environment with the necessary permissions to create and modify Lightning components.

Step 1: Setting up the LWC Component

First, let's create a new LWC component by navigating to the appropriate directory in your Salesforce DX project. Use the following command in the terminal:

sfdx force:lightning:component:create -n datatableWithSelection

This command will create a new LWC component with the name "datatableWithSelection" in your project's default LWC directory.

Step 2: Implementing the LWC DataTable

Open the newly created LWC component in your preferred code editor. Inside the HTML file (datatableWithSelection), replace the default code with the following:

<template>

    <lightning-card title="Data Table with Selected Rows Persistence">

        <div class="slds-m-around_medium">

            <lightning-input type="text" label="Filter" onchange={handleFilterChange}></lightning-input>

            <lightning-datatable

                key-field="id"

                data={filteredData}

                columns={columns}

                onrowselection={handleRowSelection}

                selected-rows={selectedRows}

            ></lightning-datatable>

        </div>

    </lightning-card>

</template>

Here, we have created a basic structure for our datatable component. We have included a lightning-input element for filtering, a lightning-datatable to display the data, and a lightning-card for overall styling.

Step 3: Defining JavaScript Functions and Variables

Switch to the JavaScript file (datatableWithSelection.js) and replace the default code with the following:

import { LightningElement, wire } from 'lwc';

import fetchData from '@salesforce/apex/DataTableController.fetchData';

export default class DatatableWithSelection extends LightningElement {

    filterText = '';

    data = [];

    selectedRows = [];

    columns = [

        { label: 'Name', fieldName: 'Name' },

        { label: 'Email', fieldName: 'Email' },

        { label: 'Phone', fieldName: 'Phone' }

    ];

    @wire(fetchData)

    wiredData({ error, data }) {

        if (data) {

            this.data = data;

        }

        // Handle error if necessary

    }

    get filteredData() {

        return this.data.filter((row) => {

            return row.Name.toLowerCase().includes(this.filterText.toLowerCase());

        });

    }

    handleFilterChange(event) {

        this.filterText = event.target.value;

    }

    handleRowSelection(event) {

        this.selectedRows = event.detail.selectedRows;

    }

}

In the above code, we import the fetchData Apex method to retrieve the data for our datatable. You will need to create an Apex class and method named DataTableController.fetchData to fetch the data from your Salesforce org. The filteredData getter filters the data based on the filter text entered in the input field. The handleFilterChange function updates the filter text whenever it changes. Lastly, the handleRowSelection function updates the selected rows array whenever a row is selected or deselected.

Step 4: Styling the Component (Optional)

If you want to add custom styles to your component, you can modify the CSS file (datatableWithSelection.css) as per your requirements.

Step 5: Using the Component

To use your newly created LWC component, add it to a Lightning page or any other appropriate location in your Salesforce org. For example, you can add it to a Lightning App Builder page by dragging and dropping the component into a desired location.

Conclusion:

Congratulations! You have successfully built a dynamic LWC datatable that allows selected rows to persist even when filtering the search results. By following this tutorial, you have learned how to create a functional and reusable component to enhance user experience when working with large datasets in Salesforce.

Feel free to customize this component further based on your specific requirements, such as adding pagination, sorting, or additional columns. Happy coding!