Advanced Vue.js - Directives, Plugins, and Render Functions Chapter 17Building a responsive table with higher-order components
Functional components are very good wrappers when we have to decide which component
to actually wrap. In this recipe, you'll write a responsive table that will display different
columns depending on the browser width.
Getting ready
This recipe is about functional components. If you want to warm up, you can try and
complete the previous recipe.
How to do it...
For this recipe, we will use the excellent semantic UI CSS framework. To use it, you have to
include the CSS library as a dependency or as a tag. For example, you can put the
following code in the
of your HTML:<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.css
" />If you are using JSFiddle, the link inside should be sufficient.
Another tag you have to add to your page for it to look good on mobile is this:
<meta name="viewport" content="width=device-width">This tells the mobile browser that the width of the page is equal to the width of the device.
If you don't put this, the mobile may assume that the page is much larger than the phone
and, trying to display all of it, show a miniaturized version of your app.
We will design a table of cat breeds. You can see all the data in the Vue instance status.
Write it in your JavaScript:
new Vue({
el: '#app',
data: {
width: document.body.clientWidth,
breeds: [
{ name: 'Persian', colour: 'orange', affection: 3, shedding: 5 },
{ name: 'Siberian', colour: 'blue', affection: 5, shedding: 4 },