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 dataTabledataTableColumn from "vue-data-table"components: "data-table": dataTable "data-table-column": dataTableColumn
{{data.first + " " + data.last}} Name (first + last)
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:
Or use autoheight:
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:
methods: # For the first datapiece first and last will be 0 { # somehow get data } { }
Development
Clone repository.
npm installnpm run test
Browse to http://localhost:8080/
.
License
Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.