@@ -31,50 +31,37 @@ $ npm install git+https://
[email protected] /coderdiaz/vue-datasource#2.0.0
31
31
32
32
``` html
33
33
<div id =" #app" >
34
- <datasource
35
- language =" en"
36
- :table-data =" information.data"
34
+ <server-datasource
35
+ source =" api_url"
37
36
:columns =" columns"
38
- :pagination =" information.pagination"
39
- :actions =" actions"
40
- v-on:change =" changePage"
41
- v-on:searching =" onSearch" ></datasource >
37
+ :actions =" actions" ></server-datasource >
42
38
</div >
43
39
```
44
40
45
41
``` javascript
46
- import Datasource from ' vue-datasource'
42
+ import { ServerDatasource } from ' vue-datasource'
47
43
48
44
new Vue ({
49
45
el: ' #app' ,
50
46
components: {
51
- Datasource
47
+ ServerDatasource
52
48
},
53
49
data () {
54
50
return {
55
- information: {
56
- pagination: {... },
57
- data: [... ]
58
- },
59
51
columns: [... ],
60
52
actions: [... ]
61
53
}
62
- },
63
- methods: {
64
- changePage (values ) {... },
65
- onSearch (searchQuery ) {... }
66
54
}
67
55
});
68
56
```
69
57
70
58
### Available Props
71
59
| Prop | Type | Default | Description |
72
60
| -------------| ---------| ----------------| -------------------------------------------------------------|
73
- | table-data | Array | | Table information |
61
+ | source | String | | API Url to get data |
74
62
| translation | Object | [ Object] | Defines the table labels language ([ structure] ( #translation-structure ) ) |
75
63
| limits | Array | [ 1,5,10,15,20] | Defines the limits to display |
76
64
| columns | Array | | Columns to display |
77
- | pagination | Object | | Pagination information about the table data ([ structure] ( #pagination-structure ) ) |
78
65
| actions | Array | | Action buttons ([ structure] ( #action-event-sctructure ) ) |
79
66
80
67
### Available Events
@@ -144,21 +131,6 @@ This callback will modify the data for various operations. Such as applying a sp
144
131
}
145
132
```
146
133
147
- ### Pagination Structure
148
- ``` javascript
149
- {
150
- ... ,
151
- pagination: {
152
- total: 25 , // Number of total rows (default 0)
153
- per_page: 15 , // Number of rows to show (default 15)
154
- current_page: 1 , // Actual page
155
- last_page: 2 , // Last page
156
- from: 1 , // Beginning of visible rows
157
- to: 15 // End of visible rows
158
- }
159
- }
160
- ```
161
-
162
134
### Translation Structure
163
135
``` javascript
164
136
{
@@ -194,6 +166,10 @@ This callback will modify the data for various operations. Such as applying a sp
194
166
]
195
167
}
196
168
```
169
+
170
+ ### Buy me a coffee
171
+ [ Give me thanks] ( http://paypal.me/coderdiaz )
172
+
197
173
### Development
198
174
199
175
``` bash
@@ -227,6 +203,9 @@ For detailed explanation on how things work, checkout the [guide](http://vuejs-t
227
203
### Contributions
228
204
All contributions are welcome send your PR and Issues.
229
205
206
+ ### Greatings
207
+ [ Vue Spinner by Greyby] ( https://github.com/greyby/vue-spinner )
208
+
230
209
### License
231
210
This is a open-source software licensed under the [ MIT license] ( https://raw.githubusercontent.com/coderdiaz/vue-datasource/master/LICENSE )
232
211
0 commit comments