Transcript
We can use tables to display dynamic data from the database, and the table element provides a much more structured approach for displaying our data.
In this project view, we can see that the columns are nicely aligned to make sure that we can see all of the data we need very clearly. And we also have some buttons on the right-hand side that we can click to achieve various actions — such as editing existing projects or deleting existing projects.
Let's take a look at how I've configured this.
So here is my table element, and similar to a repeating group, the table element also wants a type of content and a data source. So we have projects, and then search for projects where the owner = current user. So I will be looking at my own projects. Fantastic.
But we have some options that differ from a repeating group, such as the table direction.
We also have the first row here, which is our header row, and for that, I set a background color to distinguish between the data. And I'd set up a smaller height — because again, it's the header column. It’s not the dynamic data, it’s just labels.
In this first row, much like in a repeating group, this is where we configure the layout and appearance, as well as our dynamic data.
So in this instance, because we have a table element, Bubble will now return the option in the data source of a current row's project, because the table element is of type of content project.
So now we can go and grab anything relating to a project.
And once I've set the current row's project, Bubble returns all of the fields from our database to allow us to display it inside here. So that’s the project name, we have the description, and we have the various dates.
I went ahead and also found an abbreviated date format that works well for this kind of view, which is February 17th, 2025.
Other options I have at my disposal is to add various actions, so I can run a workflow to basically show a popup to edit this data. I can also run a workflow to show a popup to delete this data.
Okay, and this table repeats itself much like a repeating group. And we only have to configure this first row, and then the rest of the rows repeat.
I’ve set my row count as fixed on three rows. We can make this dynamic, we can add pagination, we can do basically anything we like to customize the user experience.
Lastly, if I’d like to add a new column, I click on the last column — or wherever I’d like to put the column — and Bubble gives us the option to add the column. And there is our new column.