The goal of this lesson is for us to get a table of posts on the post page. But first, we need to position everything here so that's flush left instead of centered. It's gonna look kind of funny with the table centered on the page. The way we need to do that is by removing these utility classes from the main component inside of the default view.
These came along for the ride when we copied the layout from the documentation, but for our use case, we don't need them. Now, why did those work the way they did? Well, because Vutify ships with a great variety of utility classes out of the box. You can find all of these different utility classes underneath the styles and animations tab here on the left and under utility classes.
The ones that we're making things centered are all under this flex category here. So these are all sorts of ways that you can just quickly add flex properties to an element. Another category of utility classes though, is the spacing category. And this is going to help us with our app.
Why? Because right now we've got our post right flush up against the side of the window, which just looks gross, right? So we can use the spacing class for some margin or padding. And they've got this really cool sizer here where you can play with how things work.
So PA stands for padding all. And size, the smaller the size, of course, the less amount of padding and the bigger the size, the more amount of padding. You could also choose things like R, which is just right. S, which is, I'm not entirely sure.
Let's look right down here. supplies the spacing for margin left and padding left in LTR mode and margin right and padding right in RTL mode. Oh, okay, so this is like start depending on which way you read text. Here we have E, which I assume would be end, and then we have X and Y, which would apply padding to both sides of the element or to the top and bottom of the element at the same time.
Great. I'm not sure why T and B and L aren't showing up in that list, but that would be top, bottom, and left. So yeah, that's pretty simple. And you can do the same thing with margin.
So let's add a div around our router view tag, and then we'll give it a class of, let's say, padding all five and see how that looks. Great. I like that better. Now we're not right up against the side of the page.
And when I make my window larger, we aren't right up against the side of the drawer. Okay, let's go try to figure out getting a table now. So I'll search the Vdify docs for table and let's see what we have. So here's a table of desserts.
This looks like what we need. We just need to change it out to be posts instead. So I will copy everything here inside of the table. view page and right underneath the post heading, let's paste in that table.
Okay, we've got the headings right here on the page. There are no rows, but that's because we're looping over a variable that doesn't exist. Let's change this to posts and then we'll define our post in the script setup section above. Now this means of course we need to import ref from view.
And then let's say each post has a title. We don't have to come up with anything fancy here. I'll just say post one. Then let's pretend each one has an author as well.
Awesome. I'll duplicate this a number of times and we'll quickly speed through this in the video so you don't have to watch me changing all these. Great. So now the rows are appearing on the page.
but we need to make sure we're printing out the new data here. calories will become the author. Okay, cool. This looks great now over on the right-hand side.
Now you can see that we have a heading here. This is because of the T head element. and the code. This is just regular old HTML.
And the t-body looks just the same. This is also just regular HTML. So I actually quite like how we're not doing anything new and fancy that I have to learn specific to Vudify. I can just use regular old HTML elements and have a table just like I'd expect.
Now, we did miss changing this calories to author. So let me do that real quick. Okay, that works. Now let's explore some of the other goodies that come with Vtable.
So just like before, I'll do Ctrl Spacebar. For some reason, I don't get all of the auto-completions here for the props. And I think the issue is that I forgot to add lang="ts to my script setup tag. Okay, great.
Here we have the options available now. Let's try giving our table a fixed height. Cool. Now it cuts off after post five and I can scroll up and down it.
Another option would be for me to give it a fixed header. That way when I scroll up and down the header stays in one spot. Furthermore, we could also control the density like we could earlier. We could choose from comfortable, compact, or just leave it at the default.
We could also set the hover property to true. And then whenever we hover over one of the rows in the browser, it gets this nice little grayed out background. Now that's just about all there is to the table component in beautify. And I know what you're thinking, this seems kind of lightweight.
I would expect this awesome UI library to contain more advanced features for tables, things like sorting, filtering, and so on. We'll get to that in the next lesson.