function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Amlan MaitiAmlan Maiti 

Lightning datatable -add filter within search

Hi All,

I have a lightning serach compoennt which query from salesforce and show it in a lightning datatble. I have a search textbox in the serach page which basically searchs within the results return to filtered data. I have tried implementing it by searching each value from the Jason string which resulted 2 for loops. In our org , 2000 rows can be returned first and the result needs to be filtered later. Problem with the for loops are that it makes the page unresponsive. 
Here is my below js method which i have already tried. (3 methods).
findByName: function(component,event,helper){
        var searchKey = event.getParam("searchKey");
        var jsonString = component.get("v.tableData");
        const jsonStringAll = component.get("v.tableDataAll");

        //1st method which couldn't identify the row names as multiple objects
        var data = component.get("v.tableDataAll"),
        term = event.getParam("searchKey"),
        results = data, regex;
        try {
            regex = new RegExp(term, "i");
            // filter checks each row, constructs new array where function returns true
            results = data.filter(row => regex.test(row.Asset.Name) /* ||
            regex.test(row.Contact.Name) ||
            regex.test(row.Contact.Contact_Type__c) ||
            regex.test(row.AssetContactRoles__c.Role__c) ||
            regex.test(row.AssetContactRoles__c.End_Date__c)||
            regex.test(row.Contact.Phone)||
            regex.test(row.Asset.CCT_Contact_Center_BU__c)||
            regex.test(row.Asset.Product2.Name)||
            regex.test(row.Asset.Selling_Code__r.Name)||
            regex.test(row.Asset.Dealer_Account_Number__c)||
            regex.test(Asset.Asset_Mailing_Address__c) */
            );
        }
        catch (e) {
            // invalid regex, use full list
            console.log(e);
        }
        component.set("v.tableData",results);
        //2nd method which is by altering JSON, page becomes unresponsive.
        /*var objects = [];
        component.set("v.tableData", '');
         for (var i in jsonStringAll) {
            var key = i;
            var val = jsonStringAll[i];
            for(var j in val){
                var sub_key = j;
                var sub_val = val[j];
               	var keyValueJson = val[sub_key];
                if(keyValueJson !== null) keyValueJson = keyValueJson.toLowerCase();
                if(searchKey !== null) searchKey = searchKey.toLowerCase();
                if(keyValueJson.includes(searchKey)){
                    objects.push(val);
                    component.set("v.tableData",objects);
                    break;
                }
            }
              
   		} */
        //3rd method by hitting server, gets out of memory
        /*var action = component.get("c.findByName");
        action.setParams({
            "searchKey": searchKey,
            "jsonString" : JSON.stringify(jsonStringAll)
        }); 
        action.setCallback(this, function(response) {
            if(!$A.util.isEmpty(searchKey)){
                component.set("v.tableData", response.getReturnValue());
                component.set("v.isSearching", false);
            }
            else{
                component.set("v.tableData", component.get("v.tableDataAll"));
                component.set("v.isSearching", false);
            }
        });
        $A.enqueueAction(action);  */

    }
 
JSON Sample:

[{"Contact.Id":"0031f000004ONXDAA4","Asset.Id":"02i1f000000oVZLAA2","AssetContactRoles__c.Id":"a1G1f000002TNlrEAG","Asset.Name":"1116742","Contact.Name":"Carmela Mccarte","Contact.Contact_Type__c":"Customer","AssetContactRoles__c.Role__c":"Joint Owner","AssetContactRoles__c.End_Date__c":"","Contact.Phone":"","Asset.CCT_Contact_Center_BU__c":"MLB","Asset.Product2.Name":"Manulife Bank - Manulife One Account","Asset.Selling_Code__r.Name":"961865","Asset.Dealer_Account_Number__c":"","Asset.Asset_Mailing_Address__c":"Canada,"},{"Contact.Id":"0031f0000046RjwAAE","Asset.Id":"02i1f000000oVZLAA2","AssetContactRoles__c.Id":"a1G1f000002ayBMEAY","Asset.Name":"1116742","Contact.Name":"Barnard B Ball","Contact.Contact_Type__c":"Advisor","AssetContactRoles__c.Role__c":"","AssetContactRoles__c.End_Date__c":"","Contact.Phone":"(518) 719-4653","Asset.CCT_Contact_Center_BU__c":"MLB","Asset.Product2.Name":"Manulife Bank - Manulife One Account","Asset.Selling_Code__r.Name":"961865","Asset.Dealer_Account_Number__c":"","Asset.Asset_Mailing_Address__c":"Canada,"}]