How to show data in a table

In TeleportHQ, the Table element shows data as rows and columns, for example a list of orders or bookings, without designing cards. Add a Table from Elements → List, click Data Source at the right of the Table section in the right panel and pick a table, then click Configure next to Configure columns to choose which columns show and in what order.

Before you start#

• Connect a data source that returns a list, for example the TeleportHQ database or a Google Sheet. See What are data sources, and which ones can I connect?

Add the table and bind it#

1. On the canvas, select the container that should hold the table.
2. In the left sidebar, click Elements, and make sure the Primitives tab is open.
3. In the List group, click Table. A table with sample rows is added and selected.
4. In the right panel, find the Table section. At the right of its title, click Data Source with the plug icon (tooltip Bind Data Source). The Select Dynamic Property panel opens.
5. Click dataSources, then your data source, then the table, for example bookings. The bottom of the panel reads "Selected: Root/dataSources/…/bookings/".
6. Click Bind property. The table fills with your rows and columns, and the section's title row shows the table's name.

Choose and order the columns#

1. Next to Configure columns, click Configure. The Configure Columns window opens: "Select the columns you want to display. Drag or use arrows to reorder."
2. Untick the columns you don't want, for example id.
3. Put the columns in order: drag a column by the handle at its left, or click the up and down arrows at its right (tooltips Move up and Move down).
4. Click Apply. (Discard closes the window without changes.)

Add pagination and search to a table#

A TeleportHQ Table bound to data has the same list options as an Array Mapper, in its section below Configure columns:

• Paginated, Preview Page and Items/page split rows into pages. See How to split a long list into pages.
• Enable search and Search debounce add a search box above the table. See How to add search to a list.

Check that it worked#

The table on the canvas shows your rows, with only the columns you kept, in your order. To load rows added outside the editor since, click Refresh next to Refresh data ("Fetch fresh data from the data source").

Troubleshooting#

The table shows no rows Check that the data source table has rows, then click Refresh. If the table has search turned on, empty the search box in Preview.

New columns in my database don't show up Refresh the data source, then open Configure and tick the new column. See How to refresh, edit or remove a data source.

I see Columns and Rows instead of Configure columns The table isn't bound to a data source yet. Click Data Source at the right of the Table section's title.

Good to know#

• Table or Array Mapper? Use a Table for a quick grid of data. Use an Array Mapper when you want cards with images, your own layout, filters and sorting.
• Without a data source, you set the number of Columns by hand. Select a part of the table (its header, body or footer) to set its number of rows.
• The Structure group of Elements also has a Table + Toolbar block: a table with an actions bar above it, ready for a data page.
• To show numbers as a chart instead, see How to add charts.