Intro to Dynamic Slots
2:02
Tour of the Starting Code - A Table for Github Projects
5:25
Exercise 0 - Raising Github API Rate Limit (updated)
2:36
Slots for Table Rows
4:51
Exercise 1 - Head and Foot slots
1:58
Solution to Head and Foot Slots Exercise
1:12
Column Slots
3:14
Dynamic Column Slots
5:37
Exercise 2 - Dynamic Head and Foot Slots
3:01
Answer to Exercise 2 - Dynamic Head and Foot Slots
4:05
Completely Customizable Dynamic Tables
4:05
0% done with Advanced Components: Slots II (Dynamic Slots)

Chapter 2 of 5 in Advanced Components: Slots
Intro to Dynamic Slots

We preview the table we'll be building in this course, show the component that inspired it, and show how to best prepare for the course.

Starter code is in the course-2-start branch.

Code summary

Today we’re going to take an in depth look at dynamically named slots by creating a table component -- inspired by Vuetify's v-data-table component -- that can be reused with different data sets. The goal is to allow for easy column-specific data customization, so this one component can be used for many different tables.

In order to do this course, we recommend a general understanding of slots. You can learn about them in our previous course, “Advanced Component - Slots I” or through the Vue documentation.

Starter code can be found here

Once you’ve cloned the repository, make sure to update yarn or npm. From there, run yarn serve or npm run dev and you’re ready to go!

What do others think of VueScreencasts?
"At 14:22... it was exactly that question which I had in mind seconds before!"
—Henning Sieh
"just started following along on your journey, great start... keep up the good work"
—Alison Smith
"It's very helpful. Thank you for a great tutorial."
—Abdulaziz Al Ghafli
"Excellent video! Great work. Subscribed."
—Alexandros Markovic
Take your career to the next level