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?
"Thank you, work for beginner like me. Big thumb for you!!!"
—Rivera Daniel
"Thanks @Vue Screencasts!! This video helped me a lot in understanding Vuex, and in answering questions that I have, which I can't find answers for on StackOverflow. Keep up the good work!!"
—kidgr33n
"Here I found answers to questions that I couldn't formulate before."
—Almas Kamitov
Take your career to the next level