Getting Started

Installation

Install with npm:

npm install --save vue-good-table-next

Import globally in app:

import VueGoodTablePlugin from 'vue-good-table-next';

// import the styles
import 'vue-good-table-next/dist/vue-good-table-next.css'

Vue.use(VueGoodTablePlugin);

or you can import into your component:

// import the styles
import 'vue-good-table-next/dist/vue-good-table-next.css'
import { VueGoodTable } from 'vue-good-table-next';

// add to component
components: {
  VueGoodTable,
}

Basic Example

NameAgeCreated OnPercent
John20Jul 2nd 113.34%
Jane24Oct 31st 113.34%
Susan16Oct 30th 113.34%
Chris55Oct 11th 113.34%
Dan40Oct 21st 113.34%
John20Oct 31st 113.34%
<template>
  <div>
    <vue-good-table
      :columns="columns"
      :rows="rows"/>
  </div>
</template>

<script>
export default {
  name: 'my-component',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          dateInputFormat: 'yyyy-MM-dd',
          dateOutputFormat: 'MMM do yy',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
        },
      ],
      rows: [
        { id:1, name:"John", age: 20, createdAt: '',score: 0.03343 },
        { id:2, name:"Jane", age: 24, createdAt: '2011-10-31', score: 0.03343 },
        { id:3, name:"Susan", age: 16, createdAt: '2011-10-30', score: 0.03343 },
        { id:4, name:"Chris", age: 55, createdAt: '2011-10-11', score: 0.03343 },
        { id:5, name:"Dan", age: 40, createdAt: '2011-10-21', score: 0.03343 },
        { id:6, name:"John", age: 20, createdAt: '2011-10-31', score: 0.03343 },
      ],
    };
  },
};
</script>

Usage with Nuxt.js

Create your own plugin by creating a file called vue-good-table.js inside your Nuxt plugins folder. Shoud look something like this:

import Vue from 'vue'
import VueGoodTablePlugin from 'vue-good-table-next';

// import the styles
import 'vue-good-table-next/dist/vue-good-table-next.css'

Vue.use(VueGoodTablePlugin);

As you can see, the only difference from the normal installation is that we need to reference Vue using import Vue from 'vue'.

Next we need to declare the plugin inside your nuxt.config.js like so:

plugins: [
  { src: '~/plugins/vue-good-table-next', ssr: false }
],

This should now work as expected.