Selected Rows Persistent in Filter Search LWC Datatable

Hello folks, today we will discuss the Selected Rows Persistent in Filter Search LWC Datatable. Sometimes we need to select the rows and at the same time, we also need to filter data. So in that case We have to keep selected records so we can perform the action at the end. Datatable is a table where we show the data in tabular form. When there are large data we use a search filter. Based on any column we enter the text in the search box the relevant record will display.

Also, check this: Keep Selected Rows in LWC Datatable Pagination

Key Highlights :

1. Persistent selected rows.
2. Can search in all columns.
3. Show extensive data in the table

Code :

DataController.cls :

public with sharing class DataController {
    @AuraEnabled (cacheable=true)
    public static List<Account> retrieveAccounts(){
        return [SELECT Id, Name, Type, BillingCountry, Industry, Email__c
                FROM Account
                LIMIT 2000];
    }
}

selectedRowsPersistentFilterLWCDatatable.HTML:

<template>
	<lightning-card title="Accounts" icon-name="standard:account">
		<div class="slds-m-around_medium">
			<lightning-layout multiple-rows>
				<lightning-layout-item size="6" padding="around-small"></lightning-layout-item>
				<lightning-layout-item size="6" padding="around-small">
					<lightning-input type="search" label="Search Account" onchange={handleSearch}></lightning-input>
				</lightning-layout-item>
			</lightning-layout>
			<template if:true={data}>
				<lightning-datatable data-id="datatable" key-field="Id" data={data} columns={columns}
					show-row-number-column="true" selected-rows={selectedRows} onrowselection={handleRowSelection}>
				</lightning-datatable>
			</template>
			<template if:true={error}>
				{error}>
			</template>
		</div>
	</lightning-card>
</template>

selectedRowsPersistentFilterLWCDatatable.JS:

import { LightningElement, wire, track } from 'lwc';
import retrieveAccounts from '@salesforce/apex/DataController.retrieveAccounts';

const columns = [
    { label: 'Name', fieldName: 'Name' },
    { label: 'Type', fieldName: 'Type' },
    { label: 'Email', fieldName: 'Email__c', type: 'email' },
    { label: 'BillingCountry', fieldName: 'BillingCountry' },
];

export default class SelectedRowsPersistentFilterLWCDatatable extends LightningElement {
    @track data;
    @track error;
    @track columns = columns;
    @track searchString;
    @track initialRecords;
    @track selectedRows = [];

    @wire(retrieveAccounts)
    wiredAccount({ error, data }) {
        if (data) {
            console.log(data);
            this.data = data;
            this.initialRecords = data;
            this.error = undefined;
        } else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }

    handleSearch(event) {
        const searchKey = event.target.value.toLowerCase();

        if (searchKey) {
            this.data = this.initialRecords;

            if (this.data) {
                let searchRecords = [];

                for (let record of this.data) {
                    let valuesArray = Object.values(record);

                    for (let val of valuesArray) {
                        console.log('val is ' + val);
                        let strVal = String(val);

                        if (strVal) {

                            if (strVal.toLowerCase().includes(searchKey)) {
                                searchRecords.push(record);
                                break;
                            }
                        }
                    }
                }

                console.log('Matched Accounts are ' + JSON.stringify(searchRecords));
                this.data = searchRecords;
            }
        } else {
            this.data = this.initialRecords;
        }

        this.template.querySelector('[data-id="datatable"]').selectedRows = this.selectedRows;
    }

    handleRowSelection(event) {
        let updatedItemsSet = new Set();
        // List of selected items we maintain.
        let selectedItemsSet = new Set(this.selectedRows);
        // List of items currently loaded for the current view.
        let loadedItemsSet = new Set();

        this.data.map((ele) => {
            loadedItemsSet.add(ele.Id);
        });

        if (event.detail.selectedRows) {
            event.detail.selectedRows.map((ele) => {
                updatedItemsSet.add(ele.Id);
            });

            // Add any new items to the selectedRows list
            updatedItemsSet.forEach((id) => {
                if (!selectedItemsSet.has(id)) {
                    selectedItemsSet.add(id);
                }
            });
        }

        loadedItemsSet.forEach((id) => {
            if (selectedItemsSet.has(id) && !updatedItemsSet.has(id)) {
                // Remove any items that were unselected.
                selectedItemsSet.delete(id);
            }
        });

        this.selectedRows = [...selectedItemsSet];
        console.log('selectedRows==> ' + JSON.stringify(this.selectedRows));
    }
}

selectedRowsPersistentFilterLWCDatatable.js-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. LWC Datatable