Filter Search in LWC Lightning Datatable

by Rijwan Mohmmed
0 comment
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

Leave a Comment