Vuejs table component

Datatable component for redering paginated and searchable tables.

Version: 1.2.9 Updated: 04/05/2018

By: m-bryo License: MIT

Downloads Last 30 Days: 155

vuejs-table-component

npm npm npm Build Status Codecov npm

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

Categories: Vue js