Design awesome tables in Bubble.io | Tutorial

In this video, we're diving into Bubble's newest feature, the powerful and convenient table element. If you've ever struggled to build tables in a repeating group, this new element will make your life much easier!
In this release, Bubble introduces its first version of the table element, which comes with a few limitations that we'll discuss. However, we're confident that Bubble will continuously improve and add more features in the future.
In this video, we'll walk you through how to create a dynamic layout using the table element. You'll see how to set up columns, rows, and customize the content in each cell. The table element even allows you to specify the layout type for each column and row individually, making it incredibly flexible.
We'll cover topics like sticky headers, scrolling, search functionality, and data manipulation using states and pop-ups. Additionally, we'll explore some responsive design options, although currently, collapsing the horizontal space is a bit tricky.
Overall, we're really excited about the potential of this new table element in Bubble.
==========
👨‍🏫 Courses
BeginnersCamp: A comprehensive introduction to Bubble 🔥
👉 buildcamp.io/c...
Flexcamp: Master responsive design in Bubble 🔥
👉 buildcamp.io/c...
Saascamp: Build a profitable Saas business with no-code. 🔥
👉 buildcamp.io/c...
MarketplaceCamp: Build a 2-sided rental marketplace with no-code 🔥
👉 buildcamp.io/c...
Learn to Bubble 👨‍🎓
👉 buildcamp.io
Join our no-code community 🧑‍🤝‍🧑
👉 community.buil...
==========
Follow Buildcamp on Twitter
🐦 / buildcamp
Follow Gregory John on Twitter
🐦 / _gregoryjohn

[@fact6360]

Just started with bubble and I needed so many tables. This is gold

[@DudeFrom1972]

It would have been really cool if you had demonstrated how to add an option to filter columns ascending/descending.

[@fredcutler5032]

Thanks so much. Great. One thing is out of date, though, and you might just do a subtitle to indicate it. It's that you can now copy a column and paste it, so you don't need to do all that re-doing of pasting text and adjusting padding .

[@adityap-gn9ok]

This is very helpful Greg! Is there a way to make the table elements responsive? Or make it fixed width with horizontal scrolling? Thanks in advance!

[@johnnyhacking1460]

Awesome, I am excited for when they add pagination!

[@erickduriez631]

It's possible using custom states and WFs.

[@ptrckschnwll]

Nice table.. but they still need to add some functionality.. Sort AZ or Sort ZA per column.. Search anyfield partially.. Dynamic amount of rows visible.. with a drop-down.. I noticed as well on mobile, there is always a horizontal scrollbar at the bottom.. even though everything fits inside screen.. But still! Lots of possibilities for the near future.

[@Buildcamp]

Absolutely. This is a first release, lots to come...

[@NatePeterson-p9z]

Thank you!

[@romangaranin2675]

Awesome feature! I've been waiting for this for a long time! Thanks, Gregory for the review!

[@Buildcamp]

My pleasure!

[@dariogn536]

I'm agree, it is good new element that will improve design. However Pagination is necessary in order to start using this table element as repeating groups where you have big list of "things"

[@erickduriez631]

It's possible to make pagination in Table using custom states and WFs. I have it in my Tables.

[@TJGhoul]

Is it possible to populate dropdown menus with content from the table? Also, how can a user edit a row's data?

[@Igor-sw6mv]

Nice, one more limitation I noticed is that I cannot get the list from the table (Data source) to use in other elements

[@decentuser1234]

Is it possible to click the whole row in order to display data in a Popup?

[@costsia]

Hi Greg, hope you’re well. Hey, do you have any follow up videos for this demo? Thanks

[@kevingray673]

Thank you for this video as the Table element is new and this gives me the basics to get started with it. I was using a repeating group element but this seems way easier and I know that it will get better once some of the limitations are addressed. I wonder when 'sorting' columns will be available?

[@erickduriez631]

You can sort the columns using custom states.

[@martinjavorsky4597]

This is a great video! when i want to and also price value is possible after filtering sum the value?

[@chebalger74]

Hey G, the follow up or the previous lessons for database are on the full course ?

[@kuldeepjaswal4655]

what is "Card Large" in it? please explain that as well...how you are adding that elements and purpose to use it...please explain..thanks

[@sonjakrivokapic9568]

Hey Gregory, would it be possible to make a stock market MVP app within using table instead of repeating group like you have done in your video 1 year go? Tnx for your answer!

