In this tutorial, I'm going to show you how you can add in a table element to display your contact data type.

Creating a new data type and fields

So we're going to start right way by going into data and setting up the contact data type. So I'm on the Data types tab up top, and I'm going to add in a new type called Contact. I'm going to add some fields in. Let's just start really simple. We'll have Name and we'll have Email. Both of them are type text. Now we need a way of displaying our data back. I'm going to go into dashboard. If you want to see how I got up to this stage, go and check out our earlier tutorial videos because you'll see everything up to here. But because I want a similar design, I'm going to simply clone the dashboard and call this contacts, because it's going to show more than one contact. And then now I'm on the contacts page. I'm going to delete some of these parts here. So I'm just left with group C because that is the inner content for my page.

Displaying data with the table element

Let's add in a table element now. This is Bubble's new table element, only a few weeks old at the time of recording. And it's going to show type of content contacts, and it's going to be do a search for all contacts. Because right now without putting any privacy rules in place, and we'll get onto privacy rules maybe in this video, maybe in a future video, it's just going to return all of the contacts in the database no matter who created them. And I'll put in a bit of order. We'll say order by name.

Then in this cell here, we will put our header, and we'll say name. And then I'm just going to copy and paste that into B and say, email. And then I'm going to see if I can just delete C for now. And now we build out the contents that we want repeated through each row of our table where we want the data displayed. So in name, I'm just going to add in current rows, contacts, name. And I'll make this width 100 %. And I'll also make height zero just so it's only as big as it needs to be. And I'm going to copy and paste this into the email column and change it to email. Let's hit Preview.

Okay, you can see our table is beginning to come along. I'm going to add in just a couple of design refinement here because I don't like it when things look like they are without the appropriate padding. So I'm just putting 12 padding in all sides, and I'm going to copy that into my cells here for my row. And on my table element and the layout, just to get rid of it. There we go. Now it feels like all the space. I'm going to put a much lower number in there. Cool. But we have no data in the database, nor have I built a way of adding the data in the front end.

Manually adding data within the Bubble editor

So I'm going to add in some manual data manually by going into the app data and in contact. And I can just say new entry. And so I can add in a name. I'll just put Scott. And I could say scott@example.com. And so we can get an idea of the table repeating itself. I'll also put in, say, Hank and we can have Hank@example.com. If you have, with those two clues, understood where I'm getting my inspiration for names from this afternoon, leave a comment below. I'd love to see if you get it with those two clues, Scott and Hank, what might I be being inspired by?

And now if we go back to our table, we can see that we have got Scott and Hank. I'm going to leave it there for this video. In the next video, I will show you how we can create a pop-up that can both be used to create and edit entries in our contact database. So you don't need a separate create pop-up and a separate edit pop-up. We're going to do it with just one pop-up.