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
Key Highlights :
- Filter the data by search box.
- Search in all columns.
- Show extensive data in the table
- Display data based on the data type by defining the columns object.
- Tables can be populated during initialization using the
data,columns, andkey-fieldattributes.
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 :
Reference :
What’s your Reaction?
+1
+1
4
+1
2
+1
1
+1
2
+1
1
Total views : 810557
10 comments
Hello, i Have a question,what if the ‘key words’ search and record volume is 70K,also want to search in all column
How are you fetching the 70k records in lwc datatable
From my experience, the js search can be working quite fast, rendering of 1000+ records by datatable can take a while though, which might be a limiting factor
very nice Rizwan Bhai your code is simple and easy to understand.
Thanks @Viqar
In this we are able to search the all the columns and how can we write to search only one column in the table
This one for all columns search but you can also do only for 1 column in handle search method
Hi Rijwan, I have a question, how can I display related fields such as contact
Hi @Daniel, you mean lookup fields
right