Translation enhancement to docs

README.md

@@ -1,11 +1,11 @@
 # Vue Datasource
-#### A Vue.js component to create tables from Server Side. Compatible with Vue 2.x and Laravel
+#### A Vue.js server side component to create tables. Compatible with Vue 2.x and Laravel
 
 ### Demo
 
 Temporal: http://recordit.co/F9c92b277R
 
-Coming soon live demo ...
+Live demo coming soon ....
 
 ### Install/Usage
 ```
@@ -53,43 +53,117 @@ new Vue({
 ### Available Props
 | Prop        | Type    | Default | Description                                                 |
 |-------------|---------|---------|-------------------------------------------------------------|
-| tableData   | Array   |         | The table information to display                            |
-| language    | String  | es      | Defines the language with which the table will be displayed |
-| columns     | Array   |         | Columns to display in table                                 |
-| pagination  | Object  |         | Information about data collection to paginate               |
-| actions     | Array   |         | Buttons to perform action on click event                    |
+| table-data  | Array   |         | Table information                                           |
+| language    | String  | es      | Defines the table labels language                           |
+| columns     | Array   |         | Columns to display                                          |
+| pagination  | Object  |         | Pagination information about the table data ([structure] (#pagination-structure))   |
+| actions     | Array   |         | Action buttons ([structure] (#action-event-sctructure))                   |
 
 ### Available Events
-| Event       | Description                                    |
-|-------------|------------------------------------------------|
-| change      | Return the limit per page and the current page |
-| searching   | Return the string to search                    |
+| Event       | Description                                                                                         |
+|-------------|-----------------------------------------------------------------------------------------------------|
+| change      | Handle show limit changed. Gets object with new show limit and current page `{perpage: 10, page: 2}`|
+| searching   | Handles search input. Gets string as parameter                                                      |
 
-### Render column value with custom format
-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.
+### Columns
+Each column object needs a `name` and `key` attributes.
 ```javascript
 { 
     ...,
     columns: [
         {
-            name: 'Name', // Header name column
-            // Name of column on table. If you are working in Laravel 
-            // you can access the relationships using 'relation.key'
-            key: 'name', 
-            render(value) {
+            name: 'Name', // Table column name to display
+            key: 'name', // Key name from row object
+        }
+    ]
+}
+```
+
+For Laravel users, you can access relationships through the `key` attribute. Lets say we have the following object in our users array.
+
+```javascript
+[
+    ...,
+    {
+        name: 'Foo',
+        last_name: 'Bar'
+        role_id: 1,
+        role: {
+            name: 'admin'
+        }
+    }
+]
+```
+
+To get the user's role we would need to define in our columns array:
+```javascript
+{ 
+    ...,
+    columns: [
+        {
+            name: 'Role',
+            key: 'role.name'
+        }
+    ]
+}
+```
+
+
+### Render column
+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.
+```javascript
+{ 
+    ...,
+    columns: [
+        {
+            name: 'Name',
+            key: 'name',
+            render(value) { // Render callback
                 return `Enginner ${value}`;
             }
         }
     ]
 }
 ```
 
+### Pagination Structure
+```javascript
+{
+    ...,
+    pagination: {
+        total: 25, // Number of total rows (default 0)
+        per_page: 15, // Number of rows to show (default 15)
+        current_page: 1, // Actual page
+        last_page: 2, // Last page
+        from: 1, // Beginning of visible rows
+        to: 15 // End of visible rows
+    }
+}
+``` 
+
+### Action Event Sctructure
+```javascript
+{
+    ...,
+    actions: [
+        {
+            text: 'Click me', // Button label
+            icon: 'glyphicon glyphicon-check', // Button icon
+            class: 'btn-primary', // Button class (background color)
+            event(e, row) { // Event handler callback. Gets event instace and selected row
+                console.log('Click row: ', row); // If no row is selected, row will be NULL
+            }
+        }
+    ]
+}
+```
+
 ### Implementation examples
 - Using Laravel 5.3 and pagination: [laravel-datasource-example](https://github.com/coderdiaz/laravel-datasource-example).
 
-_You can add implementations send me your PR._
 
 ### Contributions 
 All contributions are welcome send your PR and Issues.
 
-#### Created by Javier Diaz
+##### Created by Javier Diaz. Translation enhancement by [itsuwaribito] (https://github.com/itsuwaribito)
+

src/example.js

@@ -126,7 +126,7 @@ new Vue({
           icon: 'glyphicon glyphicon-pencil',
           class: 'btn-primary',
           event(e, row) {
-            console.warn('Are you clicked me?', e);
+            console.warn('Did clicked me?', e);
             if(row == null) {
               console.info('Ups.. data not found :(')
             } else {
@@ -168,10 +168,10 @@ new Vue({
   },
   methods: {
     changePage(values) {
-      alert(`Show limit is changed, the new limit is ${values.perpage} and the current page is ${values.page}`);
+      alert(`Show limit changed, the new limit is ${values.perpage} and the current page is ${values.page}`);
     },
     onSearch(searchQuery) {
-      alert(`Are you find this? ${searchQuery}`);
+      alert(`Did you find this? ${searchQuery}`);
     }
   }
 });