In this lesson, let's talk about Vutify Labs. What is it? Well, basically it's just a way to test out unfinished components that are still in an alpha state. This allows us to get our hands on the up and coming Vutify components more quickly and allows us to test them out and provide feedback to the Vutify team.
Plus, it gives us a good idea of what's coming and how the API for some of these components will work. when they are released for a stable release. However, right now they are considered not production ready. So you should really only be using these for testing purposes as breaking changes could be introduced to their APIs.
Cool. So that's Vudify Labs. Let's take a look at using one of the components that is currently in Vudify Labs. That is the data tables.
The VDataTable component is useful for displaying tabular data. We just saw how to present tabular data in the last lesson, but data tables take it up a notch. It includes features like sorting, searching, pagination, grouping, and even row selection. So let's take a look at some of these features in this lesson.
0. If you're unsure about what version you're currently using, Inside of your project, you can run npm list. And then this will print out the version of all of the different packages installed for your project. 22, so we're good to go.
json file, it might be hard to search through all this list to find the package you're looking for. One little trick to drill down to the specific package you want to view is by doing npm list the pipe character and then using the grep command in order to search for specific characters like this. So what this is saying is run npm list but pipe the output of npm list to the grep command and use grep to search for the word beautify. Awesome.
Yeah, so this time we do have a couple of instances of Vutify found. The one that we are worried about is this package here. So that's just a quick little tip for you. Great.
Let's head back over to the docs now and see how we can start using the data table. Here we have a good example of it. It looks a lot like the table that we had for the component in the last lesson, but it has some extra things going on. Like the ability to sort the items by different columns.
The ability to page through different pages of the table. Okay, cool. Let's take a look at the code for this. And you'll see it's a lot more minimal than what we were working with last time.
It's just the component. There's nothing even in the default slot. No headers, no rows, nothing at all. Just a few props here.
I am going to copy this and see if we can get this working in our code. Here inside of my IDE, I'll replace the V table with the V data table. Now for the items per page, we'll get rid of headers for now, and items is deserts here. We need to replace this with the items for our table, posts.
Awesome. And then, Finally, I'll get rid of these other two prompts, and we'll look at some of those more in a moment. After I hit Save, the table in my browser disappears. This is because we don't have the data table by default.
That's because all of these components that exist under Labs aren't automatically available to your project like all of the other Vutify components. Instead, you have to manually import them. Perfect. Now over on the right hand side, you can see some controls, but still no rows for the table.
What I've found is that no rows will actually show up until you start configuring your headers. Okay, so what do headers look like? Back over in the documentation, if I come over to the script section of this example, you can see how they are using the headers. It's an array of objects.
and each object within the array it looks like has a title to define what the actual label on the header should be and then some other metadata as well. Let's try copying this and then we'll alter it for our needs back in the IDE. We'll change title here to post title. We can align it to the start of the data cell.
For now, we'll leave sortable faults. You'll see how that works in a moment. And this key is important. This needs to line up with the property within our post array.
So the data that we want to show up in the title column is the data that exists under the title property in the array. So I'll make the key match title. Perfect. Let's remove all the other unneeded ones.
And then we'll configure the second column to be author. I'll leave the alignment at the end so we can see the difference. And the key here would be lowercase author. This matches up with the key in the array above.
Sweet. Over in the browser now, things are looking excellent. Look at this. Here are our titles again.
Here is the author. Notice how it is aligned to the end of the table here, which is really nice. That's due to that alignment. property that we added on that column, but notice now I can sort by my authors.
And it automatically does this by alphabetical order. We have BamBamFirst followed by Barney, Fred, and then Wilma at the end. And I can also sort the other direction as well. We've also got this nice little UI added showing you the direction of the sort.
And all this just comes By default with this component. These are things we don't have to code up ourself It's a huge huge time saver Notice now though that I'm also not displaying all of my posts at one time This is only ten of them if I use the pagination controls down at the right hand corner I can go to the next page and see the last two of them. Once again, this is all happening automatically we don't have to do a thing in order to make this work. Do note though, that all of this sorting and pagination all happens on the client side.
That means all of this data must exist when the component melts. In a lot of your production applications, you will have smaller tables that will work just fine like this, where you can do all of the sorting. and pagination on the client side and load all the data in at once. But a lot of your tables that will have larger portions of data in it, you'll actually want to do this sorting and pagination on your server side and on the client only load the current page that you want to display.
Over in the documentation, if I close up this example, you'll see that there is another solution available to do just that. That's called the V data table server and this variant of the data table is meant to be used when the data set you're displaying Comes directly from the server and you don't want to load all the rows at mount time Okay, so that's totally possible as well We're not going to show it in this video, but know that you do have it available to you Finally, there is also another variant of the data table called data table virtual This version of the data table relies on all the data being available locally. However, unlike the standard variant, it uses virtualization to only render a small portion of the rows at a time. So it makes a really great solution for displaying large data sets that are loaded on mount.
Okay, so that is the basics of the data table. Let's run through these different items over here and see what else we can find to explore. It looks like there are even more things you could do with the headers, like use slots in order to customize certain column headers. You can also override all of the internal headers by using the header slot.
Cool. This next piece is really interesting. It looks like we're able to quickly add row selection to our tables. This lets us click a single checkmark and select all the rows at once, or toggle it again to deselect all the rows.
And then of course, select individual rows as needed. Okay, so how does this work? It looks like the first thing we should probably do is add the Show Select prop to the component. Let's do that over in the code.
Over in the browser, we've got exactly what we want. However, if I click on an individual row, all of them are immediately selected. That's because whenever we turn on the select feature, we also need to tell the component how to uniquely identify each row. We can do that with the item value prop.
This is going to take the name of a property that each row should have that uniquely identifies it. If you're getting your data from a database, that's probably going to be an ID property. We aren't though. So I'm going to say that our title property is unique per row, which it is.
They're all post one, post two, post three, and so on. Perfect. Now that works exactly as expected. Just to note here, besides just providing a property name, you could also provide a function that takes in the individual row and then returns the unique key.
So we have access now to the individual item. And we could say our unique ID is the combination of both the title and the author. That works just the same. Lastly, how do we know which one of these rows the user has selected?
We can do that with the model. That means we have to define some reactive state. It makes sense to call this selected. It should be an empty array by default.
And then whenever we check items over in the browser, it will fill up with the items that we've selected. Let's print it just below the H1 so we can test it out. Right now, it's an empty array. But when I click through, you can see the unique key for each post here.
In hindsight, combining the title and the author together really doesn't make a whole lot of sense. Let's just put this back to being the title key. Post one, post two, and post three are selected. Lastly, in this video, I want to take a look at how we can sort and filter our table.
Here is a great example of doing just that. It has a search bar above the table. And when we type into the search bar, the results, the rows on the table are filtered based on the query. Let's see how that works.
It looks like we just have a V text filled here, which we'll talk about in a later lesson. It has a V model on it. which references some search data. If I look in the script section here, you can see that the search data is just an empty string by default.
For us, basically, that's going to be an empty reactive ref. Then on the data table, we just pass in the search property, pointing it to that search reactive data. Great. Let's copy this text field here, and then we'll do the same thing in our code.
I'll put the text fill just above the table. We can move the printout of the selected since we're done with that. And then I'll define the search reactive data. Lastly, let's pass it in to the table.
When I search for Wilma now, sure enough, we get just the post that Wilma has written. I could also search by any other column I'd like. So let's go for four and it filters down to just post number four. In conclusion, the data table is a really powerful alternative to the regular table component in Vudify.
Just remember that currently it is still considered experimental as it is in the labs portion of Vudify's components. So just be aware and probably don't use this component in production quite yet.