allow for dynamic vue template rendering

Author: noogen

dist/index.js

@@ -64,12 +64,15 @@ export default {
         email: { label: 'Email' },
         address: {
           label: 'Address',
+          template: '{{ data.street }}, {{ data.suite }}, {{ data.city }} {{ data.zipcode }}'
+        },
+        phone: { label: 'Phone' },
+        website: {
+          label: 'Website',
           render: (data) => {
-            return `${data.street}, ${data.suite}, ${data.city} ${data.zipcode}`
+            return `https://${ data }`
           }
         },
-        phone: { label: 'Phone' },
-        website: { label: 'Website' },
         actions: {
           label: 'Actions',
           defaultContent: '<a href="javascript:void(0);" data-action="edit" class="btn btn-primary btn-sm"><i class="mdi mdi-square-edit-outline"></i> Edit</a>' +

dist/index.js.map

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=60a271261f3c9348e668",
-    "/index.js.map": "/index.js.map?id=e728bc86dc8617d43c0f"
+    "/index.js": "/index.js?id=915839e14c4389063946",
+    "/index.js.map": "/index.js.map?id=40d6d135deb585d76b5c"
 }

example/App.vue

@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTables.net wrapper component",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "author": "[email protected]",
   "license": "MIT",
   "main": "lib/index.js",

lib/index.js

@@ -132,6 +132,24 @@ export default {
           col.orderable = field.sortable
         }
 
+        if (field.template) {
+          // must be string template
+          const res = Vue.compile(`<div>${field.template}</div>`)
+          field.render = (data, type, row, meta) => {
+            const comp = new Vue({
+              data: {
+                  data: data,
+                  type: type,
+                  row: row,
+                  meta: meta
+              },
+              render: res.render,
+              staticRenderFns: res.staticRenderFns
+            }).$mount()
+            return jq(comp.$el).html()
+          }
+        }
+
         if (field.render) {
           col.render = field.render
         }