Embed live data tables in Bubble

The ZenTables plugin adds a ZenTable element to your Bubble editor. Drop it on a page, paste a table ID, and your Google Sheet, Airtable base, Notion database, or REST API renders as a styled, searchable table.

No API connector setup. No Bubble data types. No workflows. Update the source and the table updates.

Before you start

You'll need a ZenTables account and at least one table. A free account works — sign up at zen-tables.com.

1. Install the plugin

In your Bubble editor, go to Plugins → Add plugins, search for ZenTables, and click Install. It's free.

2. Get your table ID

  1. Open your table in the ZenTables dashboard.
  2. Scroll to Step 4 — Embed Code.
  3. Click Generate Embed Code.
  4. Your table ID is the long string in the middle of the snippet, between /embed/ and the ?.

It looks like this:

1787686893978x201753624576786430

Copy just the ID, not the whole iframe.

3. Add the element to your page

  1. In the Bubble editor, find ZenTable in the element palette under Visual Elements.
  2. Draw it on your page at the size you want the table to appear.
  3. Paste your table ID into the Table ID field.

The element shows a grey placeholder in the Bubble editor — that's normal. It renders in Preview and on your live site.

4. Preview

Click Preview. Your table loads with live data from the source.

Element fields

Field Default What it does
Table ID — Required. From your ZenTables dashboard.
Height 600 Table height in pixels.
Show branding yes Shows or hides the "Powered by ZenTables" footer.
Show search yes Shows or hides the visitor search box.
Filter off Enables column filtering for visitors.

On plan limits

Search, filter, and branding removal are Pro features. The toggles are display preferences — whether they actually take effect is decided by ZenTables based on your plan, not by the plugin. On a Free account, turning off branding won't hide it.

Sizing

The table fills the element you draw. It won't shrink to fit a smaller container — if the element is wider or taller than the space around it, you'll get scrollbars.

Two things to get right:

  • Set Height to roughly match the pixel height of the element itself. If your element is 600px tall, leave Height at 600.
  • Inside a repeating group or a fixed-width group, size the element to fit the cell.

For responsive layouts, set the element's width to fit width to container in Bubble's responsive tab.

Multiple tables

You can put as many ZenTable elements on a page as you like. Each keeps its own table ID and settings independently.

Tables work inside repeating groups too — one table per cell, each configurable separately.

Troubleshooting

"Set a Table ID in the element properties."
The Table ID field is empty. Paste your ID from the ZenTables dashboard.

"Invalid sheet URL."
The table ID is wrong, or the table has been deleted. Check the ID against your dashboard. If the ID is right, open your connected Google Sheet and confirm sharing is set to Anyone with the link can view.

Table renders but shows "No data."
Usually a temporary problem reaching the data source. Wait a minute and reload. If it persists, open the table in your ZenTables dashboard and re-save the sheet URL to force a sync.

Scrollbars around the table.
The element is bigger than its container. See Sizing above.

Nothing renders at all.
Confirm the element is set to visible on page load, and that you're viewing Preview rather than the editor canvas — the element doesn't render in the editor.

Getting help

Questions or problems: zen-tables.com