Filter Search in LWC Lightning Datatable

by Rijwan Mohmmed
2 comments
filter-search-in-lwc-lightning-datatable-techdicer

Hello friends, Today we are going to discuss Filter Search in LWC Lightning Datatable Salesforce. 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: LWC Datatable CSS Styling

filter-search-in-lwc-lightning-datatable-output-techdicer
filter-searchs-in-lwc-lightning-datatable-output-techdicer

Key Highlights :

  1. Filter the data by search box.
  2. Search in all columns.
  3. Show extensive data in the table
  4. Display data based on the data type by defining the columns object.
  5. Tables can be populated during initialization using the datacolumns, and key-field attributes.

Process & 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];
    }
}

lWCFilterSearchDatatable.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 key-field="Id" data={data} columns={columns} hide-checkbox-column="true"
					show-row-number-column="true" onrowaction={handleRowAction}>
				</lightning-datatable>
			</template>
			<template if:true={error}>
				{error}>
			</template>
		</div>
	</lightning-card>
</template>

lWCFilterSearchDatatable.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 LWCFilterSearchDatatable extends LightningElement {
    @track data;
    @track error;
    @track columns = columns;
    @track searchString;
    @track initialRecords;

    @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;
        }
    }
}

lWCFilterSearchDatatable.js-meta.xml :

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

Output :

filter-search-in-lwc-lightning-datatable-output-techdicer
filter-search-in-lwc-lightning-datatable-output-techdicer

Reference :

  1. LWC Datatable

You may also like

2 comments

Amo April 24, 2023 - 5:16 am

Hello, i Have a question,what if the ‘key words’ search and record volume is 70K,also want to search in all column

Reply
Rijwan Mohmmed April 27, 2023 - 12:51 pm

How are you fetching the 70k records in lwc datatable

Reply

Leave a Comment