Lists, filters, pagination, details pages and conditions.
In TeleportHQ you show data on a page by binding elements to it: click the plug icon next to a field in the right panel, pick a value in the Select Dynamic Property panel and click Bind property, or use an Array Mapper to repeat a design for every item in a list.
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.
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.
In TeleportHQ, you filter a list by selecting an Array Mapper or CMS list bound to data, clicking + next to Filtering in the right panel, choosing a field, an operand and a value in Filtering Options and clicking Save Changes; several filters must all match, and on database lists you can switch them to OR and group them.
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.
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.
In TeleportHQ, you design what visitors see while a list loads, when it has no items, or when a CMS list fails to load by selecting the Array Mapper, CMS list or CMS item, turning on Override State in its UI State row, picking the state and editing that version on the canvas.
In TeleportHQ, you show data as rows and columns by adding a Table from Elements → List, clicking Data Source at the right of the Table section in the right panel to pick a table, and using Configure in Configure columns to choose and order the columns.
In TeleportHQ, you add a chart by clicking a chart card in Elements → Charts, then in the right panel's Chart Settings choosing the Chart Type, typing labels and values under Data (or clicking Bind to use dynamic data), and setting the title, legend and axes under Options; charts need no web app.
In TeleportHQ, you give every item in a list its own page, like /products/blue-shirt, by opening a page's menu in Pages, Components & Tree View, turning on Is Details Page, choosing the list in Select Source, and designing the page once with elements bound to the current item.
When a headless CMS is connected to your TeleportHQ project, the Elements panel shows a CMS group with CMS list (many entries), CMS item (one entry), Rich Text (formatted content) and Mixed Type (a different component per entry type), which you bind to your CMS content types in the right panel.
In TeleportHQ, when you bind a field to a data source or to a list item, a "fallback value" box appears under the binding in the right panel; type the text to show when the data is empty or missing, such as "No description yet", and press Enter.
In TeleportHQ, you show an element only when a condition is true, such as "stock equals 0" or "the menu is open", by selecting it, turning on the Conditional Rendering switch near the top of the right panel and building the condition from a value, an operator and a comparison value; it works in every project, website or web app.
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.
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.
