Vue-good-table

A simple, clean data table for VueJS (2.x) with essential features like sorting, column filtering, pagination etc

Live Demo

vue-good-table Demo Site

Getting Started

Prerequisites

The plugin is meant to be used with existing Vue 2.x projects. It uses ES6 features so as long as your build process includes a transpiler, you're good to go.

Installing

Install with npm:

npm install --save vue-good-table

import into project:

import Vue from 'vue';
import VueGoodTable from 'vue-good-table';

Vue.use(VueGoodTable);

Example Usage

<template>
  <div>
    <vue-good-table
      title="Demo Table"
      :columns="columns"
      :rows="rows"
      :paginate="true"
      :lineNumbers="true"/>
  </div>
</template>

<script>
export default {
  name: 'test',
  data(){
    return {
      columns: [
        {
          label: 'Name',
          field: 'name',
          filterable: true,
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
          html: false,
          filterable: true,
        },
        {
          label: 'Created On',
          field: 'createdAt',
          type: 'date',
          inputFormat: 'YYYYMMDD',
          outputFormat: 'MMM Do YY',
        },
        {
          label: 'Percent',
          field: 'score',
          type: 'percentage',
          html: false,
        },
      ],
      rows: [
        {id:1, name:"John",age:20,createdAt: '201-10-31:9:35 am',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},
        {id:7, name:"Jane",age:24,createdAt: '20111031'},
        {id:8, name:"Susan",age:16,createdAt: '2013-10-31',score: 0.03343},
        {id:9, name:"Chris",age:55,createdAt: '2012-10-31',score: 0.03343},
        {id:10, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
        {id:11, name:"John",age:20,createdAt: '2011-10-31',score: 0.03343},
        {id:12, name:"Jane",age:24,createdAt: '2011-07-31',score: 0.03343},
        {id:13, name:"Susan",age:16,createdAt: '2017-02-28',score: 0.03343},
        {id:14, name:"Chris",age:55,createdAt: '',score: 0.03343},
        {id:15, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
        {id:19, name:"Chris",age:55,createdAt: '2011-10-31',score: 0.03343},
        {id:20, name:"Dan",age:40,createdAt: '2011-10-31',score: 0.03343},
      ],
    };
  },
};
</script>

This should result in the screenshot seen above

Note: vue-good-table also supports dynamic td templates where you dictate how to display the cells. Example:

<vue-good-table
  title="Dynamic Table"
  :columns="columns"
  :rows="rows"
  :lineNumbers="true"
  :defaultSortBy="{field: 'age', type: 'asc'}"
  :globalSearch="true"
  :paginate="true"
  styleClass="table condensed table-bordered table-striped">
  <template slot="table-row" scope="props">
    <td>{{ props.row.name }}</td>
    <td class="fancy">{{ props.row.age }}</td>
    <td>{{ props.formattedRow.date }}</td>
    <td>{{ props.index }}</td>
  </template>
</vue-good-table>

Note:

• The original row object can be accessed via props.row
• The currently displayed table row index can be accessed via props.index .
• The original row index can be accessed via props.row.originalIndex. You can access the original row object by using row[props.row.originalIndex].
• You can access the formatted row data (for example - formatted date) via props.formattedRow

Empty state slot

You can provide html for empty state slot as well. Example:

<vue-good-table
  title="Dynamic Table"
  :columns="columns"
  :rows="rows"
  :lineNumbers="true"
  styleClass="table condensed table-bordered table-striped">
  <div slot="emptystate">
    This will show up when there are no columns
  </div>
</vue-good-table>

Component Options

Column Options

Style Options

Vue-good-table allows providing your own css classes for the table via styleClass option but it also has in-built classes that you can make use of

.table

.table .table-bordered

.table .table-stripped

.table .table-stripped .table-bordered .condensed

Authors

• Akshay Anand - Initial work - xaksis
• Other Contributors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

Inspiration taken from

• MicroDroid's vue-materialize-datatable
• Bootstrap's table styles