+ Start a Discussion
Anil Bolisetty 2Anil Bolisetty 2 

lightning table custom filters

Hello,

I am using lightning:datatble to display some list i have a requirement to use filters like start date end date and 2 picklist values ,user can choose any combination to update the list can any one suggest better design ?
Khan AnasKhan Anas (Salesforce Developers) 
Hi Anil,

Greetings to you!

Please refer to the below links which might help you further with the above requirement.

https://salesforce.stackexchange.com/questions/230027/how-to-change-data-in-lightning-datatable-based-upon-a-dropdown-select-filter

https://salesforce.stackexchange.com/questions/219619/search-functionality-in-lightningdatatable

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Karthik RameshKarthik Ramesh
@Anil - Did you find a solution for this? If yes, please post it 

Thanks,
Karthik
Ramakrishna Reddy GouniRamakrishna Reddy Gouni
@Anil,

Did it in my org. if you want it contact me on rkreddy.sfdx at gmail.com
Ramakrishna Reddy GouniRamakrishna Reddy Gouni
https://rkreddy-sfdx.blogspot.com/2019/12/how-to-apply-filters-on-lightning.html
Venkata Sirish 37Venkata Sirish 37
Looking for similar functionality
Venkata Sirish 37Venkata Sirish 37
Contacted you on mail.
 
Ramakrishna Reddy GouniRamakrishna Reddy Gouni
<aura:component controller="ContactController" implements="flexipage:availableForAllPageTypes" access="global" >

    <aura:attribute name="mydata" type="Object"/>
    <aura:attribute name="fname" type="string"/>
    <aura:attribute name="lname" type="string"/>
    <aura:attribute name="mycolumns" type="List"/>
    <aura:handler name="init" value="{! this }" action="{! c.doInit }"/>
    <div>
        <lightning:input value="{!v.fname}"/>
        <lightning:input value="{!v.lname}"/>
        <lightning:button label="Search" onclick="{!c.doSearch}"/>
    </div>
    <lightning:datatable data="{! v.mydata }" 
                         columns="{! v.mycolumns }" 
                         keyField="id"
                         hideCheckboxColumn="true"
                         
                         />
</aura:component>
 
({
   doInit: function (cmp, event, helper) {
        cmp.set('v.mycolumns', [
                {label: 'Contact Name', fieldName: 'Name', type: 'text'},
                {label: 'Phone', fieldName: 'Phone', type: 'phone'},
                {label: 'Email', fieldName: 'Email', type: 'email'}
            ]);
       var actionFilter = {"fname":cmp.get("v.fname"),"lname":cmp.get("v.lname")};
        helper.getData(cmp, actionFilter);
    },
    doSearch:function(cmp, event, helper){
        var actionFilter = {"fname":cmp.get("v.fname"),"lname":cmp.get("v.lname")};
        helper.getData(cmp, actionFilter);
    },
     updateColumnSorting: function (cmp, event, helper) {
        var fieldName = event.getParam('fieldName');
        var sortDirection = event.getParam('sortDirection');
        // assign the latest attribute with the sorted column fieldName and sorted direction
        cmp.set("v.sortedBy", fieldName);
        cmp.set("v.sortedDirection", sortDirection);
        helper.sortData(cmp, fieldName, sortDirection);
    }
})
 
({
    getData : function(cmp, actionFilter) {
        var action = cmp.get('c.getContacts');
        action.setParams(actionFilter)
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                cmp.set('v.mydata', response.getReturnValue());
            } else if (state === "ERROR") {
                var errors = response.getError();
                console.error(errors);
            }
        }));
        $A.enqueueAction(action);
    },
    sortData: function (cmp, fieldName, sortDirection) {
        var data = cmp.get("v.data");
        var reverse = sortDirection !== 'asc';
        //sorts the rows based on the column header that's clicked
        data.sort(this.sortBy(fieldName, reverse))
        cmp.set("v.data", data);
    },
    sortBy: function (field, reverse, primer) {
        var key = primer ?
            function(x) {return primer(x[field])} :
            function(x) {return x[field]};
        //checks if the two rows should switch places
        reverse = !reverse ? 1 : -1;
        return function (a, b) {
            return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
        }
    }
})
 
public with sharing class ContactController {
    @AuraEnabled
    public static List<Contact> getContacts(string fname, string lname) {
        if(fname==null)
            fname='';
        if(lname==null)
            lname='';
        
        string firstname = '%'+fname+'%';
        string lastname = '%'+lname+'%';
        
        
        List<Contact> contacts = [SELECT Id, Name, Phone, Email FROM Contact where FirstName like :firstname and LastName like :lastname];
        system.debug(contacts);        
        return contacts;
    } 
}

 
Rishabh Bansal 23Rishabh Bansal 23
Hi Anil,
I would recomment you to use the custom search bar in which you can enter any value if it is your dates value or any picklist values and put a search logic in the javascipt itself instead of going to the backend for this and inserting WHERE filters in the query as it is time consuming.

Something like this:-
if (searchString) {
            for (var i = 0; i < allRecords.length; i++) {
                var allRecord = allRecords[i];
                var isFound = false;
                for (var key in allRecord) {
                    if (allRecord.hasOwnProperty(key)) {
                        /*console.log('record ' + key + ': ' + ((allRecord[key]).toString()).toLowerCase());
                        console.log('searchString: ' + searchString.toLowerCase());
                        console.log('value: ' + (((allRecord[key]).toString()).toLowerCase()).indexOf(searchString.toLowerCase()));*/
                        if ((((allRecord[key]).toString()).toLowerCase()).indexOf(searchString.toLowerCase()) > -1 && displayedFields.indexOf(key) > -1) {
                            //console.log(allRecord);
                            isFound = true;
                        }
                    }
                }
                if (isFound) {
                    //console.log(allRecord);
                    filteredRecords.push(allRecord);
                }
            }
            //console.log(filteredRecords);
            c.set('v.filteredRecords', filteredRecords);
        } else {
            c.set('v.filteredRecords', allRecords);
        }

Thanks,
Rishabh Bansal