Design awesome tables in Bubble.io | Tutorial

  Рет қаралды 36,502

Buildcamp

Buildcamp

Күн бұрын

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

Пікірлер: 59
@fact6360
@fact6360 Жыл бұрын
Just started with bubble and I needed so many tables. This is gold
@DudeFrom1972
@DudeFrom1972 4 ай бұрын
It would have been really cool if you had demonstrated how to add an option to filter columns ascending/descending.
@fredcutler5032
@fredcutler5032 11 ай бұрын
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
@adityap-gn9ok 11 ай бұрын
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
@johnnyhacking1460 Жыл бұрын
Awesome, I am excited for when they add pagination!
@erickduriez631
@erickduriez631 9 ай бұрын
It's possible using custom states and WFs.
@ptrckschnwll
@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
@Buildcamp Жыл бұрын
Absolutely. This is a first release, lots to come...
@NatePeterson-p9z
@NatePeterson-p9z Күн бұрын
Thank you!
@romangaranin2675
@romangaranin2675 Жыл бұрын
Awesome feature! I've been waiting for this for a long time! Thanks, Gregory for the review!
@Buildcamp
@Buildcamp Жыл бұрын
My pleasure!
@dariogn536
@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
@erickduriez631 9 ай бұрын
It's possible to make pagination in Table using custom states and WFs. I have it in my Tables.
@TJGhoul
@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
@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
@decentuser1234 Жыл бұрын
Is it possible to click the whole row in order to display data in a Popup?
@costsia
@costsia Жыл бұрын
Hi Greg, hope you’re well. Hey, do you have any follow up videos for this demo? Thanks
@kevingray673
@kevingray673 10 ай бұрын
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
@erickduriez631 9 ай бұрын
You can sort the columns using custom states.
@martinjavorsky4597
@martinjavorsky4597 9 ай бұрын
This is a great video! when i want to and also price value is possible after filtering sum the value?
@chebalger74
@chebalger74 7 ай бұрын
Hey G, the follow up or the previous lessons for database are on the full course ?
@kuldeepjaswal4655
@kuldeepjaswal4655 7 ай бұрын
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
@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
@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
@CrossSword 7 ай бұрын
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
@redbot_ai Жыл бұрын
Gregory John is amazing, I highly recommend his content and courses..
@alfredoborges447
@alfredoborges447 6 ай бұрын
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
@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
@robbiesands1690 Жыл бұрын
What about sorting? Would love to be able to sort my table by columns super easily
@clovisabreu
@clovisabreu 7 ай бұрын
How do you put alternating colors between the rows of the table?
@aryabrown7904
@aryabrown7904 9 ай бұрын
is there a way to show the newest created dates first?
@latifyay
@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
@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
@montcoeur_duoacoustique 5 ай бұрын
So good ! thanks
@mohammedammarkurabi7520
@mohammedammarkurabi7520 Жыл бұрын
Great effort
@adityaadhikari2780
@adityaadhikari2780 3 ай бұрын
I mean you could also show how you add the data in the data tab, cause i cannot see anything on the preview!
@ProNoobDev
@ProNoobDev 8 ай бұрын
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
@alexsandromartins 10 ай бұрын
Greate. But wihtout pagination is not completly usefull
@itssmezedd
@itssmezedd Жыл бұрын
whats the background music
@TheTigerwoods1981
@TheTigerwoods1981 Жыл бұрын
Legend
@jackowinsagain
@jackowinsagain 4 ай бұрын
instead of = i used Contains which means i didnt have to add a reset data trigger
@SantaniRana
@SantaniRana Жыл бұрын
sir make full print on demand with 3d rotsating products, with customizing blank shirt with customer design
@kipyegonkurgat5615
@kipyegonkurgat5615 Жыл бұрын
Nice product, I just checked my visual elements and can't find the table element. Kindly help.
@aireadyapps
@aireadyapps Жыл бұрын
be sure your page is on the new responsive engine and latest bubble version or at least v 22
@ntandoyenkosidlodlo7483
@ntandoyenkosidlodlo7483 Жыл бұрын
Same here. Gregory must be using a Beta version. Thanks though for the demo.
@kipyegonkurgat5615
@kipyegonkurgat5615 Жыл бұрын
@@aireadyapps Thanks will make an update
@Gerschwin
@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
@Buildcamp Жыл бұрын
Nice, yes this makes sense
@azmazazeri
@azmazazeri Жыл бұрын
Deleting current row item workflow doesn't work.
@atepatty6216
@atepatty6216 6 ай бұрын
I cant see this element in my container list
@justinheath2189
@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
@justinheath2189 Жыл бұрын
Do you know if a table allows to update all rows at once?
@MoabeVettore
@MoabeVettore Жыл бұрын
This default fixed layout is so annoying. It would be so useful if we can specify our own default layout
@niazi74
@niazi74 Жыл бұрын
the dropdown should be customized. bubble not allowed this.
@umeshjawalikar4913
@umeshjawalikar4913 4 ай бұрын
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
@umeshjawalikar4913 4 ай бұрын
pure useless explanation....we beginner come from excel ui ..... and dont understand u people
Learn Bubble.io in 30 Minutes
28:45
Jesse Showalter
Рет қаралды 107 М.
Getting Started With Bubble - Key Concepts
58:32
Bubble
Рет қаралды 173 М.
When mom gets home, but you're in rollerblades.
00:40
Daniel LaBelle
Рет қаралды 104 МЛН
Каха и лужа  #непосредственнокаха
00:15
Osman Kalyoncu Sonu Üzücü Saddest Videos Dream Engine 269 #shorts
00:26
Good database design in Bubble
21:35
Matt Neary
Рет қаралды 42 М.
Figma to Bubble, like a pro designer.
51:16
Buildcamp
Рет қаралды 51 М.
Processing data in popups | Bubble.io tutorial
18:31
Buildcamp
Рет қаралды 30 М.
Building a notifications system in Bubble io
17:26
Hustling Labs
Рет қаралды 931
How I would learn bubble (If I could start over)
10:56
The Wise Bubbler
Рет қаралды 37 М.
Custom States | Bubble.io Tutorial
23:34
Buildcamp
Рет қаралды 49 М.
If I Were Launching a Bubble App in 2024, This is What I'd Do
11:44
Coaching No Code Apps
Рет қаралды 25 М.
How to create beautiful Tables in Bubble.io
26:38
Fabio Bergmann
Рет қаралды 6 М.
Create and save list selections | Bubble.io Tutorial
19:31
Buildcamp
Рет қаралды 73 М.
I Wouldn't Use Bubble To Build a No Code SaaS...Here's Why
6:10
Adrian Ching
Рет қаралды 125 М.
When mom gets home, but you're in rollerblades.
00:40
Daniel LaBelle
Рет қаралды 104 МЛН