Intro to Vuetify's v-data-table
2:39
A Simple Table
2:22
Custom Item (Column) Slots
6:39
Custom Sorting
4:33
VideoTable Component
4:49
'Tags' and 'Played' Columns
8:35
Expandable Rows
4:27
DataTable Events
7:06
Custom Search and Filtering
7:10
Dynamic Columns (abstracting VideoTable)
13:46
Review
9:31
0% done with Building Complex Data Tables with Vuetify's v-data-table and VueJS

Chapter 26 of 27 in Building VueScreencasts.com
Dynamic Columns (abstracting VideoTable)

We want to use the VideoTable Component in our Admin page, but there will have to be some changes. We don't need the Played column, we want to add an Actions column, and we want to change the spacing and number of rows.

We can accomplish that by passing in headers to the component and adding a few more props. By the end of this video you'll see how the Components you create based on v-data-table can be massively flexible, reusing whichever rows you want and ignoring the rest.

We don't do it in this video, but you could even have users selecting which rows they want to see, making the columns truly dynamic!

What do others think of VueScreencasts?
"Thank you very much!!!!!!!"
—Idriss Jouid
"Very good tutorial, thanks."
—ivan89pln
"Awesome video!"
—Doïc de Maleprade
"Thanks for the tutorial. Subscribed!!!! :)"
—Zenish Shrestha
Take your career to the next level