How to Filter Power Apps Data Table By Dropdown?

Suppose you want to filter the Power Apps data table using dropdown. In that case, you can follow this tutorial to get all the information about how to filter Power Apps data table by dropdown.

Here, we will discuss filtering the Power Apps data table by dropdown using the collection and SharePoint Online list.

Also, we will cover the topics below:

  • How to filter Power Apps data table by dropdown date
  • Filter the Power Apps data table by dropdown and search
  • Filtering Power Apps data table by multiple dropdowns

How to Filter Power Apps Data Table By Dropdown

While working with Power Apps data table, we usually need to filter the data table records using different controls [Dropdown, Combobox, Text input, etc…].

Now, I would like to filter the Power Apps data table by dropdown control in two ways. Such as:

  1. Filter Power Apps Data Table By Dropdown using Collection
  2. How to Filter Power Apps Data Table By Dropdown using SharePoint List

Filter Power Apps Data Table By Dropdown [Using Collection]

I have a Power Apps collection named “colTravel” that contains some records based on the different columns.

I have added a Data table control to display all the records from the collection.

Input:

How to Filter Power Apps Data table Based On Dropdown

Now, I would like to filter this data table by dropdown selected value [When the user selects any “Airline” option from the dropdown, the data table will display the collection records based on the selected value].

Output:

Filter Power Apps Data table Based On Dropdown

To work around this, follow the below-mentioned steps. Such as:

1. On the Power Apps Screen, write the code below on the App’s OnStart property as:

OnStart = ClearCollect(
    colTravel,
    {
        TripTitle: "Company anniversary trip",
        Destination: "Indiana,UK",
        TravelStartDate: "9/25/2023",
        TravelEndDate: "9/31/2023",
        Airline: "Alaska Air",
        EstimatedAirfare: 6000,
        Hotel: "Indiana Hotel",
        EstimatedHotelCost: 1500,
        Requestor: "Lidia Holloway",
        Approved: "Yes"
    },
    {
        TripTitle: "Research interviews",
        Destination: "Bengaluru,India",
        TravelStartDate: "10/15/2023",
        TravelEndDate: "10/20/2023",
        Airline: "SouthWest",
        EstimatedAirfare: 800,
        Hotel: "Hotel Royal Orchid Bangalore",
        EstimatedHotelCost: 1200,
        Requestor: "Lynne Robbins",
        Approved: "No"
    },
    {
        TripTitle: "Design sprint",
        Destination: "New York,UK",
        TravelStartDate: "11/22/2023",
        TravelEndDate: "11/28/2023",
        Airline: "British Airways",
        EstimatedAirfare: 5500,
        Hotel: "Hotel Mela Times Square",
        EstimatedHotelCost: 1800,
        Requestor: "Joni Sherman",
        Approved: "Yes"
    },
    {
        TripTitle: "Sales team conference",
        Destination: "Georgia,UK",
        TravelStartDate: "12/20/2023",
        TravelEndDate: "12/25/2023",
        Airline: "Emirates",
        EstimatedAirfare: 6500,
        Hotel: "Hotel grand",
        EstimatedHotelCost: 2000,
        Requestor: "Johanna Lorenz",
        Approved: "No"
    },
    {
        TripTitle: "Event and conference travel",
        Destination: "Indiana,UK",
        TravelStartDate: "12/15/2023",
        TravelEndDate: "12/18/2023",
        Airline: "Alaska Air",
        EstimatedAirfare: 6000,
        Hotel: "Indiana Hotel",
        EstimatedHotelCost: 1500,
        Requestor: "Lidia Holloway",
        Approved: "Yes"
    },
    {
        TripTitle: "Internal meetings and visiting offices",
        Destination: "Georgia,UK",
        TravelStartDate: "12/27/2023",
        TravelEndDate: "12/30/2023",
        Airline: "Emirates",
        EstimatedAirfare: 6500,
        Hotel: "Hotel grand",
        EstimatedHotelCost: 2000,
        Requestor: "Johanna Lorenz",
        Approved: "No"
    },
    {
        TripTitle: "Company retreats",
        Destination: "Bengaluru,India",
        TravelStartDate: "1/5/2024",
        TravelEndDate: "1/11/2024",
        Airline: "SouthWest",
        EstimatedAirfare: 800,
        Hotel: "Hotel Royal Orchid Bangalore",
        EstimatedHotelCost: 1200,
        Requestor: "Lynne Robbins",
        Approved: "No"
    },
    {
        TripTitle: "Client meetings",
        Destination: "Austria,UK",
        TravelStartDate: "1/20/2024",
        TravelEndDate: "1/27/2024",
        Airline: "Japan Airlines",
        EstimatedAirfare: 7500,
        Hotel: "Hotel Rand",
        EstimatedHotelCost: 1500,
        Requestor: "Johanna Lorenz",
        Approved: "No"
    },
    {
        TripTitle: "Transfers and offshore work",
        Destination: "New York,UK",
        TravelStartDate: "1/31/2024",
        TravelEndDate: "2/5/2024",
        Airline: "British Airways",
        EstimatedAirfare: 5500,
        Hotel: "Hotel Mela Times Square",
        EstimatedHotelCost: 1800,
        Requestor: "Joni Sherman",
        Approved: "Yes"
    },
    {
        TripTitle: "Bleisure travel",
        Destination: "Indiana,UK",
        TravelStartDate: "2/15/2024",
        TravelEndDate: "2/21/2024",
        Airline: "Alaska Air",
        EstimatedAirfare: 6000,
        Hotel: "Indiana Hotel",
        EstimatedHotelCost: 1500,
        Requestor: "Lidia Holloway",
        Approved: "Yes"
    },
    {
        TripTitle: "Bleisure travel",
        Destination: "Indiana,UK",
        TravelStartDate: "2/15/2024",
        TravelEndDate: "2/21/2024",
        Airline: "Alaska Air",
        EstimatedAirfare: 6000,
        Hotel: "Indiana Hotel",
        EstimatedHotelCost: 1500,
        Requestor: "Lidia Holloway",
        Approved: "Yes"
    }
)

