vuejs-table-component

A vue component for rendering datatables. With customizable sorting and searching capabilities.

Live Demo

Works with Vue 2.*

Installation

Install via CDN

<script src="https://unpkg.com/accounting-js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-table-component"></script>

<script>
  Vue.use(Datatable.default)
</script>

Install via NPM

$ npm install vuejs-table-component --save

Register as Component

import Vue from 'vue'
import Datatable from 'vuejs-table-component'

export default {
  name: 'App',

  components: {
    Datatable
  }
}

Register as Plugin

import Vue from 'vue'
import Datatable from 'vuejs-table-component'

Vue.use(Datatable)

Usage

Quick example

<template>
  <datatable columns="columns" dataset="rows"></datatable>
</template>

<script>
import Datatable from 'vuejs-table-component'

export default {
  name: 'App',

  components: {
    Datatable
  },

  data: () => ({
    price: ''
  }),
}
</script>

Props

Props	Description	Required	Type	Default
columns	Corresponding columns of the table	true	Array	-
dataset	Data to be used for pupulating the table	true	Array	-
perpage	List of page sizes	false	Array	[10, 50, 100]
indices	Fields that should be searchable by search	false	Array	[]
search	A v-model value binded with a search field	false	String	''

License