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

README.md

vue-data-table

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

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

Demo

Disclaimer

Only for webpack workflows.

No jQuery dependency

Install

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

Usage

# link the components up
components:
  "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>
  </data-table-column>
</data-table>

For examples see dev/.

Props

data-table
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
data-table-column
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

Autoheight

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">
methods:
  # For the first datapiece, first and last will be 0
  getData: function(first,last,cb) {
      # somehow get data
      cb(data)
    }
  getDataCount: function(cb) {
    cb(dataCount)
  }

Development

Clone repository.

npm install
npm run test

Browse to http://localhost:8080/.

License

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

You can’t perform that action at this time.