Table element (web)

This section covers the table element, used to display lists of things such as records from the database in a table-like structure of rows and columns

The Table element requires:

• that you are using Bubble version 21+

• that the page is set to use the responsive engine

To show a list of things, you can also use the repeating group element. You can read more about the repeating group element and how it's different from a table element in the article below:

Article: Repeating groups Article section: The difference between repeating groups and tables

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.

Using the table element, you can set up lists in a structured, column-like layout.

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

When to use a table vs. a repeating group

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:

• The data has a clear column structure.

• You want column headers that stay in place as users scroll.

• You need to keep row content aligned across columns automatically.

• The layout is closer to a spreadsheet or data grid than a card feed.

Use a repeating group when:

• The design is flexible and doesn't fit neatly into rows and columns.

• Cards, masonry grids, or media-rich lists suit your content better.

• You want more freedom over how each cell is laid out.

Static and repeating rows

Tables are made up of two kinds of rows:

Static 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.

Static rows are useful for non-dynamic content, such as column headers.

You can add multiple static rows if needed.

Repeating rows

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.

The repeating row is displayed in the editor with a ∞ symbol. Its content is duplicated for each entry in the table's data source.

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.

With the Make sticky property, the table's column headers stay in view while the user scrolls.

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.

Building a table

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.

Load the data

Tables require a list as their data source, unlike most other containers, which work with a single item.

Set the data source directly

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:

• Type of content: the data type the table will hold, such as User or Post.

• Data source: the expression that returns the list, such as Do a search for Users.

The Do a search for data source populates the table with a list of users.

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

Push data with a workflow

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.

Add content to the rows

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.

Add columns and rows

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

• Add a column by right-clicking a column and selecting Add column to left or Add column to right, or by hovering between two columns and clicking the plus icon that appears.

• Add a static row by right-clicking an existing row and selecting Add row above or Add row below.

• Remove a column by right-clicking it and selecting Delete, or by clicking the X above its column handle.

• Remove a row by right-clicking it and selecting Delete.

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.

Working with rows, columns, and cells

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.

The whole table

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.

Clicking the handle in the top-left corner selects the entire table and opens its properties in the property editor.

Rows

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.

Clicking a row's numbered handle selects it and opens its properties in the property editor.

Columns

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.

Clicking a column's numbered handle selects it and opens its properties in the property editor.

Cells

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.

Clicking an individual cell selects it and opens its properties in the property editor.

Selecting multiple rows or columns

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.

Orientation

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.

Setting the orientation to horizontal transposes rows and columns.

Responsive behavior

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.

FAQ: Table element

Can I sort or filter the items in a table?

Yes. When using Do a search for as the data source, you can add constraints and sorting rules directly in the search, or chain operators like :sorted by and :filtered to control the order and contents of the list.

Can I have multiple static rows?

Yes. You can add multiple static rows.

Can static rows be sticky when scrolling?

Yes. Static rows can be set to remain in view as users scroll through the list below, which is useful for keeping column headers visible in long tables.

How do I reference the item in a row?

Use the Current cell expression, just like in a repeating group. If the Type of content is Post, Current cell's Post's title references the title of the post in that row.

Can I make rows or cells clickable?

A static or repeated row can be set to clickable by using the An element is clicked action.

Columns and cells aren't clickable directly, but you can add a workflow triggered by a click on any child element. Reference Current cell's [Type] inside the workflow to act on that specific item.

How do I paginate a table?

Set the number of rows to Fixed and combine it with actions like Show next page, Show previous page, and Go to page on the table.

What happens if the data source is empty?

The repeating rows disappear, leaving only the static rows visible. You can add a conditional to display a placeholder message in the table when the list is empty.

Can I nest tables inside other tables?

It's possible but not recommended. Nested lists come with a performance cost, since each parent row runs its own query for the nested content.

Are tables available in native mobile apps?

No. The table element is web-only.

Can I export the data in a table?

The table itself doesn't include built-in export functionality, but the Download data as CSV action can export the data behind it. Use this to give users an export button that pulls from the same data source as the table.

Other ways to learn

Core reference: Table element properties

In the core reference section, you'll find all the settings associated with table elements.

Reference: Table elements