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-tableUsage
# 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 testBrowse to http://localhost:8080/.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.
