Table element improvements: pagination, footer rows, and more

Hi everyone,

I’m Nick, a product manager here at Bubble.

I’m excited to tell you that we’ve shipped several improvements to the table element based on your feedback! Note: apps on the scheduled release tier will receive these updates tomorrow.

Here’s what’s new:

Pagination and data display

  • You can now paginate tables using the same workflow actions and data sources as repeating groups
  • You can now display lists of data via workflow action

Layout and customization

  • You can now add footer rows to your tables
  • You can now conditionally reference a row’s index or thing for more control over appearance and behavior
  • We’ve streamlined canvas interactions to make it easier to add and remove rows and columns

Under the hood

  • We’ve shipped bug fixes and stability improvements, including fixing table element width resizing and improving canvas controls and interactions

With these changes, we’re also moving the table element out of beta. We believe the latest round of updates puts the table in a stable place. That being said, we know there is a lot more this element can do and will continue investing in the element to make it even more powerful and easy to use.

As always, thanks for the continued feedback — it directly shapes what we prioritize!

— Nick

44 Likes

nice!

Awesome!

Can any wonderful community member share a reply explaining what you could do in a repeating group that you can’t do in a table, and what you can do in a table that you can’t do in a repeating group?

7 Likes

Got it — concise:

Repeating Group (RG) — what it can do that a Table can’t

  • Free layout per cell (cards, multiple buttons, badges, images, nested RG).
  • Variable row height.
  • Flexible directions/grids (vertical, horizontal, 2xN/3xN, carousel).
  • Fine-grained conditional styling on any element in the cell.
  • Complex per-item interactions (multiple workflows per row).
  • More natural infinite scroll.

Table — what it can do that an RG can’t (or does easier)

  • Native header and simpler column sorting.
  • Better pagination/virtualization for large datasets (performance).
  • Consistent fixed column widths; quick show/hide/reorder columns.
  • Spreadsheet-style reading (accessibility and keyboard navigation).

Quick rule

  • Catalog / rich UI per item → RG.
  • Admin list, lots of data, sort/paginate → Table.
7 Likes

Thank you for working on the table element. Been waiting for this for a long time. Please add the ability to export the table to csv, if possible, down the road.

3 Likes

This is possible today using the download data as CSV workflow action and Table’s list of data. Or does this have a limitation that does not work for your use case?

5 Likes

I have used this option in the past and had some issues with it although unfortunately cannot recall what they were at this time. I think it had to do with lack of flexibility on calculated columns, header names, etc.. I have been using the “1T - CSV Creator” plugin for quite some time without issue.

One that’s based on reality, not ChatGPT :smiley:

6 Likes

Got - concise and based on reality

Functionally, exactly the same as when you set a table up manually with repeating groups. Now with native sticky headers and footer. Not a bad thing.

It saves a lot of time versus using repeating groups.

1 Like

Reverse scrolling is a thing now for RG…I don’t think tables can do that

now that table is stable I’m gonna have to try it a second time

2 Likes

Table:

  • easier to handle width of columns
  • cannot have an “accordion” that opens beneath a row expanding the width of the entire table.

Is the table element actually using <table> under the hood or that weird concoction of divs?

Please continue to look at things that every app will need. Like charts, etc.

Things that 100% of AI apps would need like “format from JSON.” Practical things.

Keep up the good work.

Finally! I already have a custom RG Table. My biggest ick was FPS with + 1000 items. Just tested with the Table element. Feels smoother like React Table! GGWP!

How do I add a footer like in the screen? Is there a video tutorial?

The next important feature is Pinning Columns, like in React Table! It’s unusable when u have +8-15 columns

1 Like
3 Likes

Oh, thanks! I was totally lost on that part.

Sticky works!

demo: https://nocode-to-knowcode.bubbleapps.io/version-test
editor: Nocode-to-knowcode | Bubble Editor

4 Likes

From what I see it’s the usual Bubble Frankenstein.