Dynamic Filters for Salesforce LWC Lightning Datatable

In the Salesforce LWC lightning data table, we can sort and filter records with multiple conditions in a single list view by applying dynamic filters. In this Salesforce tutorial, we will learn how to add dynamic filters to an LWC Lightning data table in Salesforce.

Dynamic Filters in LWC Data Table

In LWC data tables, adding dynamic filters means applying different filters, like dropdowns or picklists, to specific columns in a Lightning data table to filter the data. We can use components like lightning-combobox or lightning-input for filter options and JavaScript logic to filter the table’s data based on the selected filter.

With this feature, we can apply multiple filters to get the records in the data table based on the different values selected in the filters.

Add Dynamic Filters to LWC Lightning Data Table

In LWC data tables, we apply filters for various criteria based on the different field values, which can be a picklist, text, currency, or boolean field. In the steps below, we will see how to apply dynamic filters for multiple fields to the Salesforce LWC data tables.

When we have to apply multiple filters for different fields, such as filtering opportunity records when the amount (currency) is a minimum of 40000 and the stage is closed won.

This contains more than one filter with different data types, so when we apply filters based on multiple values, it might be text, currency, or picklist.

For the different data type filters, we can add multiple input fields that combine all filter criteria and give the results.

In this example, I will create a LWC lightning data table with field columns of different data types, such as Name(text), Amount ( currency), Stage, and Type (picklist), then a date field (Close date).

1. Create a controller class to fetch the Opportunity record fields with different data types.

public with sharing class OpportunityController {
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunities() {
        return [SELECT Id, Name, StageName, Type, Amount, CloseDate 
                FROM Opportunity 
                WHERE IsDeleted = false 
                LIMIT 100];
    }
}

2. To get the picklist field values of the Stage and Type field from the opportunity object, add the code below in the controller class.

        List<String> conditions = new List<String>();
        
        }
        if (amountFilter != null) {
            conditions.add('Amount >= :amountFilter');
        }
        if (String.isNotBlank(stageFilter)) {
            conditions.add('StageName = :stageFilter');
        }
        if (String.isNotBlank(typeFilter)) {
            conditions.add('Type = :typeFilter');
        }
        if (closeDateFilter != null) {
            conditions.add('CloseDate = :closeDateFilter');
        }
        
        if (!conditions.isEmpty()) {
            query += ' AND ' + String.join(conditions, ' AND ');
        }
        
        query += ' LIMIT 100';
        
        return Database.query(query);
    }
    
    @AuraEnabled(cacheable=true)
    public static List<String> getStagePicklistValues() {
        List<String> picklistValues = new List<String>();
        Schema.DescribeFieldResult fieldResult = Opportunity.StageName.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry f : ple) {
            picklistValues.add(f.getLabel());
        }
        return picklistValues;
    }
    
    @AuraEnabled(cacheable=true)
    public static List<String> getTypePicklistValues() {
        List<String> picklistValues = new List<String>();
        Schema.DescribeFieldResult fieldResult = Opportunity.Type.getDescribe();
        List<Schema.PicklistEntry> ple = fieldResult.getPicklistValues();
        for (Schema.PicklistEntry f : ple) {
            picklistValues.add(f.getLabel());
        }
        return picklistValues;
    }
}

In the above apex class, we have defin