Where,

  • colTravel = Power Apps collection name
  • TripTitle, Destination, TravelStartDate, etc… = Collection Headers/Columns
  • “Company anniversary trip”, “Indiana,UK”, etc… = Collection Records/Rows
How to Filter Power Apps Data table by Dropdown

2. Click the App’s Run OnStart button to get the created collection. Also, If you want to find the collection, go to the Variables -> expand the Collections dropdown [colTravel] to get the collection.

See also  Gallery Control in Power Apps [How to use with examples]

Refer to the below screenshot:

Filter Power Apps Datatable based on Dropdown Value

3. Next, Insert a Dropdown control and set its Items property as:

Items = Distinct(colTravel, Airline)

Where,

  • Distinct() = This Power Apps Distinct() function helps to remove all the duplicates from the data source
  • colTravel = Power Apps collection name
  • Airline = Collection choice field
Power Apps Data Table Filter by Dropdown

4. Also, if you want to display all the records on the data table when the dropdown is empty or blank, then follow the below code in the dropdown Items property:

Items = [
    Blank(),
    "Alaska Air",
    "SouthWest",
    "British Airways",
    "Emirates",
    "Japan Airlines"
]

Where,

  • Blank() = This function used to create a blank value
  • “Alaska Air”, “SouthWest”, etc… = Collection choice field values
Filter Power Apps Data table Based On the Dropdown

5. Then, insert a Data table control and set its Items property to the code below.

Items = If(
    drp_Airline.Selected.Value = Blank(),
    colTravel,
    Filter(
        colTravel,
        Airline = drp_Airline.Selected.Value
    )
)

Where,

  • If() = This function is used to evaluate the unrelated conditions
  • drp_Airline = Power Apps dropdown name
Filter data table based on two dropdown values

6. Once your app is ready, Save, Publish, and Preview the app. When the user selects a specific value from the dropdown control, the data table will display the filtered records.

Filter Power Apps Data table Based On Dropdown Control

Filter Power Apps Data Table By Dropdown [Using SharePoint List]

Similarly, you can also filter the SharePoint list records on the Power Apps data table using dropdown.

I have taken a SharePoint Online list [Employee Onboarding] containing the fields below.

Input:

How to Filter the Power Apps Data table Based On Dropdown

In Power Apps, there is a Data table and a Dropdown control. The data table filters and displays all the SharePoint list records based on the dropdown selected value [Employee Department]

Output:

How to use Power Apps dropdown to filter data table

To achieve it, follow the below steps.

1. On Power Apps, connect the specific SharePoint Online list [Employee Onboarding] to the app -> Select the Power Apps Screen and set its OnVisible property:

OnVisible = ClearCollect(
    colEmployee,
    {Value: "All"}
);
Collect(
    colEmployee,
    Distinct(
        'Employee Onboarding',
        'Employee Department'.Value
    )
)

Where,

  • colEmployee = Power Apps collection name
  • {Value: “All”} = Collection Item
  • Distinct() = This function can remove duplicate values from a data source
  • Employee Onboarding = SharePoint Online list
  • ‘Employee Department‘ = SharePoint choice field column
Power Apps Data Table Filter with Dropdown

2. Next, insert a Dropdown control -> Set its Items property as:

Items = colEmployee
Power Apps Filter Data Table with Dropdown

3. Now, insert a Data table control and set its Items property as shown below:

Items = If(
    drp_Department.Selected.Value = "All",
    'Employee Onboarding',
    Filter(
        'Employee Onboarding',
        'Employee Department'.Value = drp_Department.Selected.Value
    )
)

Where,

  • drp_Department = Power Apps dropdown name
Filter Data table Based on Dropdown in Power Apps

4. Save, Publish, and Preview the app. When the user selects a specific value from the dropdown control, the data table will display the filtered records, as in the screenshot below.

See also  How to Create Power Apps Quiz App?

This way, you can filter the Power Apps data table by dropdown control.

Filter Data table Based on the Dropdown in Power Apps

Power Apps Filter Data Table By Dropdown Date

