add comp property

Author: noogen

README.md

@@ -232,9 +232,9 @@ Custom events for this component.
 ```
 
 ```js
-   doSomethingImmediatelyAfterTableCreatedAndInitialized(comp) {
-    // use comp.dataTable to access the jQuery DataTables object, example:
-     comp.dataTable.on( 'order.dt',  function () { eventFired( 'Order' ); } )
+   doSomethingImmediatelyAfterTableCreatedAndInitialized(vdtnet) {
+    // use vdtnet.dataTable to access the jQuery DataTables object, example:
+     vdtnet.dataTable.on( 'order.dt',  function () { eventFired( 'Order' ); } )
    }
 ```
 - `table-creating` this is right before jQuery(el).DataTable(component.options) is called allowing you to modify component options.
@@ -374,11 +374,11 @@ window.open(url)
 ## Native templating (sort-of) explained
 Take a look at example app, you can template:
 ```
-<template
-  slot="address1"
+ <template
+  slot="address2"
   slot-scope="ctx"
 >
-  <span>{{ ctx.data.street }}, {{ ctx.data.suite }}</span>
+  <span>{{ ctx.data.city }}, {{ ctx.comp.formatCode(ctx.data.zipcode) }}</span>
 </template>
 ```
 
@@ -391,8 +391,9 @@ Take a look at example app, you can template:
   4. `meta` jQuery DataTables column config
   5. `vdtnet` the vdtnet table object
   6. `def` vdtnet field config
+  7. `comp` your component, notice how it demonstrate calling of a function on the example component to strip out all number after the dash.  You can use this to do things like permission checking.  Also see **Note** below.
 
-Things that are related to display rendering should work.  Event handling doesn't work and I'm still looking for better way handle this.  Of course, you can still use `data-action` to handle clicks.
+**Note**: Things that are related to display rendering should work.  Event handling doesn't work and I'm still looking for better way handle this.  Of course, you can still use `data-action` to handle clicks.
 
 ## Export
 This is something you want to explore on your own.  We try our best to provide as much example of export as possible in our demo, but Server-Side and/or Language/Framework Specific Code is too much/time-consuming to dive into.  Also, sometime output rendering are ties to specific requirement and cannot generically meet everyone needs.  We suggest that you create a Bounty for your specific needs.

example/app.vue

@@ -54,10 +54,10 @@
         <b>Show Details</b>
       </template>
       <template
-        slot="address1"
+        slot="address2"
         slot-scope="ctx"
       >
-        <span>{{ ctx.data.street }}, {{ ctx.data.suite }}</span>
+        <span>{{ ctx.data.city }}, {{ ctx.comp.formatCode(ctx.data.zipcode) }}</span>
       </template>
     </vdtnet-table>
   </div>
@@ -123,12 +123,12 @@ export default {
         email: { label: 'Email' },
         address1: {
           label: 'Address1',
-          data: 'address'
+          data: 'address',
+          template: '{{ data.street }}, {{ data.suite }}'
         },
         address2: {
           label: 'Address2',
-          data: 'address',
-          template: '{{ data.city }}, {{ data.zipcode }}'
+          data: 'address'
         },
         phone: { label: 'Phone' },
         website: {
@@ -182,6 +182,9 @@ export default {
       const parms = this.$refs.table.getServerParams()
       parms.export = type
       window.alert('GET /api/v1/export?' + jQuery.param(parms))
+    },
+    formatCode(zipcode) {
+      return zipcode.split('-')[0]
     }
   }
 }

example/index.js

@@ -349,12 +349,12 @@ __webpack_require__.r(__webpack_exports__);
         },
         address1: {
           label: 'Address1',
-          data: 'address'
+          data: 'address',
+          template: '{{ data.street }}, {{ data.suite }}'
         },
         address2: {
           label: 'Address2',
-          data: 'address',
-          template: '{{ data.city }}, {{ data.zipcode }}'
+          data: 'address'
         },
         phone: {
           label: 'Phone'
@@ -408,6 +408,9 @@ __webpack_require__.r(__webpack_exports__);
       var parms = this.$refs.table.getServerParams();
       parms["export"] = type;
       window.alert('GET /api/v1/export?' + jQuery.param(parms));
+    },
+    formatCode: function formatCode(zipcode) {
+      return zipcode.split('-')[0];
     }
   }
 });
@@ -893,7 +896,8 @@ var myUniqueId = 1;
               row: row,
               meta: meta,
               vdtnet: vm,
-              def: field
+              def: field,
+              comp: vm.$parent
             })]);
           };
         }
@@ -905,7 +909,8 @@ var myUniqueId = 1;
             row: row,
             meta: meta,
             vdtnet: vm,
-            def: field
+            def: field,
+            comp: vm.$parent
           },
           render: myRender,
           staticRenderFns: res.staticRenderFns
@@ -22150,12 +22155,14 @@ var render = function() {
           },
           scopedSlots: _vm._u([
             {
-              key: "address1",
+              key: "address2",
               fn: function(ctx) {
                 return [
                   _c("span", [
                     _vm._v(
-                      _vm._s(ctx.data.street) + ", " + _vm._s(ctx.data.suite)
+                      _vm._s(ctx.data.city) +
+                        ", " +
+                        _vm._s(ctx.comp.formatCode(ctx.data.zipcode))
                     )
                   ])
                 ]

example/index.js.map

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=4c04c8ae42c454ff0051",
-    "/index.js.map": "/index.js.map?id=418f15296ccb3ff1d586"
+    "/index.js": "/index.js?id=0f59f3d0318e83aec294",
+    "/index.js.map": "/index.js.map?id=7d20b55eb6bd78e18133"
 }