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.