https://github.com/vue-comps/vue-data-table
A high-customizable data-table based on vue-clusterize
https://github.com/vue-comps/vue-data-table
Last synced: 8 months ago
JSON representation
A high-customizable data-table based on vue-clusterize
- Host: GitHub
- URL: https://github.com/vue-comps/vue-data-table
- Owner: vue-comps
- Created: 2016-06-20T18:31:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-07-27T09:39:50.000Z (over 9 years ago)
- Last Synced: 2025-02-26T03:34:55.026Z (9 months ago)
- Language: Vue
- Size: 147 KB
- Stars: 47
- Watchers: 4
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-vue-refactor - vue-data-table ★7
- awesome-vuejs - vue-data-table ★7 - customizable data-table based on vue-clusterize (Awesome Vue.js / Component Collections)
README
# vue-data-table
A high-customizable data-table based on [vue-clusterize](https://github.com/vue-comps/vue-clusterize)
Has invisible pagination with dynamic data, pinned columns and template based header / cells.
### [Demo](https://vue-comps.github.io/vue-data-table/)
# Disclaimer
Only for [**webpack**](https://webpack.github.io/) workflows.
**No jQuery dependency**
# Install
```sh
npm install --save-dev vue-data-table
```
## Usage
```coffee
# 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
}
```
```html
{{data.first + " " + data.last}}
Name (first + last)
```
For examples see [`dev/`](https://github.com/vue-comps/vue-data-table/tree/master/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:
```html
```
Or use autoheight:
```html
```
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 ``.
## Dynamic data
The data-table instance emits to events to get dynamic data:
```html
```
```js
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.
```sh
npm install
npm run test
```
Browse to `http://localhost:8080/`.
## License
Copyright (c) 2016 Paul Pflugradt
Licensed under the MIT license.