vue-data-tablee

A very simple table component.
2,441 42
vue table data-grid data-table data-tablee
Install
npm install vue-data-tablee
Latest Version:0.13.0
Vue:2
License:MIT
Last Updated:Aug 2, 2018
Links: GitHub  ·  npm
Maintainer: vitorluizc

Vue Data Tablee

JavaScript Style Guide FOSSA Status

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

Screenshot of a styled DataTable 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.

FOSSA Status

Related Packages

vueye-table

A Vue framework for data tables and spreadsheets: a complete, themeable data tab...

3,566 111
data-grid data-table table vue spreadsheet vue3
@gits-id/table

GITS DataTable Table Component

3,591
data-table table gits ui-component
@freegridjs/vue

Vue 3 component for FreeGrid, the fast data grid. Free core; paid features free...

2,855
data-grid table vue grid
ez-tables

Vue3 + Element Plus table components (Table, TableActionDropdown & TableQueryWra...

1,417
data-table table element-plus vue3
@zlonneman/vue-data-table

Data table with customizable features including inline editing, summary data, pa...

1,008
data-grid data-table vue grid

Version History

Version Released Vue License
0.13.0 ^2.5.16 MIT
0.12.1 ^2.5.13 MIT
0.12.0 ^2.5.13 MIT
0.11.0 ^2.5.13 MIT
0.10.2 ^2.5.13 MIT