Design awesome tables in Bubble.io | Tutorial

Подписаться 30 тыс.

Просмотров 32 тыс.

50% 1

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/course/beginners...
Flexcamp: Master responsive design in Bubble 🔥
👉 buildcamp.io/course/flexcamp-...
Saascamp: Build a profitable Saas business with no-code. 🔥
👉 buildcamp.io/course/saascamp-...
MarketplaceCamp: Build a 2-sided rental marketplace with no-code 🔥
👉 buildcamp.io/course/marketpla...
Learn to Bubble 👨‍🎓
👉 buildcamp.io
Join our no-code community 🧑‍🤝‍🧑
👉 community.buildcamp.io
==========
Follow Buildcamp on Twitter
🐦 / buildcamp
Follow Gregory John on Twitter
🐦 / _gregoryjohn

Опубликовано:

28 июл 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 57

@DudeFrom1972 Месяц назад

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

@fact6360 Год назад

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

@alfredoborges447 3 месяца назад

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 🙂

@romangaranin2675 Год назад

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

@Buildcamp Год назад

My pleasure!

@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

@AnthonyAllioo 9 месяцев назад

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.

@johnnyhacking1460 Год назад

Awesome, I am excited for when they add pagination!

@erickduriez631 6 месяцев назад

It's possible using custom states and WFs.

@fredcutler5032 8 месяцев назад

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 .

@gupperguppygupper Год назад

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.

@alexsandromartins 7 месяцев назад

Greate. But wihtout pagination is not completly usefull

@adityap-gn9ok 8 месяцев назад

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!

@montcoeur_duoacoustique 2 месяца назад

So good ! thanks

@chebalger74 4 месяца назад

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

@robbiesands1690 9 месяцев назад

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

@decentuser1234 Год назад

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

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

@redbot_ai 10 месяцев назад

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

@costassiavelis 9 месяцев назад

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

@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 6 месяцев назад

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

@martinjavorsky4597 6 месяцев назад

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

@mohammedammarkurabi7520 9 месяцев назад

Great effort

@kevingray673 7 месяцев назад

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 6 месяцев назад

You can sort the columns using custom states.

@datawow1996 9 месяцев назад

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)?

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

@aryabrown7904 5 месяцев назад

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

@sonjakrivokapic9568 10 месяцев назад

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!

@CrossSword 4 месяца назад

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.

@itssmezedd 10 месяцев назад

whats the background music

@adityaadhikari2780 17 дней назад

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

@TheTigerwoods1981 Год назад

Legend

@clovisabreu 4 месяца назад

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

@jackowinsagain Месяц назад

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

@kuldeepjaswal4655 3 месяца назад

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

@azmazazeri Год назад

Deleting current row item workflow doesn't work.

@ProNoobDev 5 месяцев назад

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

@MixLife96 10 месяцев назад

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

@atepatty6216 3 месяца назад

I cant see this element in my container list

@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

@niazi74 11 месяцев назад

the dropdown should be customized. bubble not allowed this.

@MoabeVettore Год назад

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

@justinheath2189 11 месяцев назад

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 11 месяцев назад

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

@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