Column Header Sorting for Power Apps Gallery

When a gallery displays hundreds or thousands of records, users need a quick way to bring the most relevant items to the top. Filtering narrows the set, but sorting arranges it in a logical order—by price, date, name, or any other column. Adding clickable column headers that trigger sorting gives your app the feel of a well-built data table, empowering users to explore information at their own pace.

In this article we'll build a reusable pattern for column-header sorting in a canvas app gallery. We'll combine sorting with filtering, discuss delegation, and highlight common pitfalls. The result is a gallery that behaves like a responsive, sortable list.

Scenario: Warehouse Inventory Lookup

Imagine a warehouse app where staff need to find products by name, category, price, stock level, or last restock date. The data lives in a SharePoint list called InventoryItems with the following columns:

Column	Data Type
ProductName	Text (Title)
Category	Choice
UnitPrice	Currency
StockQuantity	Number
LastRestocked	Date

The screen also includes dropdowns to filter by Category and a slider for a minimum StockQuantity. The gallery must respond to both filters and the sort column chosen by tapping a header icon.

Setting Up the Header Row and Sort Icons

The header row sits above the gallery, not inside it. For each column, place a Label (the column name) and an Icon (chevron) side by side. Use a flexible container or simply align them manually.

Insert a vertical gallery and bind its Items to your SharePoint list for now.
Add a container or a set of labels above the gallery. Write the column names in the labels.
Next to each label, insert a ChevronDown icon (from the icons panel). These icons will respond to taps and change appearance based on the sort state.

Managing Sort State with Context Variables

On the OnVisible property of the screen (or elsewhere suitable), initialize two context variables:

powerfxInitialize sort state

UpdateContext({
  sortColumn: "",
  sortAscending: true
})

sortColumn stores the name of the currently sorted column (empty string means no sort).
sortAscending stores the direction (true for ascending, false for descending).

Wiring the Sort Logic per Column

Every sort icon uses the same pattern. For the ProductName column, place the following code in the icon's OnSelect:

powerfxOnSelect – Product Name sort icon

UpdateContext({
  sortColumn: "ProductName",
  sortAscending: sortColumn <> "ProductName" Or !sortAscending
})

How it works:

When a different column (e.g., UnitPrice) was previously sorted, sortColumn <> "ProductName" is true, so sortAscending becomes true (ascending). The sort switches to the new column in ascending order.
When the same column (ProductName) is tapped again, sortColumn <> "ProductName" is false, so sortAscending becomes !sortAscending – it toggles the direction.

Repeat this pattern for each column, using the respective column name string (e.g., "UnitPrice", "StockQuantity", "LastRestocked").

Changing Icon Appearance to Reflect Sort State

Each icon must show a downward or upward chevron and highlight the active column. Set the following properties on the ProductName icon (and adapt for others).

powerfxIcon property

If(
  sortColumn <> "ProductName",
  Icon.ChevronDown,
  sortAscending,
  Icon.ChevronUp,
  Icon.ChevronDown
)

powerfxColor property

If(sortColumn = "ProductName", Color.DarkOrange, Color.Gray)

When the column is active, the icon turns orange and points up (for ascending) or down (for descending). Inactive columns stay gray with a downward chevron.

Building the Gallery Items Formula with Filtering and Sorting

Now we combine filtering and sorting into one delegation-friendly formula. First, define the filtering criteria using variables (e.g., varCategory from a Dropdown, varMinStock from a Slider or Text input).

The core pattern uses Switch to pick the sort column and wraps a Sort around a Filter for each case. The unfiltered data source appears only if no sort column is selected (the default case).

powerfxGallery Items property

Switch(
  sortColumn,
  "ProductName",
  Sort(
      Filter(InventoryItems, Category = varCategory && StockQuantity >= varMinStock),
      ProductName,
      If(sortAscending, SortOrder.Ascending, SortOrder.Descending)
  ),
  "UnitPrice",
  Sort(
      Filter(InventoryItems, Category = varCategory && StockQuantity >= varMinStock),
      UnitPrice,
      If(sortAscending, SortOrder.Ascending, SortOrder.Descending)
  ),
  "StockQuantity",
  Sort(
      Filter(InventoryItems, Category = varCategory && StockQuantity >= varMinStock),
      StockQuantity,
      If(sortAscending, SortOrder.Ascending, SortOrder.Descending)
  ),
  "LastRestocked",
  Sort(
      Filter(InventoryItems, Category = varCategory && StockQuantity >= varMinStock),
      LastRestocked,
      If(sortAscending, SortOrder.Ascending, SortOrder.Descending)
  ),
  // Default (no sort column selected) – just filtered
  Filter(InventoryItems, Category = varCategory && StockQuantity >= varMinStock)
)

Each branch repeats the same filter expression. While this makes the formula longer, it ensures that both the Filter and Sort operations remain delegable (when using SharePoint or SQL Server). The default case provides the sorted list without a sort column.

Delegation

The combination of Filter and Sort inside a Switch statement delegates with SharePoint lists as long as all column references (Category, StockQuantity, ProductName, etc.) are delegable. Avoid using non‑delegable functions like First, Last, or LookUp in the same formula. Be mindful of the default delegation limit (500–2000 items); for larger datasets, consider adding more filters or using a pre‑sorted SharePoint view.

Common Mistakes and Troubleshooting

Placing icons inside the gallery – each row would have its own sort icon, which is not the intended UX. Keep the header row outside the gallery template.
Forgetting the default case – if sortColumn is empty and no default is provided, the gallery shows no data.
Direction toggle not working – ensure the sortAscending update logic uses sortColumn <> "CurrentColumn" rather than a fixed value.
Color doesn't update – double‑check that the icon's Color property references the correct context variable and that the formula is not overridden by a static value.
Filter changes don't affect the gallery – because the filter expression is inside the Items formula, it automatically recalculates when filter variables change. If you use separate variables, make sure they are referenced inside the Items property.

Alternative Sorting Approaches

Instead of the Switch pattern, you could use SortByColumns with a dynamic column name and order string, but the Switch method is more readable and gives you an explicit case for each column, making it easier to extend (e.g., adding multiple‑column sorting). The column‑header approach is generally more intuitive than a separate dropdown for sort order.

Final Recommendation

Adding sortable column headers to a gallery is a small effort that greatly improves usability. The Switch + Filter + Sort pattern keeps your code delegation‑safe and straightforward to maintain. Start with a few columns, test with realistic data, and then extend to cover all columns your users need.

References

Original inspiration: Matthew Devaney, Power Apps Gallery Sort Controls
Microsoft Learn – Sort function delegation
Microsoft Learn – Filter function delegation