- 23
- 115 877
Thilak S
Malaysia
Приєднався 14 жов 2020
Integration & automation
How to create a Responsive Table in Bubble.io
🚀 Book your FREE Consultation to Kickstart your startup Idea 🚀
superpeer.com/thilak
🔋⚡ Supercharge Your Startup With No-code Tools
1. Webflow → (webflow.partnerlinks.io/thilaks)
2. Glide → (join.glideapps.com/n6ombgwgz4oz)
3. Bubble → (www.bubble.io)
Welcome to this latest tutorial on Bubble.io! In this video, I'll guide you through the process of creating a fully responsive table for your web applications. Whether you're a beginner or an experienced Bubble user, this step-by-step guide will help you design tables that look great on any device.
Template: bubble.io/template/admin-dashboard-1711506644806x533286574970109950
In this tutorial, you'll learn:
- How to set up a new Bubble.io project and navigate the interface
- Techniques to create and customize tables using Bubble.io's elements
- Strategies to ensure your tables are responsive across different screen sizes
- Tips and tricks for optimizing table design and performance
- Best practices for handling dynamic data within your tables
By the end of this video, you'll have a solid understanding of how to build responsive tables that enhance the user experience of your Bubble.io applications. Don't forget to like, comment, and subscribe for more tutorials on Bubble.io and other web development tools!
🕒 Timestamps
0:00 Intro
0:55 Free Consultation
1:35 Background configuration
3:00 Add table component
7:19 Table header column
11:04 Table repeating rows
23:39 Outro
🚨 Important Notes:
- Make sure to follow along step-by-step for a seamless learning experience.
- Feel free to pause, rewind, and replay any sections to reinforce your understanding.
- If you encounter any issues or have questions, drop them in the comments section, and we'll be happy to help!
👍 If you found this tutorial helpful, don't forget to like, share, and subscribe for more Bubble.io tutorials!
🔔 Stay updated with our latest tutorials by turning on notifications. Happy coding! 🚀
Tags
#BubbleIO #NoCode #responsivetable #Tutorial #webdevelopment #webflow #glideapps #
Keywords
no code, no code app builder, low code no code, bubble no code, no code platform, no code platforms, no code pearl jam, no code website builder, low code no code platforms, no code tools, no code low code, best no code app builder, no code app, no code apps, no code games, no code development, what is no code, no code mobile app builder, no code developer, no code web app builder, low code vs no code, no code ai, no code software, no code development platforms, no code app development, free no code app builder, app builder no code, no code development platform, what is low code no code, low code versus no code, no code mobile app builders, no code database, glide no code, no code vs low code, no code dev platform, no code automation, no code low code platforms, no code solutions, no code saas, no code databases, we love no code, no code ios app builder, best no code platforms, best no code website builder, no code solution, best no code tools, check engine light no code, no code movement, application, no code web app, no code programming, no code websites, no code game engine, no code developers, check engine light but no code, no code mobile app, best no code platform, no code website, no code agency, no code app builders, no code api, best website builder no code, no code machine learning, no code app builder free, mobile app no code, parcel pending no code, no code marketplace, no code builder, open source no code platform, no code software development, no code pwa builder, no code companies, no code web, no code needed, no code app building, build app no code, best no code tool, low code no code platform companies, no code app development platforms, no code ml, no code jobs, no code software builder, low code no code tools, what does no code mean, no code company, best low code no code platforms, no code chatbot, no code automation tools, best no code mobile app builder, no code technology, best no code web app builder, startup, startup jobs, lean startup, startup company, startup funding, how to stop apps from opening on startup, startup show, the lean startup, how to stop discord from opening on startup, grants for small business startup, startup business ideas, startup companies, what is a startup, startup business, mac startup programs, startup apps mac, startup weekend, startup loans, mac startup apps, startup cast, startup ideas, unicorn startup, business startup ideas, tech startup, startup news, startup investing, startup capital, startup accelerator, startup business plan template, startup business funding, white smoke from exhaust on startup, small business startup grants, startup incubator, startup name generator, stealth mode startup, startup show app, business startup, work at a startup, best startup business, startup programs, startup definition, the startup, tech startup ideas, startup series
superpeer.com/thilak
🔋⚡ Supercharge Your Startup With No-code Tools
1. Webflow → (webflow.partnerlinks.io/thilaks)
2. Glide → (join.glideapps.com/n6ombgwgz4oz)
3. Bubble → (www.bubble.io)
Welcome to this latest tutorial on Bubble.io! In this video, I'll guide you through the process of creating a fully responsive table for your web applications. Whether you're a beginner or an experienced Bubble user, this step-by-step guide will help you design tables that look great on any device.
Template: bubble.io/template/admin-dashboard-1711506644806x533286574970109950
In this tutorial, you'll learn:
- How to set up a new Bubble.io project and navigate the interface
- Techniques to create and customize tables using Bubble.io's elements
- Strategies to ensure your tables are responsive across different screen sizes
- Tips and tricks for optimizing table design and performance
- Best practices for handling dynamic data within your tables
By the end of this video, you'll have a solid understanding of how to build responsive tables that enhance the user experience of your Bubble.io applications. Don't forget to like, comment, and subscribe for more tutorials on Bubble.io and other web development tools!
🕒 Timestamps
0:00 Intro
0:55 Free Consultation
1:35 Background configuration
3:00 Add table component
7:19 Table header column
11:04 Table repeating rows
23:39 Outro
🚨 Important Notes:
- Make sure to follow along step-by-step for a seamless learning experience.
- Feel free to pause, rewind, and replay any sections to reinforce your understanding.
- If you encounter any issues or have questions, drop them in the comments section, and we'll be happy to help!
👍 If you found this tutorial helpful, don't forget to like, share, and subscribe for more Bubble.io tutorials!
🔔 Stay updated with our latest tutorials by turning on notifications. Happy coding! 🚀
Tags
#BubbleIO #NoCode #responsivetable #Tutorial #webdevelopment #webflow #glideapps #
Keywords
no code, no code app builder, low code no code, bubble no code, no code platform, no code platforms, no code pearl jam, no code website builder, low code no code platforms, no code tools, no code low code, best no code app builder, no code app, no code apps, no code games, no code development, what is no code, no code mobile app builder, no code developer, no code web app builder, low code vs no code, no code ai, no code software, no code development platforms, no code app development, free no code app builder, app builder no code, no code development platform, what is low code no code, low code versus no code, no code mobile app builders, no code database, glide no code, no code vs low code, no code dev platform, no code automation, no code low code platforms, no code solutions, no code saas, no code databases, we love no code, no code ios app builder, best no code platforms, best no code website builder, no code solution, best no code tools, check engine light no code, no code movement, application, no code web app, no code programming, no code websites, no code game engine, no code developers, check engine light but no code, no code mobile app, best no code platform, no code website, no code agency, no code app builders, no code api, best website builder no code, no code machine learning, no code app builder free, mobile app no code, parcel pending no code, no code marketplace, no code builder, open source no code platform, no code software development, no code pwa builder, no code companies, no code web, no code needed, no code app building, build app no code, best no code tool, low code no code platform companies, no code app development platforms, no code ml, no code jobs, no code software builder, low code no code tools, what does no code mean, no code company, best low code no code platforms, no code chatbot, no code automation tools, best no code mobile app builder, no code technology, best no code web app builder, startup, startup jobs, lean startup, startup company, startup funding, how to stop apps from opening on startup, startup show, the lean startup, how to stop discord from opening on startup, grants for small business startup, startup business ideas, startup companies, what is a startup, startup business, mac startup programs, startup apps mac, startup weekend, startup loans, mac startup apps, startup cast, startup ideas, unicorn startup, business startup ideas, tech startup, startup news, startup investing, startup capital, startup accelerator, startup business plan template, startup business funding, white smoke from exhaust on startup, small business startup grants, startup incubator, startup name generator, stealth mode startup, startup show app, business startup, work at a startup, best startup business, startup programs, startup definition, the startup, tech startup ideas, startup series
Переглядів: 606
Відео
How to use Custom States in Bubble.io
Переглядів 7237 місяців тому
🚀 Book your FREE Consultation to Kickstart your startup Idea 🚀 superpeer.com/thilak 🔋⚡ Supercharge Your Startup With No-code Tools 1. Webflow → (webflow.partnerlinks.io/thilaks) 2. Glide → (join.glideapps.com/n6ombgwgz4oz) 3. Bubble → (www.bubble.io) 🔧 Learn How to use Custom States in Bubble.io: Step-by-Step Tutorial! In this comprehensive tutorial, I'll guide you through on how to use Custom ...
How to create Multi Image Uploader in Bubble.io
Переглядів 4,2 тис.8 місяців тому
🚀 Book your FREE Consultation to Kickstart your startup Idea 🚀 superpeer.com/thilak 🔋⚡ Supercharge Your Startup With No-code Tools 1. Webflow → (webflow.partnerlinks.io/thilaks) 2. Glide → (join.glideapps.com/n6ombgwgz4oz) 3. Bubble → (www.bubble.io) 🔧 Learn How to Create a Multi-Image Uploader in Bubble.io : Step-by-Step Tutorial! In this comprehensive tutorial, I'll guide you through the proc...
How to create a Repeating Group in Bubble.io
Переглядів 3,1 тис.Рік тому
🚀 Book your FREE Consultation with Me to Kickstart Your Startup Idea 🚀 superpeer.com/thilak 🔋⚡ Supercharge Your Startup With No-code Tools 1. Webflow → (webflow.partnerlinks.io/thilaks) 2. Glide → (join.glideapps.com/n6ombgwgz4oz) 3. Bubble → (www.bubble.io) Hey everyone, this video is about how to create a Repeating Group in Bubble.io. 💌 Contact Me Email: thilak7c@gmail.com Show support! PayP...
Webflow E-commerce Part 8 | Launching the site
Переглядів 1 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 7 | Setting Up Email Templates
Переглядів 1 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 6 | Product Variants
Переглядів 2,6 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 5 | Cart
Переглядів 1,2 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 4 | Add To Cart Button
Переглядів 2,2 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 3 | Product Page
Переглядів 2,3 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 2 | Add Products
Переглядів 3,2 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
Webflow E-commerce Part 1 | Course Overview
Переглядів 4,1 тис.Рік тому
I recently completed my first e-commerce website in Webflow! It was a very interesting process and I learned quite a bit. There are many great things about what Webflow offers but there are also a few limitations that you may want to know about before you decide to build an e-commerce website here yourself. Let me know in the comments if you’ve discovered some other useful or frustrating aspect...
How to create a Multi-Step Form in Bubble.io (Part2)
Переглядів 5 тис.2 роки тому
🚀 Book your FREE Consultation to Kickstart your startup Idea 🚀 superpeer.com/thilak Hey everyone, this video is about how to create a Multi-Step Form in Bubble.io. Part 1 ua-cam.com/video/6JgxLHIFi98/v-deo.html Template that I used: bubble.io/template/multi-step-form-1711715595699x279867105169113100 Example: multi-step-form-004084.bubbleapps.io/version-test/multi-step-form 💌 Contact Me Email: t...
How to create a Login/Signup Form in Bubble.io
Переглядів 23 тис.2 роки тому
🚀 Book your FREE Consultation with Me to Kickstart Your Startup Idea 🚀 superpeer.com/thilak 🔋⚡ Supercharge Your Startup With No-code Tools 1. Webflow → (webflow.partnerlinks.io/thilaks) 2. Glide → (join.glideapps.com/n6ombgwgz4oz) 3. Bubble → (www.bubble.io) Hey everyone, this video is about how to create a Login/Signup Form in Bubble.io. (User authentication in Bubble) 💌 Contact Me Email: thil...
How to create a Multi-Step Form in Bubble.io (Part1)
Переглядів 41 тис.2 роки тому
Hey everyone, this video is about how to create a Multi-Step Form in Bubble.io. Part 2 ua-cam.com/video/Ji8l3nEgn9U/v-deo.html 🚀 Book your FREE Consultation with Me to Kickstart Your Startup Idea 🚀 superpeer.com/thilak 🔋⚡ Supercharge Your Startup With No-code Tools 1. Webflow → (webflow.partnerlinks.io/thilaks) 2. Glide → (join.glideapps.com/n6ombgwgz4oz) 3. Bubble → (www.bubble.io) Template th...
How to create a responsive image slider in HTML (Slick.js)
Переглядів 6762 роки тому
How to create a responsive image slider in HTML (Slick.js)
How to send custom data to Intercom via Api using nodejs.
Переглядів 1,5 тис.2 роки тому
How to send custom data to Intercom via Api using nodejs.
How to fetch api and display it in bubble.io repeating group (Part 2)
Переглядів 3,2 тис.2 роки тому
How to fetch api and display it in bubble.io repeating group (Part 2)
How to fetch api and display it in bubble.io repeating group (Part 1)
Переглядів 1,5 тис.2 роки тому
How to fetch api and display it in bubble.io repeating group (Part 1)
How to send data from a repeating group to another page in Bubble.io
Переглядів 11 тис.2 роки тому
How to send data from a repeating group to another page in Bubble.io
How to send HTML bulk emails in Google Sheets as a scheduled trigger
Переглядів 4602 роки тому
How to send HTML bulk emails in Google Sheets as a scheduled trigger
How to send bulk HTML emails in Google Sheets
Переглядів 1,1 тис.2 роки тому
How to send bulk HTML emails in Google Sheets
How to send bulk emails in Google Sheets
Переглядів 782 роки тому
How to send bulk emails in Google Sheets
thank you brother 💗
You are the best human on this planet love your work ! You helped me a lot ! And great accent keep it I love India and its people soo much!❤️
Hey Thilak. My table won't show up a scroll bar, any ideas?
Thank you so much for showing clear example of database and reflective repeating group !!
hey i need some help
hey i need some help
Thank you for this video
My pleasure
can we upload files using this plugin?
when I run this once and it uploads the images in the database by clicking a send button, the plugin is not clickable anymore. I need to reload the page to re-activate the plugin. Do you know how to fix that so everything I click send in the database, the multi image uploader resets ?
what is the use case here? was there a reason you explored this functionality
do you know to make each image clickable in repeating group
Thanks easy to follow along❤
You’re welcome 😊
Can you show how to make a blocking system for a messaging app you know like what facebook and whatsapp have on their message systems ?
Thankyou so much for this video☺
My pleasure 😊
Hi! How can I add a limit to the number of image uploads?
My first time using Webflow for a project... and the interface has changed so much already from these instructional videos even on their own site, it's hard to find things. I mean, why would they take a perfectly recognizable shopping cart icon and replace it with a stick-like scribble. I guess it's a shopping bag but the top handles aren't connected so it could be anything. This is very helpful still. I just want to add a product to a page. Actually I really just want to click a "buy now" button and go to checkout. Is this even possible? Been searching endlessly. I guess products can only be added to a product template page. As a web developer with over 20 years experience, webflow feels like I lost my legs and am learning to walk again. Probably best used if you've never built a website in your life. Thankful for individuals such as yourself to go out of your way to explain these concepts!
Hi! How can I put now these images into the current user's database?
You can add the workflow to save the images into db, you need to create an attribute to store the images in any tables
@@thilaks How to do this? Can you provide steps or a video for this?
Thilak i have a problem , iam trying to send a list of data from one repeating group to another page, i do the right declaration to one key url. When atribute the key for one element like a list of users the content still imput. I dont know why...
Hi Arthur, can you check by sending a sample data to the page first, and then see if you're able to be received from the other page.
I'm happy you are showing how to do the active navigation. So many tutorials about Bubble sneakily go around the active states, jumping to workflows...
Appreciate it!
unsure why, but I am unable to input a number after 'customstate is'
hi, could elaborate it, thanks.
used a yes/no workflow instead! but thanks for the upload... can see it worked for a lot of other people@@thilaks
Great explanation. Keep up the great work!
Thanks, will do!
Just built this following along, thanks!
Nice work, thanks.
This is very helpful.. Thank you :)
Glad it was helpful, thanks!
It works! I followed along and built it! First Bubble that works! Thanks Thilak. Looking forward to the next Bubble video. Enjoy the coffee!
Thanks for your support Keith, I really appreciate it. Let me know if you need to any other help in bubble, thanks.
when i was using bubble no video expect bubble 3hour video there. thank god now there are more videos about bubble.
your videos are awesome
Glad you like them!
Yo he trabajado wordpress ydesde hace años .. y es verdad lo que dice .. mi tienda online la estoy moviendo a webflow
How do you select multi and move together like you did on form one? at 6:29
Select both the elements CTRL + click, and then move them
Hi, kindly say how to change the currency to rupee from dollar
Thank you!
You're welcome!
Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Show me how to do a blocking function for a message service. Like you have in whatsapp and on facebook and all other apps with a messaging system. I have spent ages trying to work this out. I have messaged loads of people asking for them to show this. There is nothing on youtube and there is nothing on google and nothing in the forums that makes any sense. This is a vital component and no one can show anyone how to do it. Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Please Can you be the only person on the planet to do this Please !!!
Is there a way to save the form so the data creates a pdf that can be downloaded?
You use external plugin to generate pdf.
Do I have to pay a monthly fee for having e-commerce?
I’m going to try this! Thank you
Thank you very much my friend, you helped me a lot, success and peace!
Awesome!
when you are in form 2 and click the next button, step state receives the value 2 and a line is added to apps data with the contents of form1 and form2, but not form 3. When you finally reach form 3 and click submit, a second line is added to the apps data, this time with data from form 1, form 2 and form 3. And this happens because the new UserData event happens when step state is equal to 2. The new UserData event should only happen after the text of the next button is equal to submit and not when steps equals 2. Thanks for your videos. I learned a lot. (from Brazil)
You are a life saver! thank you
How do you prevent the next button from pressing when the required fields have not been filled?
You can add a condition to check whether the field is empty by going to the 'Workflows' tab
@@thilaks I may have missed a step in your 2 videos but how do you prevent the next step if the inputs haven’t been filled? You don’t seem to mention it?
Thanks for posting, searching this for an hour. (Y)
great tutorial, thanks!
Thank you for this insight. I have downloaded your videos and i will practice them in my leisure time. God bless you.
can you use the responsive engine please.
This isn't a right way. It's one of possible solutions. But best way to send the job a particular page is firstly set job the page's data type, secondly use data to send, don't use url parameters. This is the best for search engines.
thanks dude
Happy to help
But you didn't make the image responsive at all? The slider is responsive, but the image isn't. Slightly confusing title.
I used your tutorial which was great but just have a question if you mind helping... If i want next to skip a specific step based on a input given by the user. for eg. we on step 0 there's a yes/no dropdown and the user selects no i want it to skip step 1 and go directly to step 2 and if its yes it should just continue as normal. how would i go about doing that? thanks again for this amazing tutorial
You can use states, by having a certain state, you can make a condition whether to skip the step or not
thank you very very very much for your lesson. I managed to do everything!
Great tutorial - thank you
Hi, it's a good explained... thank you
Glad you liked it