Skip to main content
Frontend Glossary

Interactions · Lists

Filter & Sort

Also called: Filtering, Sorting, Faceted filters, Filters

Filtering narrows the data down by conditions, and sorting changes the order. The two often appear together above lists and tables.

Example

In detail

Filtering answers "which ones do I want to see," for example only orders that are "In progress," or products priced $15–$75. Sorting answers "in what order," like newest first or price low to high. Both can apply at the same time. They change which data shows and how it's ordered, not the data itself.

Common UI forms: a filter bar above the list (dropdowns, tags, date ranges), clicking a column header to sort (with up/down arrows), a multi-level filter panel on the left of an e-commerce page, and a filter drawer that slides up from the bottom on mobile.

Make these points clear to AI. With little data, you can filter directly on the frontend; with lots of data, pass the conditions to the API and let the backend handle it. Filter conditions should sync to URL parameters so they survive a refresh or a shared link. Include a "Reset" button, and show an empty state when there are no results.

Developer info
Term ID
interaction-filter-sort
DOM selectors
No DOM cues. This concept isn't detected directly on a page.
Priority
1 · when several match at the same level, the higher priority wins
Version
v1 · updated Sep 29, 2026