Skip to content

A simple, clean data table for vuejs with essential features like sorting, column filtering, pagination etc

License

Notifications You must be signed in to change notification settings

redpanthers/vue-good-table

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue-good-table

npm npm npm

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

Feeling adventurous? Try out vue-good-table 2.0 beta

Upgrade Guide

Basic Screenshot

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" slot-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

Additional Columns

If you want the table to do all your rendering and want to add some columns to the beginning or end of the row, you can use additional slots:

<vue-good-table
  :columns="columns"
  :paginate="true"
  :rows="rows">
<template slot="table-row-before" slot-scope="props">
  <td><input type="checkbox" /></td>
</template>
<!-- all the regular row items will be populated here-->
<template slot="table-row-after" slot-scope="props">
  <td><button @click="doSomething(props.index)">show</button></td>
</template>
</vue-good-table>

Note Make sure you add the columns in the columns array for the additional td that you create.

Custom columns

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

<vue-good-table
  :columns="columns"
  :paginate="true"
  :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
  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

Option Description Type, Example
title Title shows up above the table String, "Test Table"
If not set, the title region is not created.
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
paginateOnTop Add pagination on top of the table as opposed to the default bottom Boolean
rtl Enable Right-To-Left layout for the table Boolean (default: false)
perPage Number of rows per page Integer (default: 10)
customRowsPerPageDropdown Customize the dropdown options for the amount of items per page Array (default: [10,20,30,40,50])
onClick Function to run when a row is clicked
<vue-good-table
      :columns="columns"
      :onClick="onClickFn"
      :rows="rows"/>
// data
data() {
  return {
   // rows, columns ...
    onClickFn: function(row, index){
      console.log(row); //the object for the row that was clicked on
      console.log(index); // index of the row that was clicked on
    },
  };
}
sortable Enable sorting by clicking column Boolean
styleClass Allows applying your own classes to table String default: 'table table-bordered'
rowStyleClass Allows providing custom styles for rows it can be:
  • string: 'my-class'
  • function:
    myStyleFn(row){ 
      // if row has something return a specific class 
      if(row.fancy) {
        return 'fancy-class';
      }
      return '';
    }
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')
}
responsive Add responsive class to wrapper Boolean default: true
Events
pageChanged event emitted on pagination change
<vue-good-table
    @pageChanged="onPageChange"
    :columns="columns"
    :rows="rows"/>
// ...
methods: {
  onPageChange: function (evt) {
    // { currentPage: 1, currentPerPage: 10, total: 5 }
    console.log(evt);
  }
}
    
perPageChanged event emitted on pagination change
<vue-good-table
    @perPageChanged="onPerPageChange"
    :columns="columns"
    :rows="rows"/>
// ...
methods: {
  onPerPageChange: function (evt) {
    // { currentPage: 1, currentPerPage: 10, total: 5 }
    console.log(evt);
  }
}
    
Search Options
globalSearch Allows a single search input for the whole table Note: enabling this filter disables column filters Boolean default: false
searchTrigger (used with global search) allows specifying searching on enter key rather than live search for large records String searchTrigger="enter"
globalSearchFn Specify your own search function for global search Provide a function that takes in cell values and returns true if it matches, false if it doesn't match
  <vue-good-table
  :columns="columns"
  :globalSearchFn="searchFn"
  :rows="rows"/>
// in js
methods: {
  searchFn(row, col, cellValue, searchTerm){
    return value === 'my value';
  },
}
externalSearchQuery Allows global search via your own input field Usage
    <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...
      };
  }
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"
ofText Text for pagination 'x of y' label default: "of"
allText Text for the last option in the items per page dropdown default: "All"

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
        {
          field: fieldFn
        }
    // in methods
    fieldFn(rowObj) {
      // do something with 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%
  • date - expects a string representation of date eg '20170530'
inputFormat (if type is date) provide the format to parse date string String eg: 'YYYYMMDD' //where date strings are '20170530'
outputFormat (if type is date) provide the format for output date String eg: 'MMM Do YY' //where date will be output like 'May 30th 17'
sortable (optional) enable/disable sorting on columns. This property is higher priority than global sortable property Boolean
sortFn (optional) custom sort function. If you want to supply your own sort function you can use this property to supply it. Function
      // 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));
        }
      }  
      
filterable (optional) enables filtering on column (By default, creates a text input) Boolean
filterValue (optional) allows specifying a pre-defined value for column filter String
globalSearchDisabled (optional) if true, the column will be ignored by global search Boolean
placeholder placeholder to use for filter input String
filterDropdown provides a dropdown for filtering instead of a text input Boolean
filterOptions required for filterDropdown provides options to dropdown filter array: filterOptions: ['Blue', 'Red', 'Yellow'] or
          filterOptions: [  
            { value: 'n', text: 'Inactive' },  
            { value: 'y', text: 'Active' },  
            { value: 'c', text: 'Check' }  
          ],
      
filter (optional) Custom filter, function of two variables: function(data, filterString), should return true if data matches the filterString, otherwise false.
    filter: 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.
formatFn (optional) Allows for custom format of values, function(value), should return the formatted value to display.
    formatFn: function(value) {
      return '$' + value;
    }
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'
hidden (optional) allow hiding a column on table Boolean
tdClass (optional) provide custom class(es) to the td example: tdClass: 'text-center'
thClass (optional) provide custom class(es) to the th example: thClass: 'custom-th-style'

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 Screenshot

.table .table-bordered

Table Bordered Screenshot

.table .table-stripped

Table Bordered Striped Screenshot

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

Table Bordered Striped Screenshot

Authors

License

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

Acknowledgments

Inspiration taken from

About

A simple, clean data table for vuejs with essential features like sorting, column filtering, pagination etc

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 50.9%
  • JavaScript 48.8%
  • HTML 0.3%