Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17

The breeds props will be passed on to the selected component in the context.data.

Our desktop table will look pretty regular for a table:

const DesktopTable = {

template: `

<table class="ui celled table unstackable">

<thead>

<tr>

<th>Breed</th>

<th>Coat Colour</th>

<th>Level of Affection</th>

<th>Level of Shedding</th>

</tr>

</thead>

<tbody>

<tr v-for="breed in breeds">

<td>{{breed.name}}</td>

<td>{{breed.colour}}</td>

<td>{{breed.affection}}</td>

<td>{{breed.shedding}}</td>

</tr>

</tbody>

</table>

`,

props: ['breeds']

}

The classes at the top are part of semantic UI and they will make our table look much

better. The unstackable class, in particular, disables the automatic stacking performed by

CSS. We will cover more on this in the next section.

For the mobile table, we'd like to edit not only the styling, but we'd also like to group the

columns themselves. The breed will go along with the color and the affection with the
shedding. Also, we want to express them in a compact style. The table head will look like

this:

const MobileTable = {

template: `

<table class="ui celled table unstackable">

<thead>

<tr>

<th>Breed</th>

<th>Affection & Shedding</th>

</tr>

</thead>

...