Intro to Dynamic Slots
Tour of the Starting Code - A Table for Github Projects
Exercise 0 - Raising Github API Rate Limit (updated)
Slots for Table Rows
Exercise 1 - Head and Foot slots
Solution to Head and Foot Slots Exercise
Column Slots
Dynamic Column Slots
Exercise 2 - Dynamic Head and Foot Slots
Answer to Exercise 2 - Dynamic Head and Foot Slots
Completely Customizable Dynamic Tables
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?
"Dude, it's an excellent video. Soothing voice, extensive and crystal clear explanations, troubleshooting common issues... You do it and you do it well. Keep up the good work & congratulations :-) Subscribed without the slightest hesitation"
"Excellent video! Great work. Subscribed."
—Alexandros Markovic
"Excellent video! Great work. Subscribed."
—Alexandros Markovic
"I spent all evening doing Nuxt registration. I wish I had've spotted this video sooner. 🤦🏻‍♂️. Excellent and clear tutorial. Thank you!"
—Si D
Take your career to the next level