JSPM

vue-good-table

2.0.0-alpha.4
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17889
  • Score
    100M100P100Q138497F
  • License MIT

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

Package Exports

  • vue-good-table
  • vue-good-table/dist/vue-good-table.css

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

npm npm npm

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

Hey there! coming from 1.x? find the upgrade guide here

Basic Screenshot

Live Demo

vue-good-table Demo Site

Table of contents

Getting Started

Installing

Install with npm:

npm install --save vue-good-table@alpha

Import into project:

import Vue from 'vue';

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

Vue.use(VueGoodTable);

Example Usage

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

<script>
export default {
  name: 'my-component',
  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

Configuration

Component Options

Table

columns Array of column objects

Array containing objects that describe table columns

[
    {
      label: 'Name',
      field: 'name',
      filterable: true,
    }
    //...
]
rows Array of row objects

Array containing row objects

[
    {
      id:1,
      name:"John",
      age:20
    },
    //...
]
rtl Boolean (default: false)

Enable Right-To-Left layout for the table

lineNumbers Boolean (default: false)

Show line number for each row

responsive Boolean (default: true)

Add responsive class to wrapper

Sort

sortable Boolean (default: true)

Enable sorting table by clicking on column

defaultSortBy Object

Allows specifying a default sort for the table on wakeup

{
  field: 'name',
  type: 'asc' //asc or desc (default: 'asc')
}

Pagination

paginate Boolean

Enable Pagination for table

paginateOnTop Boolean

Add pagination on top of the table (default position is bottom)

perPage Integer (default: 10)

Number of rows per page

customRowsPerPageDropdown Array (default: [10,20,30,40,50])

Customize the dropdown options for the amount of items per page

searchEnabled Boolean (default: false)

Allows a single search input for the whole table *Note: enabling this filter disables column filters*

searchTrigger String (default: '')

Allows user to specify if they want search to trigger on enter event of the input. By default search happens on the fly

searchTrigger='enter'
searchFn Function

Allows you to specify your own search function for the global search

<vue-good-table
  :columns="columns"
  :rows="rows"
  :searchEnabled="true"
  :globalSearchFn="searchFn" />;
// in js
methods: {
  searchFn(row, col, cellValue, searchTerm){
    return value === 'my value';
  },
}
searchPlaceholder String (default: 'Filter Table')

Text for global search input place holder

externalSearchQuery String

Allows global search via your own input field

<input type="text" v-model="searchTerm" >
<vue-good-table
  :columns="columns"
  :paginate="true"
  :externalSearchQuery="searchTerm"
  :rows="rows">
// and in data
data(){
   return {
     searchTerm: '',
     // rows, columns etc...
   };
}

Style/Theme

styleClass String (default: 'vgt-table bordered')

Allows applying your own classes to table

other in-built classes: condensed, striped, bordered

rowStyleClass String or Function

Allows providing custom styles for rows

it can be a string: 'my-class' or: 
myStyleFn(row){ 
  // if row has something return a specific class 
  if(row.fancy) {
    return 'fancy-class';
  }
  return '';
}
theme String

Allows using other themes

in-built theme: 'nocturnal'

Text

nextText String (default: 'Next')

Text for pagination 'Next' link

prevText String (default: 'Prev')

Text for pagination 'Prev' link

rowsPerPageText String (default: 'Rows per page')

Text for pagination 'Rows per page' label

ofText String (default: 'of')

Text for pagination 'x of y' label

allText String (default: 'All')

Text for the last option in the items per page dropdown

Column Options

Each column objects can contain the following configuration options:

label String

Text to put on column header

it can be a string: 'my-class' or: 

{ 
  label: 'name'
}
field String

Row object property that this column corresponds to

Can 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 
    {
  field: fieldFn
}
// in methods
fieldFn(rowObj) {
  // do something with the row object
}
type String

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%
  • date - expects a string representation of date eg '20170530'. You should also specify dateInputFormat and dateOutputForamt
dateInputFormat String

provide the format to parse date string

String eg: 'YYYYMMDD' //where date strings are '20170530'
dateOutputFormat String

provide the format for output date

String eg: 'MMM Do YY' //where date will be output like 'May 30th 17'
sortable Boolean

enable/disable sorting on columns. This property is higher priority than global sortable property

sortFn Function

custom sort function. If you want to supply your own sort function you can use this property to supply it.

// in data
column: [
  {
    label: 'Name',
    field: 'name',
    sortable: true,
    sortFn: this.sortFn,
  }
  //...
],
// in methods
methods: {
  sortFn(x, y, col) {
    return (x < y ? -1 : (x > y ? 1 : 0));
  }
}
formatFn Function

Allows for custom format of values, function(value), should return the formatted value to display.

formatFn: function(value) {
  return '$' + value;
}
html Boolean

indicates whether this column will require html rendering or not

example: if row had a property 'htmlContent' like htmlContent: '<button>Hello</button>', then `html: true` on the column will render a button
width Number

provide a width value for this column

width: '50px'
hidden Boolean

allow hiding a column on table

thClass String

provide custom class(es) to the th

example: thClass: 'custom-th-class'
tdClass String

provide custom class(es) to the td

example: tdClass: 'text-center'
globalSearchDisabled Boolean (default: false)

if true, this column will be ignored by the global search

filterOptions Object

A collection of filter specific properties

{
  enabled: true, // enable filter for this column
    placeholder: 'Filter This Thing', // placeholder for filter input
    filterValue: 'Jane', // initial populated value for this filter
    filterDropdownItems: [], // dropdown (with selected values) instead of text input
    filterFn: this.columnFilterFn, //custom filter function that 
}

Column filter option in-depth

Some filterOption properties need a little more explanation

filterDropdownItems Array of strings or array of objects

allows creating a dropdown for filter as opposed to an input

//array
filterOptions: ['Blue', 'Red', 'Yellow']
//or
filterOptions: [  
  { value: 'n', text: 'Inactive' },  
  { value: 'y', text: 'Active' },  
  { value: 'c', text: 'Check' }  
],
filterFn Function

Custom filter, function of two variables: function(data, filterString), should return true if data matches the filterString, otherwise false.

filterFn: function(data, filterString) {
  var x = parseInt(filterString)
  return data >= x-5 && data <= x+5
}
//would create a filter matching numbers within 5 of the provided value.

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

.vgt-table

Table Screenshot

.vgt-table .stripped

Table Bordered Striped Screenshot

.vgt-table .condensed

Table Bordered Striped Screenshot

Theme

Vue-good-table currently comes in two themes

default

nocturnal theme='nocturnal'

Nocturnal Theme Screenshot

Advanced Customization

Custom row template

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

<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="table-row" slot-scope="props">
    <span v-if="props.column.field == 'age'">
      age: {{props.row.age}}
    </span>
    <span v-else>
      {{props.formattedRow[props.column.field]}}
    </span>
  </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 then access the original row object by using row[props.row.originalIndex].
  • The column object can be accessed via props.column
  • You can access the formatted row data (for example - formatted date) via props.formattedRow

Custom column headers

Sometimes you might want to use custom column formatting. You can do that in the following way

<vue-good-table
  :columns="columns"
  :rows="rows">
  <template slot="table-column" slot-scope="props">
     <span v-if="props.column.label =='Name'">
        <i class="fa fa-address-book"></i> {{props.column.label}}
     </span>
     <span v-else>
        {{props.column.label}}
     </span>
  </template>
</vue-good-table>

Empty state slot

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

<vue-good-table
  :columns="columns"
  :rows="rows">
  <div slot="emptystate">
    This will show up when there are no columns
  </div>
</vue-good-table>

Authors

License

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