Vue Data Tablee Save Abandoned
Yeap, another Vue table component.
Project README
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.
Open Source Agenda is not affiliated with "Vue Data Tablee" Project. README Source: VitorLuizC/vue-data-tablee
Stars
42
Open Issues
4
Last Commit
5 years ago
License
Open Source Agenda Badge
