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

Here is a screenshot of a table created with this component:

Step 1: Install

Install from npm.

npm install vue-data-tablee

Step 2: Use

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'


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

  <data-table :rows="rows" :cols="cols" />

import { DataTable } from 'vue-data-tablee'

export default {
  components: { DataTable },

Component Props

Name Type Default About
cols Array.<Col> [] [Cols][4] 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][5].
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 ''.
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][5]. Stronger than global sort


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


Released under [MIT license][1].


Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.