Skip to content

Commit a2ff167

Browse files
paulpflugpaulpflug
committed
first commit
0 parents  commit a2ff167

15 files changed

+4722
-0
lines changed

‎.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
node_modules
2+
*.sublime-project
3+
*.sublime-workspace
4+
npm-debug.log
5+
build
6+
dev/index.js
7+
static
8+
*.js
9+
!/index.js

‎.npmignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
*.sublime-project
3+
*.sublime-workspace
4+
npm-debug.log
5+
dev/index.js
6+
static

‎README.md

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
# vue-data-table
2+
3+
A high-customizable data-table based on [vue-clusterize](https://github.com/vue-comps/vue-clusterize)
4+
5+
Has invisible pagination with dynamic data, pinned columns and template based header / cells.
6+
7+
### [Demo](https://vue-comps.github.io/vue-data-table/)
8+
9+
# Disclaimer
10+
11+
Only for [**webpack**](https://webpack.github.io/) workflows.
12+
13+
**No jQuery dependency**
14+
15+
# Install
16+
17+
```sh
18+
npm install --save-dev vue-data-table
19+
```
20+
"data-table": require "../src/data-table.vue"
21+
"data-table-column": require "../src/data-table-column.vue"
22+
## Usage
23+
```coffee
24+
# link the components up
25+
components:
26+
"data-table": require "vue-data-table/data-table"
27+
"data-table-column": require "vue-data-table/data-table-column"
28+
# or ES6
29+
import {dataTable,dataTableColumn} from "vue-data-table"
30+
components: {
31+
"data-table": dataTable
32+
"data-table-column": dataTableColumn
33+
}
34+
```
35+
```html
36+
<data-table :height="200" :data="dataSet">
37+
<data-table-column name="name" :width=80 pinned>
38+
{{data.first + " " + data.last}}
39+
<span slot="header"> Name (first + last)</span>
40+
</data-table-column>
41+
</data-table>
42+
```
43+
For examples see [`dev/`](https://github.com/vue-comps/vue-data-table/tree/master/dev).
44+
45+
#### Props
46+
##### data-table
47+
| Name | type | default | description |
48+
| ---:| --- | ---| --- |
49+
| binding-name | String | "data" | name to access the data in your template |
50+
| height | Number | null | Height of the clusterize element |
51+
| auto-height | Boolean | false | If autoheight should be used (see below) |
52+
| manual-start | Boolean | false | rendering doesn't start on `ready` (call `start` on the component instance instead)|
53+
| data | Array | [] | static data to render |
54+
| scrollTop | Number | 0 | sets scrollTop |
55+
| scrollLeft | Number | 0 | sets scrollLeft |
56+
57+
##### data-table-column
58+
| Name | type | default | description |
59+
| ---:| --- | ---| --- |
60+
| name | String | - | (required) name of the column. Used as default for the header. Must be unique |
61+
| style | Object | {whiteSpace:"nowrap"} | style for the header of the column. |
62+
| pinned | Boolean | false | column will be on the left, always visible |
63+
| noResize | Boolean | false | disable resize of this column |
64+
| width | Number | -1 | initial width of the column (defaults to width of the header) |
65+
| minWidth | Number | -1 | minimal width of the column (defaults to width of the header) |
66+
| maxWidth | Number | Number.MAX_VALUE | maximal width of the column |
67+
| defaultWidth | Number or String | "auto" | width of the column on double click on resizer. "auto" looks for content width of the column |
68+
69+
## Autoheight
70+
71+
There are two ways data-table can be used, either use a fixed height:
72+
```html
73+
<data-table :data="dataSet" :height="400">
74+
```
75+
76+
Or use autoheight:
77+
```html
78+
<html style="height:100%">
79+
<body style="height:100%">
80+
<div style="position:relative">
81+
<data-table :data="dataSet" auto-height>
82+
```
83+
In this case data-table will always fill the nearest parent element with either `position:relative;` or `position:absolute;`
84+
Keep in mind, that `padding` of the parent will be ignored. If you need a padding, use a wrapper `<div>`.
85+
86+
## Dynamic data
87+
88+
The data-table instance emits to events to get dynamic data:
89+
```html
90+
<data-table @get-data="getData" @get-data-count="getDataCount">
91+
```
92+
```js
93+
methods:
94+
# For the first datapiece, first and last will be 0
95+
getData: function(first,last,cb) {
96+
# somehow get data
97+
cb(data)
98+
}
99+
getDataCount: function(cb) {
100+
cb(dataCount)
101+
}
102+
```
103+
# Development
104+
Clone repository.
105+
```sh
106+
npm install
107+
npm run test
108+
```
109+
Browse to `http://localhost:8080/`.
110+
111+
## To-Do
112+
- allow more than one (fixed-width) object per row + autosize to adjust #objects to actual width.
113+
- use html5 history mode or document.store to save scroll position
114+
115+
## License
116+
Copyright (c) 2016 Paul Pflugradt
117+
Licensed under the MIT license.

‎dev/autoHeight.vue

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template lang="pug">
2+
.container
3+
div(style="position: fixed;right: 4px; padding: 4px; background: white; border: 1px solid black")
4+
p Resize window to see autoHeight!
5+
a(href="https://github.com/vue-comps/vue-data-table/blob/master/dev/autoHeight.vue") source
6+
data-table(v-ref:dt auto-height v-bind:data="dataSet")
7+
data-table-column(name="name" v-bind:width=80 pinned) {{data.first + " " + data.last}}
8+
span(slot="header") Name (first + last)
9+
data-table-column(name="age") {{data.age}}
10+
span(slot="header") age
11+
vue-icon(name="octicon-info" size=12 style="margin-left:2px")
12+
tooltip(position="body") Custom header with icon and tooltip
13+
data-table-column(name="registered") {{data.registered}}
14+
tooltip(position="body") {{data.about}}
15+
span(slot="header") registered
16+
vue-icon(name="octicon-info" size=12 style="margin-left:2px")
17+
tooltip(position="body") Custom cell with tooltip
18+
data-table-column(name="longitude") {{data.longitude}}
19+
data-table-column(name="latitude") {{data.latitude}}
20+
data-table-column(name="address") {{data.address}}
21+
data-table-column(name="phone") {{data.phone}}
22+
data-table-column(name="email") {{data.email}}
23+
data-table-column(name="company") {{data.company}}
24+
</template>
25+
26+
<script lang="coffee">
27+
module.exports =
28+
components:
29+
"data-table": require "../src/data-table.vue"
30+
"data-table-column": require "../src/data-table-column.vue"
31+
"vue-icon": require "vue-icons/icon"
32+
"tooltip": require("vue-comps-tooltip")
33+
data: ->
34+
dataSet: require "./data.json"
35+
</script>
36+
37+
<style lang="stylus">
38+
.dt-main
39+
border 1px solid black
40+
.dt-header,
41+
.dt-cell
42+
border-right 1px solid black
43+
padding 2px
44+
.dt-header
45+
border-bottom 1px solid black
46+
.dt-cell
47+
border-top 1px solid black
48+
overflow: hidden
49+
.dt-headers-pinned,
50+
.dt-content-pinned
51+
background #eee
52+
.tooltip
53+
background #fff
54+
border 1px solid black
55+
padding 4px
56+
</style>

‎dev/basic.vue

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template lang="pug">
2+
.container
3+
a(href="https://github.com/vue-comps/vue-data-table/blob/master/dev/basic.vue") source
4+
data-table(v-ref:dt v-bind:height="200" v-bind:data="dataSet")
5+
data-table-column(name="name" v-bind:width=80 pinned) {{data.first + " " + data.last}}
6+
span(slot="header") Name (first + last)
7+
data-table-column(name="age") {{data.age}}
8+
span(slot="header") age
9+
vue-icon(name="octicon-info" size=12 style="margin-left:2px")
10+
tooltip(position="body") Custom header with icon and tooltip
11+
data-table-column(name="registered") {{data.registered}}
12+
tooltip(position="body") {{data.about}}
13+
span(slot="header") registered
14+
vue-icon(name="octicon-info" size=12 style="margin-left:2px")
15+
tooltip(position="body") Custom cell with tooltip
16+
data-table-column(name="longitude") {{data.longitude}}
17+
data-table-column(name="latitude") {{data.latitude}}
18+
data-table-column(name="address") {{data.address}}
19+
data-table-column(name="phone") {{data.phone}}
20+
data-table-column(name="email") {{data.email}}
21+
data-table-column(name="company") {{data.company}}
22+
</template>
23+
24+
<script lang="coffee">
25+
module.exports =
26+
components:
27+
"data-table": require "../src/data-table.vue"
28+
"data-table-column": require "../src/data-table-column.vue"
29+
"vue-icon": require "vue-icons/icon"
30+
"tooltip": require("vue-comps-tooltip")
31+
data: ->
32+
dataSet: require "./data.json"
33+
</script>
34+
35+
<style lang="stylus">
36+
.dt-main
37+
border 1px solid black
38+
.dt-header,
39+
.dt-cell
40+
border-right 1px solid black
41+
padding 2px
42+
.dt-header
43+
border-bottom 1px solid black
44+
.dt-cell
45+
border-top 1px solid black
46+
overflow: hidden
47+
.dt-headers-pinned,
48+
.dt-content-pinned
49+
background #eee
50+
.tooltip
51+
background #fff
52+
border 1px solid black
53+
padding 4px
54+
</style>

0 commit comments

Comments
 (0)