How to use Vue-tables-2 — tables for vuejs

The majority of my post are dedicated to Swift iOS programming, but in this case I’ve decided to show you another language that I love: Javascript.

I’ve been using VueJs during the last year, I’ve founded a big advantage for creating amazing web apps.

Why VueJs?

The answer it’s pretty simple: I don’t know hahahaha, it was the first react framework I used and that’s why I choose it.

Let’s get started

One of the most important topic about creating webapps is listing information. that’s why we use tables in HTML (Not for layouts).

Vue-tables-2 makes tables simple and easy to customize them.

Install Vue-tables-2 requirements

1. Vuex (>=2.0)
2. Bootstrap 3 compatible html output

How to install Vue-tables-2

npm install vue-tables-2

vue-tables-2

Example Brief

In this post we’re going to create a table which list students, It will contain: name, date birth, year in school, code.

We also will add filters depending of field’s type and pagintation.

Other libraries we’ll use

For work with dates:

Moment.js | Home

npm install moment

For show calendar

daterangepicker

npm install daterangepicker

Step 1 — import libraries

import {ClientTable, Event} from 'vue-tables-2';
Vue.use(ClientTable);
import daterangepicker from 'daterangepicker';
//This is very important to used with the window object
window.moment = require('moment');

Step 2 — using vue-tables-2 component

<!-- rows, columns and options (I will show how to define them, keep reading) -->
<v-client-table :data="rows" :columns="columns" :options="options">

Step 3 — Script block

Step 4 — Creating data

If you prefer, you can create data from server service but in this case I will use local data because it’s easy to handle.

Advice: use this css (You’re welcome)

Result

I hope you find this tutorial useful and you have some comments please let me know.