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?
"Your tutorial is quite easy to understand."
—Koga2 Kuzengenki
"Here I found answers to questions that I couldn't formulate before."
—Almas Kamitov
"At 14:22... it was exactly that question which I had in mind seconds before!"
—Henning Sieh
Take your career to the next level