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?
"At 14:22... it was exactly that question which I had in mind seconds before!"
—Henning Sieh
"Great video && Project Jeffrey!! Thank you a lot :)"
—אלכסיי לוינזון
"Thank you. Even after having seen many tutorials, I keep learning a lot from you. You teach well!"
—Lars Sørensen
"Thank you, it is very interesting."
—Chris LR
Take your career to the next level