Skip to content
A high-customizable data-table based on vue-clusterize
Branch: master
Clone or download
Latest commit d8270e0 Jul 27, 2016
Type Name Latest commit message Commit time
Failed to load latest commit information.
src first commit Jun 20, 2016
test first commit Jun 20, 2016
.gitignore first commit Jun 20, 2016
.npmignore first commit Jun 20, 2016 update readme Jun 22, 2016
package.json 0.1.1 Jul 27, 2016


A high-customizable data-table based on vue-clusterize

Has invisible pagination with dynamic data, pinned columns and template based header / cells.



Only for webpack workflows.

No jQuery dependency


npm install --save-dev vue-data-table


# link the components up
  "data-table": require("vue-data-table/data-table")
  "data-table-column": require("vue-data-table/data-table-column")
# or ES6 import
import {dataTable,dataTableColumn} from "vue-data-table"
components: {
  "data-table": dataTable
  "data-table-column": dataTableColumn
<data-table :height="200" :data="dataSet">
  <data-table-column name="name" :width=80 pinned>
    {{data.first + " " + data.last}}
    <span slot="header"> Name (first + last)</span>

For examples see dev/.


Name type default description
binding-name String "data" name to access the data in your template
height Number null Height of the clusterize element
auto-height Boolean false If autoheight should be used (see below)
manual-start Boolean false rendering doesn't start on ready (call start on the component instance instead)
data Array [] static data to render
scroll-top Number 0 sets scrollTop
scroll-left Number 0 sets scrollLeft
Name type default description
name String - (required) name of the column. Used as default for the header. Must be unique
style Object {whiteSpace:"nowrap"} style for the header of the column.
pinned Boolean false column will be on the left, always visible
no-resize Boolean false disable resize of this column
width Number -1 initial width of the column (defaults to width of the header)
min-width Number -1 minimal width of the column (defaults to width of the header)
max-width Number Number.MAX_VALUE maximal width of the column
default-width Number or String "auto" width of the column on double click on resizer. "auto" looks for content width of the column


There are two ways data-table can be used, either use a fixed height:

<data-table :data="dataSet" :height="400">

Or use autoheight:

<html style="height:100%">
  <body style="height:100%">
    <div style="position:relative">
      <data-table :data="dataSet" auto-height>

In this case data-table will always fill the nearest parent element with either position:relative; or position:absolute; Keep in mind, that padding of the parent will be ignored. If you need a padding, use a wrapper <div>.

Dynamic data

The data-table instance emits to events to get dynamic data:

<data-table @get-data="getData" @get-data-count="getDataCount">
  # For the first datapiece, first and last will be 0
  getData: function(first,last,cb) {
      # somehow get data
  getDataCount: function(cb) {


Clone repository.

npm install
npm run test

Browse to http://localhost:8080/.


Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

You can’t perform that action at this time.