[@AnthonyAllioo]

I’m new to bubble, coming from wix and I’m happy there is a tables element, kind of was thrown off with some of the things that aren’t native like a tabs element. It looks like there was one but not anymore? And for horizontal use case, I’m def using a horizontal table to compare submissions.

[@CrossSword]

Thanks for the great video, do you know how to hide a column if there is no data? The issue wit row A0 is that the column always sees something in the column if you put a title in there and so its not possible to hide the column if it is empty as its never empty.

[@redbot_ai]

Gregory John is amazing, I highly recommend his content and courses..

[@alfredoborges447]

Thank you Gregory, it's very educational and very very useful, but please don't put music in your videos. If anyone wants background music they can add it individually 🙂

[@GupStar]

This is very helpfull. I would love to have a second row configuration, so that i am able to show them in alternating order with the possibility to close or expand that second row.

[@robbiesands1690]

What about sorting? Would love to be able to sort my table by columns super easily

[@clovisabreu]

How do you put alternating colors between the rows of the table?

[@aryabrown7904]

is there a way to show the newest created dates first?

[@latifyay]

Hey there! So yesterday i created a lovely table element displaying information about a data field. I got it looking nice and fancy but i ran into an issue. i added a row on the end of the table, inserted an rubbish can icon in order to delete the rows data field from the database, created a workflow to delete the current rows data field. however, ran into an issue, the icon delete the row successfully, howver once you refresh the page, the current row returns to the table, its only temporarily deleted and not deleted from the database itself.

[@datawow1996]

Thanks for an amazing video. Do you know how to send the contents of table with API call like we do with repeating groups (e.g. Repeating Group's List of Items)?

[@montcoeur_duoacoustique]

So good ! thanks

[@mohammedammarkurabi7520]

Great effort

[@adityaadhikari2780]

I mean you could also show how you add the data in the data tab, cause i cannot see anything on the preview!

[@ProNoobDev]

For anyone using airtable as their backend and getting an error or data is shown then suddenly vanishes , just add a delay on page load and everything will be fine

[@alexsandromartins]

Greate. But wihtout pagination is not completly usefull

[@itssmezedd]

whats the background music

[@TheTigerwoods1981]

Legend

[@jackowinsagain]

instead of = i used Contains which means i didnt have to add a reset data trigger

[@SantaniRana]

sir make full print on demand with 3d rotsating products, with customizing blank shirt with customer design

[@kipyegonkurgat5615]

Nice product, I just checked my visual elements and can't find the table element. Kindly help.

[@aireadyapps]

be sure your page is on the new responsive engine and latest bubble version or at least v 22

[@ntandoyenkosidlodlo7483]

Same here. Gregory must be using a Beta version. Thanks though for the demo.

[@kipyegonkurgat5615]

@@aireadyapps Thanks will make an update

[@Gerschwin]

Hi Greg. Thanks for the video. Table direction horizontal could work for budget. I have a table for budget data containing months (option set), Account (option set), Amount. Looks like it works well.

[@Buildcamp]

Nice, yes this makes sense

[@azmazazeri]

Deleting current row item workflow doesn't work.

[@atepatty6216]

I cant see this element in my container list

[@justinheath2189]

I'm not sure what all the fuss is about. Repeating groups pretty much allowed all this to be done without too much hassle? 🤔 lol What I really want is to be able to update or create all the rows or repeating group in one click and could never work it out. Like for a rota, I wanted to be able to create a rota by having drop downs for a everyday of the year with a rota pattern over a 2 week period. I managed to do this and then populate the whole year with the rota. Each day with a drop down ... in, day off etc. Then Amy holiday could be entered before clicking a button that would the enter a row in a table for each day with the staff name and rota option. I managed it only by writing a separate workflow for each day of the year. Took me ages then I had to make a change so gave up lol

[@justinheath2189]

Do you know if a table allows to update all rows at once?

[@MoabeVettore]

This default fixed layout is so annoying. It would be so useful if we can specify our own default layout

[@niazi74]

the dropdown should be customized. bubble not allowed this.

[@umeshjawalikar4913]

please ,,,,while explaining . take a deep breath after every sentence,,move your? cursor slowly. as i think you are not showing your experties to people but ,, you are trying to explain them at their pase......ARE YOU GETTING ME?

[@umeshjawalikar4913]

pure useless explanation....we beginner come from excel ui ..... and dont understand u people