Package Exports

vue-good-table

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-good-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue-good-table

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

Basic Screenshot

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: 'Id',
          field: 'id',
          type: 'number',
          html: false,
          width: '50px',
        },
        {
          label: 'Name',
          field: 'name',
          html: false,
          filterable: true,
        },
        {
          label: 'Age',
          field: 'age',
          type: 'number',
          html: false,
          filterable: true,
        },
        {
          label: 'Percent',
          field: 'btn',
          type: 'percentage',
          html: false,
          filterable: true,
        },
      ],
      rows: [
          {id:1, name:"John",age:"20",btn: 0.03343},
          {id:2, name:"Jane",age:"24",btn: 0.03343},
          {id:3, name:"Susan",age:"16",btn: 0.03343},
          {id:4, name:"Chris",age:"55",btn: 0.03343},
          {id:5, name:"Dan",age:"40",btn: 0.03343},
          {id:6, name:"John",age:"20",btn: 0.03343},
          {id:7, name:"Jane",age:"24",btn: 0.03343},
          {id:8, name:"Susan",age:"16",btn: 0.03343},
          {id:9, name:"Chris",age:"55",btn: 0.03343},
          {id:10, name:"Dan",age:"40",btn: 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: 'asec'}"
  :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.row.btn }}</td>
  </template>
</vue-good-table>

Component Options

Option	Description	Type, Example
title	Title shows up above the table	String, `"Test Table"`
columns	Array containing objects that describe table columns	[ { label: 'Name', field: 'name', filterable: true, } //... ] For all column properties, see below
rows	Array containing row objects	[ { id:1, name:"John", age:"20" }, //... ]
paginate	Enable Pagination for table	Boolean
perPage	Number of rows per page	Integer (default: 10)
onClick	Function to run when a row is clicked	function(row){ console.log(row); }
sortable	Enable sorting by clicking column	Boolean
styleClass	Allows applying your own classes to table	String default: 'table table-bordered'
globalSearch	Allows a single search input for the whole table Note: enabling this filter disables column filters	Boolean default: false
lineNumbers	Enable sorting by clicking column	Boolean default: false
defaultSortBy	Allows specifying a default sort for the table on wakeup	Object, example: { field: 'name', type: 'asc' //asc or desc (default: 'asc') }
Text Options - for those interested in using other languages
globalSearchPlaceholder	Text for global search input place holder	default: "Search Table"
nextText	Text for pagination 'Next' link	default: "Next"
prevText	Text for pagination 'Prev' link	default: "Prev"
rowsPerPageText	Text for pagination 'Rows per page' label	default: "Rows per page"

Column Options

Option	Description	Type, example
label (required)	Label to put on column header	String `{label: "Name"}`
field (required)	Row object property that this column corresponds to	Could be: String `eg: 'name'` - simple row property name String `eg: 'location.lat'`- nested row property name. lets say if the row had a property 'location' which was an object containing 'lat' and 'lon' Function - a function that returns a value to be displayed based on the row object
type (optional)	type of column. default: 'text'. This determines the formatting for the column and filter behavior as well	Possible values: number - right aligned decimal - right aligned, 2 decimal places percentage - expects a decimal like 0.03 and formats it as 3.00%
filterable (optional)	provides the column with a filter input	Boolean
html (optional)	indicates whether this column will require html rendering or not	Boolean, example: if row had a property 'htmlContent' like `htmlContent: '<button>Hello</button>'`, then html: true on the column will render a button
width (optional)	provide a width value for this column	example: `width: '50px'`

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