Lightning Datatable component with client side search
1:18 PM
In this article we will look at implementing a simple lightning component that displays a list of contacts in a table. We will add a simple client side search box which searches all columns in the table.
Demo Link: https://forcetree-developer-edition.na147.force.com/s/datatabledemo
Demo Link: https://forcetree-developer-edition.na147.force.com/s/datatabledemo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <aura:component implements="forceCommunity:availableForAllPageTypes" access="global" controller="LightningDataTableController"> | |
| <!-- attributes --> | |
| <aura:attribute name="data" type="Map"/> | |
| <aura:attribute name="filteredData" type="Map"/> | |
| <aura:attribute name="columns" type="List"/> | |
| <!-- handlers--> | |
| <aura:handler name="init" value="{!this }" action="{!c.init }"/> | |
| <span> | |
| <lightning:input onchange="{!c.searchTable}" type="search" label="Searh" variant="label-hidden" placeholder="Enter search term" aura:id="SearchBox"/> | |
| </span> | |
| <br/> | |
| <lightning:datatable | |
| columns="{!v.columns}" | |
| data="{!v.filteredData}" | |
| keyField="id" | |
| /> | |
| </aura:component> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| public class LightningDataTableController { | |
| @AuraEnabled | |
| public static List<sObject> fetchData() { | |
| //Query and return list of Contacts | |
| List<SObject> objRecords = [SELECT FirstName, LastName,Email from Contact LIMIT 10]; | |
| return objRecords; | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ({ | |
| init: function (cmp, event, helper) { | |
| cmp.set('v.columns', [ | |
| { label: 'First Name', fieldName: 'FirstName', type: 'text' }, | |
| { label: 'Last Name', fieldName: 'LastName', type: 'text' }, | |
| { label: 'Email', fieldName: 'Email', type: 'text' } | |
| ]); | |
| var action = cmp.get("c.fetchData"); | |
| action.setCallback(this, function(response){ | |
| var state = response.getState(); | |
| if (state === "SUCCESS") { | |
| cmp.set("v.data", response.getReturnValue()); | |
| cmp.set("v.filteredData", response.getReturnValue()); | |
| } | |
| }); | |
| $A.enqueueAction(action); | |
| }, | |
| searchTable : function(cmp,event,helper) { | |
| var allRecords = cmp.get("v.data"); | |
| var searchFilter = event.getSource().get("v.value").toUpperCase(); | |
| var tempArray = []; | |
| var i; | |
| for(i=0; i < allRecords.length; i++){ | |
| if((allRecords[i].FirstName && allRecords[i].FirstName.toUpperCase().indexOf(searchFilter) != -1) || | |
| (allRecords[i].LastName && allRecords[i].LastName.toUpperCase().indexOf(searchFilter) != -1 ) || | |
| (allRecords[i].Email && allRecords[i].Email.toUpperCase().indexOf(searchFilter) != -1 ) ) | |
| { | |
| tempArray.push(allRecords[i]); | |
| } | |
| } | |
| cmp.set("v.filteredData",tempArray); | |
| } | |
| }) |
6 comments
How do one implement the same functionality in LWC? esp the .js component file.
ReplyDeleteHi, The blog is really useful. Thanks
ReplyDeleteHow can I preserve the checkbox state during and after the search.
Example: say, I have selected 4 records on the page and type something in searchbox and exit the search, the selected boxes will disappear..
Hi Honey! Did find the solution?
DeleteHi, for the apex class, how do we create the test class to get more 75% coverage?
ReplyDeleteThis helped me a tremendous amount. Thank you thank you
ReplyDeleteHi thanks for the code it works fine and it helped me a lot but when you backspace it does not filter backwards can you suggest code for that
ReplyDelete