Using a simple example, let’s see how to filter a Power Apps data table by dropdown date.

Example:

I will also take the above SharePoint Online list [Employee Onboarding] for this example. Now, I would like to filter and display each record from the SharePoint list based on the dropdown selected date.

Output:

Filter Power Apps Data Table with Dropdown

To do so, follow the below steps.

1. On the Power Apps Screen -> Insert a Dropdown control and set its Items property to the code below.

Items = Distinct(
    'Employee Onboarding',
    'Joining Date'
)

Where,

  • Employee Onboarding = SharePoint Online list
  • Joining Date = SharePoint list date and time field
Filter a Power Apps Data Table with Dropdown

2. Next, insert a Dropdown control and set its Items property as:

Items = Filter(
    'Employee Onboarding',
    'Joining Date' = drp_JoiningDate.Selected.Value
)

Where,

  • drp_JoiningDate = Power Apps dropdown name
Filter the Power Apps Data Table with Dropdown

3. Save, Publish, and Preview the app. Whenever the user selects any specific date from the dropdown control, the data table will filter and display all the records based on the dropdown selected date like below.

Power Apps Filter Data Table by Dropdown date

Power Apps Filter Data Table By Dropdown and Search

Here, I will show you how to filter the Power Apps data table by dropdown and search with a simple scenario.

Scenario:

I will take the same above Power Apps collection records [colTravel] for this scenario. Now, I want to filter and display each record from the collection by selecting the dropdown value and search result, as in the screenshot below.

Output:

Power Apps Filter Data Table based on DropDown value

To achieve it, follow the below steps.

1. On the Power Apps Screen -> Insert a Text input control and set its Default property as:

Default = "Search Airline"
Power Apps Filter the Data Table based on Dropdown Value

2. Next, insert a Dropdown control and set its Items property like:

Items = Distinct(
    colTravel,
    TravelStartDate
)

Where,

  • TravelStartDate = Collection date and time field
Filter Data Table based on dropdown from sharepoint list

3. Now, insert a Data table control and set its Item property to the code below.

Items = Search(
    Filter(
        colTravel,
        TravelStartDate = drp_TravelStartDate.Selected.Value
    ),
    txt_Airline.Text,
    "Airline"
)

Where,

  • drp_TravelStartDate = Power Apps dropdown name
  • txt_Airline = Power Apps text input name
PowerApps Filter and Search drop down DataTable

4. Save, Publish, and preview the app. This data table will display the filtered records based on the search results and selected dropdown value as in the screenshot below.

Power Apps filter datatable by Search and dropdown

Power Apps Filter Data Table By Multiple Dropdowns

Last, using a simple example, I will show you how to filter the Power Apps data table by multiple dropdowns.

See also  How to Count Rows in Power Apps Collection?

Example:

I have a SharePoint Online list, i.e., [Expense Tracker] and this list contains the below fields.

Input:

How to Filter the Power Apps Data table Based On Dropdown

Power Apps has three Dropdown controls [drp_Month, drp_Expense Type, and drp_Budget] and a Data table control. This data table will display each record from the SharePoint Online list based on three dropdowns selected values.

Have a look at the below screenshot for the output:

Output:

Power Apps Filter Data Table By Multiple Dropdowns

To work around this example, follow the below steps. Such as:

1. Connect the respective SharePoint Online list [Expense Tracker] -> On the Power Apps screen -> Insert three Dropdown controls, i.e., [drp_Month, drp_Expense Tracker, and drp_Budget] and set its Items properties as:

Items = Distinct(
    'Expense Tracker',                                                  //For Month Value
    Month.Value
)

Items = Distinct(
    'Expense Tracker',                                                //For Expense Type Value               
    'Expense Type'.Value
)

Items = Distinct(
    'Expense Tracker',                                               //For Budget Value
    Budget.Value
)

Where,

  • ‘Expense Tracker’ = SharePoint Online list
  • Month, Expense Type, and Budget = SharePoint list choice fields
Power Apps Filter Data Table using Multiple Dropdowns

2. Next insert a Data table control and set its Items property to the code below.

Items = Filter(
    'Expense Tracker',
    Month.Value = drp_Month.Selected.Value,
    'Expense Type'.Value = 'drp_Expense Type'.Selected.Value,
    Budget.Value = drp_Budget.Selected.Value
)

Where,

  • drp_Month = Power Apps 1st Dropdown Control Name
  • drp_Expense Type = Power Apps 2nd Dropdown Control Name
  • drp_Budget = Power Apps 3rd Dropdown Control Name
Filter Power Apps Data Table using Multiple Dropdowns

3. SavePublish, and Preview the app. The Data table will display the filtered records, i.e., [September Month Records] based on the three selected dropdown values as in the screenshot below.

This way, we can filter the Power Apps data table by multiple dropdowns.

Power Apps Filter Data Table based on Multiple Dropdowns

Some more Power Apps articles you may also like:

I trust this Power Apps article helps you understand how to filter the Power Apps data table using a single dropdown or multiple dropdowns and how to filter a Power Apps data table using search and dropdown.

>