Skip to content
This repository was archived by the owner on Jun 10, 2021. It is now read-only.

Commit 529a7cb

Browse files
itsuwaribitocoderdiaz
itsuwaribito
authored and
coderdiaz
committed
Translation enhancement to docs
1 parent 6e2c2f9 commit 529a7cb

File tree

2 files changed

+97
-23
lines changed

2 files changed

+97
-23
lines changed

‎README.md

+94-20
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# Vue Datasource
2-
#### A Vue.js component to create tables from Server Side. Compatible with Vue 2.x and Laravel
2+
#### A Vue.js server side component to create tables. Compatible with Vue 2.x and Laravel
33

44
### Demo
55

66
Temporal: http://recordit.co/F9c92b277R
77

8-
Coming soon live demo ...
8+
Live demo coming soon ....
99

1010
### Install/Usage
1111
```
@@ -53,43 +53,117 @@ new Vue({
5353
### Available Props
5454
| Prop | Type | Default | Description |
5555
|-------------|---------|---------|-------------------------------------------------------------|
56-
| tableData | Array | | The table information to display |
57-
| language | String | es | Defines the language with which the table will be displayed |
58-
| columns | Array | | Columns to display in table |
59-
| pagination | Object | | Information about data collection to paginate |
60-
| actions | Array | | Buttons to perform action on click event |
56+
| table-data | Array | | Table information |
57+
| language | String | es | Defines the table labels language |
58+
| columns | Array | | Columns to display |
59+
| pagination | Object | | Pagination information about the table data ([structure] (#pagination-structure)) |
60+
| actions | Array | | Action buttons ([structure] (#action-event-sctructure)) |
6161

6262
### Available Events
63-
| Event | Description |
64-
|-------------|------------------------------------------------|
65-
| change | Return the limit per page and the current page |
66-
| searching | Return the string to search |
63+
| Event | Description |
64+
|-------------|-----------------------------------------------------------------------------------------------------|
65+
| change | Handle show limit changed. Gets object with new show limit and current page `{perpage: 10, page: 2}`|
66+
| searching | Handles search input. Gets string as parameter |
6767

68-
### Render column value with custom format
69-
To show the value of a column with a custom format uses the render property, this will allow you to get the original value and return it in the way you define.
68+
### Columns
69+
Each column object needs a `name` and `key` attributes.
7070
```javascript
7171
{
7272
...,
7373
columns: [
7474
{
75-
name: 'Name', // Header name column
76-
// Name of column on table. If you are working in Laravel
77-
// you can access the relationships using 'relation.key'
78-
key: 'name',
79-
render(value) {
75+
name: 'Name', // Table column name to display
76+
key: 'name', // Key name from row object
77+
}
78+
]
79+
}
80+
```
81+
82+
For Laravel users, you can access relationships through the `key` attribute. Lets say we have the following object in our users array.
83+
84+
```javascript
85+
[
86+
...,
87+
{
88+
name: 'Foo',
89+
last_name: 'Bar'
90+
role_id: 1,
91+
role: {
92+
name: 'admin'
93+
}
94+
}
95+
]
96+
```
97+
98+
To get the user's role we would need to define in our columns array:
99+
```javascript
100+
{
101+
...,
102+
columns: [
103+
{
104+
name: 'Role',
105+
key: 'role.name'
106+
}
107+
]
108+
}
109+
```
110+
111+
112+
### Render column
113+
This callback will modify the data for various operations. Such as applying a specific format or an arithmetic operation to the column value and return it.
114+
```javascript
115+
{
116+
...,
117+
columns: [
118+
{
119+
name: 'Name',
120+
key: 'name',
121+
render(value) { // Render callback
80122
return `Enginner ${value}`;
81123
}
82124
}
83125
]
84126
}
85127
```
86128

129+
### Pagination Structure
130+
```javascript
131+
{
132+
...,
133+
pagination: {
134+
total: 25, // Number of total rows (default 0)
135+
per_page: 15, // Number of rows to show (default 15)
136+
current_page: 1, // Actual page
137+
last_page: 2, // Last page
138+
from: 1, // Beginning of visible rows
139+
to: 15 // End of visible rows
140+
}
141+
}
142+
```
143+
144+
### Action Event Sctructure
145+
```javascript
146+
{
147+
...,
148+
actions: [
149+
{
150+
text: 'Click me', // Button label
151+
icon: 'glyphicon glyphicon-check', // Button icon
152+
class: 'btn-primary', // Button class (background color)
153+
event(e, row) { // Event handler callback. Gets event instace and selected row
154+
console.log('Click row: ', row); // If no row is selected, row will be NULL
155+
}
156+
}
157+
]
158+
}
159+
```
160+
87161
### Implementation examples
88162
- Using Laravel 5.3 and pagination: [laravel-datasource-example](https://github.com/coderdiaz/laravel-datasource-example).
89163

90-
_You can add implementations send me your PR._
91164

92165
### Contributions
93166
All contributions are welcome send your PR and Issues.
94167

95-
#### Created by Javier Diaz
168+
##### Created by Javier Diaz. Translation enhancement by [itsuwaribito] (https://github.com/itsuwaribito)
169+

‎src/example.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ new Vue({
126126
icon: 'glyphicon glyphicon-pencil',
127127
class: 'btn-primary',
128128
event(e, row) {
129-
console.warn('Are you clicked me?', e);
129+
console.warn('Did clicked me?', e);
130130
if(row == null) {
131131
console.info('Ups.. data not found :(')
132132
} else {
@@ -168,10 +168,10 @@ new Vue({
168168
},
169169
methods: {
170170
changePage(values) {
171-
alert(`Show limit is changed, the new limit is ${values.perpage} and the current page is ${values.page}`);
171+
alert(`Show limit changed, the new limit is ${values.perpage} and the current page is ${values.page}`);
172172
},
173173
onSearch(searchQuery) {
174-
alert(`Are you find this? ${searchQuery}`);
174+
alert(`Did you find this? ${searchQuery}`);
175175
}
176176
}
177177
});

0 commit comments

Comments
 (0)