Showing data on your pages

How to filter a list

September 15, 2026
How to filter a list

In TeleportHQ, you filter a list so it shows only matching items, for example only cakes, or only products under 20. Select the list (an Array Mapper or a CMS list), click + next to Filtering in the right panel, choose a field, an operand such as = or < and a value, then click Save Changes. When a list has several filters, all of them must match; on lists from a database you can switch them to OR and put them in groups.

Before you start

  • The list must be bound to a data source or a headless CMS. See How to show a list of items.
  • Filtering only lists fields that hold text, numbers or true/false values.

Add a filter

  1. Select the list: in the layers tree, click its row, for example Products List. The right panel shows Array Mapper Settings.

  2. Scroll to Filtering and click the + at its right. The Filtering Options panel opens beside the right panel.

    The Filtering row of a list in the TeleportHQ right panel, with its + button highlighted
  3. In Select attribute, choose the field to filter on, for example category.
  4. Next to Operand:, choose how to compare, for example =. The operands are listed below.
  5. In Value, type the value, for example cakes.
  6. Click Save Changes.

The filter shows under Filtering as a line like category = cakes, and the canvas shows only matching items.

The TeleportHQ Filtering Options panel, with 1 Select attribute, 2 the Operand list, 3 the Value box and 4 Save Changes numbered
  1. Select attribute: the field the filter checks.
  2. Operand: how to compare.
  3. Value: what to compare with.
  4. Save Changes: adds the filter.

Operands

OperandShows items whose field…
= / ≠equals / doesn't equal the value
> < >= <=is greater or smaller than the value
is null / is not nullis empty / has a value. No value to type.
has anyis a list (for example a product's categories) that shares at least one value with yours
is any ofequals any of several values, typed with commas, for example cakes, bread

A true/false field only offers =. Point at the info icon to read "The selected attribute only supports the = operation."

The Operand list in the TeleportHQ Filtering Options panel, open

Combine filters with AND or OR

When a TeleportHQ list has several filters, an AND label sits between them: an item must match all of them. On a list from a database (the TeleportHQ database, Supabase, PostgreSQL, MySQL and the other databases), you can change that:

  1. Click the AND label between two filters. It changes to OR: an item that matches any of the filters shows. Click it again to go back to AND.
  2. To mix both, tick the box in front of two or more filters, then click Group selected (2). The filters move into a box marked Group, which uses the opposite word, for example OR inside an AND list. So "price < 20 AND (category = cakes OR category = bread)" is one filter plus a group of two.
  3. To break a group apart, click Ungroup in its header. To delete a filter or a whole group, click the × at its right.
Two filters ticked in a TeleportHQ list's Filtering section, with the AND label between them and the Group selected (2) button

Lists from a REST API, a Google Sheet, a CSV file or a headless CMS show their filters as a simple list: every filter must match.

Let visitors change the filter

The value of a TeleportHQ filter can come from something visitors change. In Filtering Options, click the plug icon next to Value and pick:

  • a state, for example selectedCategory, that buttons or a dropdown change. See How to store and use values with States.
  • a URL Param, so /products?category=cakes shows cakes. The page must declare the parameter first: on the page, click Page settings above the canvas, open the SEO tab and add it under Page Params. Page Params are available in web apps.
  • a prop (a component setting), when the list is inside a component.

When the bound value is empty, TeleportHQ skips that filter, so an "All" button can set the state to an empty text to show every item.

Check that it worked

The canvas shows only the items that match. Click Preview in the bottom toolbar to try filters that visitors change, then publish and check your live site.

Troubleshooting

The field I want isn't in Select attribute Only text, number and true/false fields appear. If you added the field recently, refresh the data source. See How to refresh, edit or remove a data source.

There's no + next to Filtering The list isn't bound to a data source, or its source has no field that can be filtered. On a CMS list, "Pagination, filtering and sorting are disabled for single types".

I can't group filters or switch to OR Groups and OR are only offered for lists from a database. Lists from a REST API, a Google Sheet, a CSV file or a CMS always need every filter to match.

A filter works in the editor but not on my live site First publish again: filter changes only reach the live site when you publish. If it still differs, check these known differences:

  • On a list with Paginated or Enable search turned on, the published site doesn't apply is null and is not null filters the way the editor does. On other lists they work on the live site too.
  • has any is only reliable on lists from the TeleportHQ database or PostgreSQL, and is any of doesn't work on lists from Supabase, a REST API, a Google Sheet, a CSV file or JavaScript.

Contact support at hello@teleporthq.io with the page link if one of these affects you.

Good to know

  • Filters, sorting, search and pagination work together: visitors search within the filtered list, in your chosen order, page by page.
  • On a headless CMS from WordPress, a filter has no operand: the value box reads Equals To.
Share

Related Articles

How to show a list of items (List / Array Mapper)

In TeleportHQ, you show a list of items, such as products from a database, by adding an Array Mapper from Elements → List, binding its Source to a data source table in Array Mapper Settings, and designing one card inside it that repeats for every item.

How to sort a list

In TeleportHQ, you sort a list by selecting an Array Mapper bound to data and either typing a field name in Sort by with asc or desc in Sort direction, or clicking + next to Sorting to add rules with Ascending or Descending; whichever you set last is the one the list uses.

How to add search to a list

In TeleportHQ, you add a search box to a list by selecting an Array Mapper or Table bound to a data source and ticking Enable search; TeleportHQ adds a search input that filters the list by its text fields, in Preview and on your published site.

How to store and use values with States

In TeleportHQ, a state is a named value, like isMenuOpen or activeTab, that elements can read and clicks can change; you create one for a page or component from the Page settings or Component settings button above the canvas, in the State tab, and it works in every project, website or web app; global states live in Project settings and need a web app.

Why does my data look different in the editor and on my live site?

In TeleportHQ, the editor and your published site load data separately: design and filter changes need a publish, cached lists and cached REST API responses can show older content for a while, CMS pages refresh on their own schedule, and data changed outside TeleportHQ needs a Refresh in the editor.

How to split a long list into pages

In TeleportHQ, you paginate a list by selecting an Array Mapper, Table or CMS List bound to data, ticking Paginated and setting Items/page; you can choose Previous / Next buttons or numbered pages, load more items as visitors scroll, or add a Load more button.