Switching Between Grid View and List View With Vue.js

Represent any array of data and switch between visualizations

Francesco Bonizzi
Oct 15 · 3 min read
Photo by Glenn Carstens-Peters on Unsplash (with added Vue.js logo)

Vue.js is a framework with high potential. It’s easy to learn, fast, and light in terms of bytes. If you’re a beginner, you could start with these articles:

Now I’m going to continue my journey through this framework with this piece about how to make a Vue application that represents text data taken from an array and switch its visualization from a list view to a grid view.

You’ll find the final result in my repository.

First Steps

First of all, let’s create three new files:

  • index.html
  • app.js
  • style.css

Add to index.html the reference to the style sheet, to our JavaScript file, and, of course, to Vue.js:

Then imagine our application layout:

Our application will have:

  • A button to switch between grid view and list view
  • A button to switch between different arrays of data, in order to show that the application can render different collections
  • A standard grid view, composed of column name as first row and each element as a row
  • A list view where each element is an item of the vertical collection, with an image

Grid View Without Vue.js

Without Vue.js the grid view structure may look like this:

As you can see, I didn’t use the table tag, but just div. This is helpful to better switch the representation just with css.

This is the style:

The most important things to notice are:

  • grid-wrapper, display: table
  • grid-row, display: table-row

It looks like this:

List View Without Vue.js

Without Vue.js the list view structure may look like this:

The style is pretty easy, just a combined display: grid with flexbox:

It looks like this:

Vue.js Integration

The object to be represented should be something like:

Notice that it has two arrays:

  • columns: with just the names of each property to be rendered
  • data: an array of objects with the same properties as mentioned in columns

It’s time to implement our Vue application:

The Vue application is pretty easy:

  • isGridView property is used to hide/show the grid layout or the list layout.
  • isBookData property is used to change the represented data. (You won’t need this in production; it’s just for purposes of this piece.)
  • You will see all the test data in the full code in the repository.

The interesting part is the HTML structure, which is a combination of:

  • v-bind:class used to toggle list/grid CSS classes based on the isGridViewCondition
  • v-for used to render the array values and column names
  • v-if to hide/show some layouts based on the selected representation

And here’s the final result:

You can find the whole code here.

Better Programming

Advice for programmers.

Francesco Bonizzi

Written by

Full stack software developer, veggie and rain lover :-) Parma, Italy 🇮🇹 https://www.linkedin.com/in/francesco-bonizzi-037743154/

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade