Simple Pretty Table Component For Vue.js – Data Tablee

Simple Pretty Table Component For Vue.js – Data Tablee

A simple, lightweight, pretty nice table component for Vue.js that features dynamic rendering, data sorting and more.

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

Github Repository

Tags: #VueJs