Vue Data Tablee

Yeap, another Vue table component. This one is based on vue-good-table, a simple and pretty table component.

Install

Install from npm.

npm install vue-data-tablee

With Vue.use function declare vue-data-tablee components.

import 'vue-data-tablee/dist/vue-data-tablee.css'
import Vue from 'vue'
import DataTablee from 'vue-data-tablee'
 
Vue.use(DataTablee)

You can also import just components you need, without installing globally.

<template>
  <data-table :rows="rows" :cols="cols" />
</template>
 
<script>
import { DataTable } from 'vue-data-tablee'
 
export default {
  components: { DataTable },
  ...
}
</script>

Component Props

Name	Type	Default	About
cols	Array.<Col>	[]	Cols list.
rows	Array.<Object>	[]	Rows list.
align	'center' \| 'right' \| 'left'	'left'	Global column alignment option.
empty	String	''	Empty cell's character.
selectable	Boolean	false	Add checkbox column to select a row. It emits event on change
sort	Boolean \| Function.(a:*, b:*):Number	true	Global sort option. Could enable/disable sort or use a custom sort function.
sortExternal	Boolean	false	Only change sort and arrow. Useful to sort outsite component.

Cols properties

Name	Type	About
label	String	Column label (<th>{{ label }}</th>).
field	String	Property name, or property path. Ex 'user.contact.phone'.
align	'center' \| 'right' \| 'left'	Column alignment option. Stronger than global sort
width	Number	Column width.
hidden	Boolean	Defines if column is hidden.
headerClass	String	Adds this class to column header cell.
contentClass	String	Adds this class to columns content cells.
sort	Boolean \| Function.(a:*, b:*):Number	Could enable/disable column sort or use a custom sort function. Stronger than global sort

Events

Name	Payload	About
select	Array.<Object>	Emitted on select row (selectable option).
sort	{ column:Col, sortment:('ascending'\|'descending') }	Emitted on sort change.

License

Released under MIT license.