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
Exercise 1 - Head and Foot slots

Your assignment is to make the #head and #foot slots in VSTable.vue.

The component usage will look like this:

<VSTable :items="projects">
  <!-- ... item slot template omitted ... -->
  <!-- new code -->
  <template #head>
    <th>Name</th>
    <th>
      <font-awesome-icon icon="star" />
      <font-awesome-icon icon="star" />
      <font-awesome-icon icon="star" />
    </th>
    <th>Language</th>
    <th>Here Be Dragons
      <font-awesome-icon icon="dragon" />
    </th>
    <th>Actions</th>
  </template>
  <template #foot="{items}">
    <td><strong>Totals</strong></td>
    <td>{{sumBy(items, 'stargazers_count')}}</td>
    <td></td>
    <td>{{sumBy(items, 'open_issues')}}</td>
    <td></td>
  </template>
</VSTable>
What do others think of VueScreencasts?
"Woohoo... keep it up!"
—fazzy akamello
"I like the way you explain and teach, also your enunciation is incredible for us 'non native' english persons, everything is so enjoyable... Thank you for putting so much effort and time into making this video knowledge."
—@awa_it_
"Thank you. Even after having seen many tutorials, I keep learning a lot from you. You teach well!"
—Lars Sørensen
"Awesome!!"
—Mohamad Nasir
Take your career to the next level