From 5dc65bd83c86f43150a6ade16734386ddd33db14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jairo=20Nava=20Maga=C3=B1a?= Date: Thu, 12 Jan 2017 14:09:40 -0600 Subject: [PATCH] Translation enhancement to docs --- README.md | 114 ++++++++++++++++++++++++++++++++++++++++--------- src/example.js | 6 +-- 2 files changed, 97 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index ff16550..dcc3d47 100644 --- a/README.md +++ b/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,30 +53,72 @@ 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}`; } } @@ -84,12 +126,44 @@ To show the value of a column with a custom format uses the render property, thi } ``` +### 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) + diff --git a/src/example.js b/src/example.js index d21f63a..b1d2c67 100644 --- a/src/example.js +++ b/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}`); } } }); \ No newline at end of file