Merge pull request #52 from coderdiaz/fix/jsx-render-column

fix/jsx-render-column

Author: coderdiaz

src/App.vue

@@ -32,8 +32,8 @@ export default {
         {
           name: 'Last Name',
           key: 'last_name',
-          render: function (value) {
-            return `<strong>${value}</strong>`
+          render: (value, row) => {
+            return <strong><i>Epic</i> {value} <img src={row.avatar} width="20" /></strong>
           }
         }
       ],

src/components/Pagination.vue

@@ -8,18 +8,18 @@ export default {
       <div class="vue-pagination">
         <nav>
           <ul class="pagination">
-            <li class={{ disabled: this.pages.current_page === 1 }}>
-              <a href="#" on-click={ (e) => this.firstPage(e) }><span aria-hidden="true">&laquo;&laquo;</span></a>
+            <li class={{disabled: this.pages.current_page === 1}}>
+              <a href="#" on-click={(e) => this.firstPage(e)}><span aria-hidden="true">&laquo;&laquo;</span></a>
             </li>
             <li class={{ disabled: this.pages.current_page === 1 }}>
-              <a href="#" on-click={ (e) => this.previous(e) }><span aria-hidden="true">&laquo;</span></a>
+              <a href="#" on-click={(e) => this.previous(e)}><span aria-hidden="true">&laquo;</span></a>
             </li>
-            { this.paginationItems }
-            <li class={{ disabled: this.pages.current_page === this.pages.last_page }}>
-              <a href="#" on-click={ (e) => this.next(e) }><span aria-hidden="true">&raquo;</span></a>
+            {this.paginationItems}
+            <li class={{disabled: this.pages.current_page === this.pages.last_page}}>
+              <a href="#" on-click={(e) => this.next(e)}><span aria-hidden="true">&raquo;</span></a>
             </li>
             <li class={{ disabled: this.pages.current_page === this.pages.last_page }}>
-              <a href="#" on-click={ (e) => this.lastPage(e, this.pages.last_page) }><span aria-hidden="true">&raquo;&raquo;</span></a>
+              <a href="#" on-click={(e) => this.lastPage(e, this.pages.last_page)}><span aria-hidden="true">&raquo;&raquo;</span></a>
             </li>
           </ul>
         </nav>
@@ -34,8 +34,8 @@ export default {
     items: DatasourceUtils.gettingItems,
     paginationItems () {
       return this.items.map((item, index) => {
-        return <li class={{ active: (this.pages.current_page === item) }}>
-          <a href="#" on-click={ (e) => this.change(e, item) }>{ item }</a>
+        return <li class={{active: (this.pages.current_page === item)}}>
+          <a href="#" on-click={(e) => this.change(e, item)}>{item}</a>
         </li>
       })
     }

src/components/ServerDatasource.vue

@@ -1,7 +1,7 @@
 <script>
 import DatasourceUtils from '../utils/DatasourceUtils'
 import Pagination from './Pagination.vue'
-import { EventBus } from '../utils/EventBus'
+import {EventBus} from '../utils/EventBus'
 export default {
   name: 'ServerDatasource',
   components: {Pagination},
@@ -12,13 +12,13 @@ export default {
           <div class="panel-heading">
             <div class="form-inline">
               <div class="form-group pull-left">
-                <label class="control-label pr2">{ this.translation.limit }</label>
-                <select on-change={ (e) => this.sync('perpage', parseInt(e.target.value)) } class="form-control" number>
-                  { this.limitOptions }
+                <label class="control-label pr2">{this.translation.limit}</label>
+                <select on-change={(e) => this.sync('perpage', parseInt(e.target.value))} class="form-control" number>
+                  {this.limitOptions}
                 </select>
               </div>
               <div class="form-group pull-right">
-                <input class="form-control mr1" type="text" on-input={ (e) => this.searching(e) } placeholder={this.translation.placeholder_search} />
+                <input class="form-control mr1" type="text" on-input={(e) => this.searching(e)} placeholder={this.translation.placeholder_search} />
               </div>
               <div class="clearfix"></div>
             </div>
@@ -27,23 +27,23 @@ export default {
             <table class="table table-striped">
               <thead>
                 <tr>
-                  { this.columnItems }
+                  {this.columnItems}
                 </tr>
               </thead>
               <tbody>
-                { this.columnObjects }
+                {this.columnObjects}
                 <tr>
-                  <td class="text-center warning" colspan={ this.columns.length }>{ this.tableInfo }</td>
+                  <td class="text-center warning" colspan={this.columns.length}>{this.tableInfo}</td>
                 </tr>
               </tbody>
             </table>
           </div>
           <div class="panel-footer">
             <div class="pull-left btn-group btn-group-actions">
-              { this.actionsObject }
+              {this.actionsObject}
             </div>
             <div class="pull-right">
-              <pagination pages={ this.pagination }></pagination>
+              <pagination pages={this.pagination}></pagination>
             </div>
             <div class="clearfix"></div>
           </div>
@@ -131,35 +131,35 @@ export default {
   computed: {
     limitOptions () {
       return this.limits.map((limit, index) => {
-        return <option value={ limit } selected={ parseInt(this.perpage) === parseInt(limit) }>{ limit }</option>
+        return <option value={limit} selected={parseInt(this.perpage) === parseInt(limit)}>{limit}</option>
       })
     },
     columnItems () {
       return this.columns.map((column, index) => {
-        return <th>{ column.name }</th>
+        return <th>{column.name}</th>
       })
     },
     columnObjects () {
       if (this.source.length === 0) {
         return <tr class="text-center">
-          <td colspan={ this.columns.length }>{ this.translation.records_not_found }</td>
+          <td colspan={this.columns.length}>{this.translation.records_not_found}</td>
         </tr>
       } else {
         return this.source.map((row, index) => {
           let columns = this.columns.map((column, index) => {
-            return <td domPropsInnerHTML={ this.fetchFromObject(row, column.key, column.render) }></td>
+            return <td>{this.fetchFromObject(row, column.key, column.render)}</td>
           })
-          return <tr class={{ success: index === this.indexSelected }} on-click={ (e) => this.selectRow(e, row, index) }>{ columns }</tr>
+          return <tr class={{success: index === this.indexSelected}} on-click={(e) => this.selectRow(e, row, index)}>{columns}</tr>
         })
       }
     },
     actionsObject () {
       return this.actions.map((action, index) => {
         try {
           if (action.show(this.selected)) {
-            return <button class={this.dynamicClass('btn', action.class)} type="button" on-click={ (e) => action.event(e, this.selected) }>
-              <i class={ this.dynamicClass('pr1', action.icon) }></i>
-              { action.text }
+            return <button class={this.dynamicClass('btn', action.class)} type="button" on-click={(e) => action.event(e, this.selected)}>
+              <i class={this.dynamicClass('pr1', action.icon)}></i>
+              {action.text}
             </button>
           }
         } catch (ex) {

src/utils/DatasourceUtils.js

@@ -13,7 +13,7 @@ export default {
       return this.fetchFromObject(obj[column.substring(0, _index)], column.substr(_index + 1))
     }
     if (typeof render !== 'undefined') {
-      return render(obj[column])
+      return render(obj[column], obj)
     }
     return obj[column]
   },