Native column templating, sort-of

README.md

@@ -404,8 +404,8 @@ If you're like us, you want to write as little code as possible; as in, applicat
 3. Wrap individual action events you want to expose, or simply wrap with v-on="$listeners" to pipe all events from this component to your component.
 
 ## Roadmap
-- [ ] Native column templating.  It may be possible to natively template and render column with all @events wired up.  Still need to look into this.
-- [ ] Inline editable.  This will depend on native column templating capability.
+- [x] Native column templating.
+- [ ] Inline editable.
 - [ ] This library is inspired by both [Bootstrap-Vue](https://bootstrap-vue.js.org/) and [jQuery DataTables](https://datatables.net/).  Look into creating jQuery DataTables server-side items provider for [Bootstrap-Vue Table](https://bootstrap-vue.js.org/docs/components/table#field-definition-reference) component.  Since jQuery Datatables dependencies does not support server-side rendering (SSR), Bootstrap-Vue Table will likely be the answer.
 
 ## License

example/index.js

@@ -640,7 +640,7 @@ var myUniqueId = 1;
         }
 
         if (field.template) {
-          field.render = vm.compileTemplate(field.template);
+          field.render = vm.compileTemplate(field);
         }
 
         if (field.render) {
@@ -810,7 +810,7 @@ var myUniqueId = 1;
       var renderFunc = vm.details.render; // must be string template
 
       if (vm.details.template) {
-        renderFunc = vm.compileTemplate(vm.details.template);
+        renderFunc = vm.compileTemplate(vm.details);
       } else if (renderFunc) {
         renderFunc = function renderFunc() {
           return vm.details.render.apply(vm, _arguments2);
@@ -864,13 +864,13 @@ var myUniqueId = 1;
     /**
      * Vue.compile a template string and return the compiled function
      *
-     * @param  {String} template the string template
+     * @param  {Object} object with template property
      * @return {Function}          the compiled template function
      */
-    compileTemplate: function compileTemplate(template) {
+    compileTemplate: function compileTemplate(field) {
       var vm = this;
       var jq = vm.jq;
-      var res = Vue.compile("<div>".concat(template, "</div>"));
+      var res = Vue.compile("<div>".concat(field.template, "</div>"));
 
       var renderFunc = function renderFunc(data, type, row, meta) {
         var comp = new Vue({
@@ -879,7 +879,8 @@ var myUniqueId = 1;
             type: type,
             row: row,
             meta: meta,
-            vdtnet: vm
+            vdtnet: vm,
+            def: field
           },
           render: res.render,
           staticRenderFns: res.staticRenderFns

lib/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=3c7a4dc674e4f56d67e5",
-    "/index.js.map": "/index.js.map?id=56078c7b2ad40ab63ee5"
+    "/index.js": "/index.js?id=ba6728142b858139db55",
+    "/index.js.map": "/index.js.map?id=f10a7aab7fbc789bf4c0"
 }

package.json

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

src/VdtnetTable.vue

@@ -220,7 +220,7 @@ export default {
         }
 
         if (field.template) {
-          field.render = vm.compileTemplate(field.template)
+          field.render = vm.compileTemplate(field)
         }
 
         if (field.render) {
@@ -392,7 +392,7 @@ export default {
 
       // must be string template
       if (vm.details.template) {
-        renderFunc = vm.compileTemplate(vm.details.template)
+        renderFunc = vm.compileTemplate(vm.details)
       } else if (renderFunc) {
         renderFunc = () => {
           return vm.details.render.apply(vm, arguments)
@@ -444,21 +444,22 @@ export default {
     /**
      * Vue.compile a template string and return the compiled function
      *
-     * @param  {String} template the string template
+     * @param  {Object} object with template property
      * @return {Function}          the compiled template function
      */
-    compileTemplate(template) {
+    compileTemplate(field) {
       const vm  = this
       const jq  = vm.jq
-      const res = Vue.compile(`<div>${template}</div>`)
+      const res = Vue.compile(`<div>${field.template}</div>`)
       const renderFunc = (data, type, row, meta) => {
         const comp = new Vue({
           data: {
-              data: data,
-              type: type,
-              row: row,
-              meta: meta,
-              vdtnet: vm
+            data: data,
+            type: type,
+            row: row,
+            meta: meta,
+            vdtnet: vm,
+            def: field
           },
           render: res.render,
           staticRenderFns: res.staticRenderFns