The table element is a container used to display a list of items in a structured, column-based layout. Like a repeating group, it repeats its content once for each entry in a list. Unlike a repeating group, it's designed specifically for tabular data, with rows, columns, and features like sticky headers built in.

Tables are especially useful for interfaces where data is naturally organized in columns, such as user lists, product catalogs, financial reports, or admin dashboards.

Tables and repeating groups share a lot of behavior. Both are containers that display a list of items by repeating their content for each entry. The difference comes down to how the content is arranged.

Use a table when:

Use a repeating group when:

Tables are made up of two kinds of rows:

Static rows aren't tied to the data source. Elements placed inside them appear exactly once. Static rows are typically used for column headers, but they can also hold summary rows, filters, or any content that shouldn't repeat with the list.

You can add multiple static rows if needed.

Repeating rows are where the list data lives. They work the same way as a repeating group cell: the content of the first repeating row is duplicated once for each entry in the data source. You only ever edit the top repeating row, and the rest follow along automatically.

This split is what makes tables so well suited to structured data. Column headers stay put, and the data below them updates automatically as the list changes.

Static rows can also be made sticky, so they stay in view as users scroll through long lists. This is what enables the classic "sticky header" pattern common in data grids and dashboards.

When you draw a table on the page, Bubble creates one with three columns and four rows by default, with the top row set as static. From there, you build the table in a few steps.

Click the table itself, either by clicking the icon in its top-left corner or selecting it in the element tree. In the property editor, set:

Once the data source is set, the repeating rows below the static row will populate with the list.

Use the Display list in a repeating group or table action to load a list in response to a user action, such as clicking a filter or performing a search. This is useful when the data depends on something the user does.

Click into the cells of the static row to add column headers, usually as text elements. Then click into the first repeating row to add the content that will appear in each row of data. Reference the list item with Current cell's [Type]'s [field], such as Current cell's User's name.

You can add or remove columns and rows as your design evolves:

You can't delete the last remaining column, since a table must have at least one.

Repeating rows work differently: they aren't added individually. Instead, the number of rows is controlled by the data. If Set fixed number of repeating rows is checked, you specify the row count directly. If it isn't, Bubble displays as many rows as there are items in the data source.

The table element behaves a little differently from other containers, since rows, columns, and cells are all selectable pseudo-elements with their own properties. You can select elements in the element tree, or by using the methods below.

Click the icon in the top-left corner of the table to select the entire element. From here, you can set the Type of content, Data source, styling, layout, and conditions for the table as a whole. The element tree also lists the table with all its rows and columns as children.

Click a row's numbered handle to select it and manage its properties. For repeating rows, changes made to the top row apply to all rows below.

Click a column's lettered handle to select it and manage its properties. Column changes affect the entire column across both static and repeating rows.

Click directly on a cell to select it. Each cell has its own properties. Cells in static rows are edited individually, while cells in repeating rows are edited on the first row and repeat for all rows below.

Hold Shift while clicking to select multiple rows or columns at once, then apply properties to all of them at the same time. Note that not all properties can be changed in bulk.

By default, tables are oriented vertically, with rows stacked top-to-bottom. Setting the orientation to horizontal transposes rows and columns, so rows run left-to-right and columns stack vertically. This can be useful for comparison tables or layouts where categories run horizontally instead of vertically.

Tables handle responsive design a little differently from other containers. It helps to think of the table itself, and each of its rows and columns, as separate containers with their own responsive settings.

Table size is set on the table element as a whole. This defines the overall width and height, and constrains the size of the rows and columns unless the table is set to fit its content.

Column width is set at the column level. Changing a column's width affects every row in that column, both static and repeating.

Row height is set at the row level. For repeating rows, the height is controlled by the properties on the top repeating row.

Cell layout works like any other container. Each cell can use column, row, align, or fixed layout to control its child elements. Static row cells are edited individually, while repeating row cells are controlled by the top row.