add master details

Author: noogen

dist/index.js

@@ -4,6 +4,7 @@
       :fields="fields"
       :opts="options"
       :selectable="true"
+      :details="childOptions"
       @edit="alert('row edit button clicked')"
       @delete="alert('row delete button clicked')"
     />
@@ -78,6 +79,9 @@ export default {
           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>' +
             '<span data-action="delete" class="btn btn-danger btn-sm"><i class="mdi mdi-delete"></i> Delete</span>'
         }
+      },
+      childOptions: {
+        template: 'I\'m a child yall'
       }
     }
   },

dist/index.js.map

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

example/App.vue

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

lib/index.js

@@ -66,6 +66,9 @@ export default {
      */
     selectable: {
       type: Boolean
+    },
+    details: {
+      type: Object
     }
   },
   data() {
@@ -92,8 +95,8 @@ export default {
     }
   },
   created() {
-    const vm = this
-    const jq = vm.jq
+    const vm  = this
+    const jq  = vm.jq
 
     // allow user to override default options
     if (vm.opts) {
@@ -133,21 +136,7 @@ export default {
         }
 
         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()
-          }
+          field.render = vm.compileTemplate(field.template)
         }
 
         if (field.render) {
@@ -161,27 +150,33 @@ export default {
 
     if (vm.selectable) {
       // expand column
-      vm.options.columns = [{
+      const col = {
         orderable: false,
         className: 'select-checkbox',
         data: null,
         defaultContent: '',
-        title: '<input type="checkbox" class="select-all-checkbox">',
-        targets: 0
-      }].concat(vm.options.columns)
+        title: '<input type="checkbox" class="select-all-checkbox">'
+      }
+      vm.options.columns.splice(1, 0, col)
 
       // console.log(vm.options.columns)
       vm.options.select = jq.extend(
         vm.options.select || {},
         {
           style: 'os',
-          selector: 'td:first-child'
+          selector: 'td.select-checkbox'
         }
       )
+    }
 
-      if (!vm.options.order) {
-        vm.options.order = [[1, 'asc']]
+    if (vm.details) {
+      const col = {
+        orderable: false,
+        className: 'details-control',
+        data: null,
+        defaultContent: vm.details.icons || '<span class="details-control-plus" title="Show Details">+</span><span class="details-control-minus" title="Hide Details">-</span>'
       }
+      vm.options.columns.splice(1, 0, col)
     }
   },
   mounted() {
@@ -238,7 +233,7 @@ export default {
         // detect if row action
         let tr = that.closest('tr')
         if (tr) {
-          if (tr.hasClass('child')) {
+          if (tr.attr('role') !== 'row') {
             tr = tr.prev()
           }
           const row  = vm.dataTable.row(tr)
@@ -251,6 +246,59 @@ export default {
         }
       }
     })
+
+    if (vm.details) {
+      // must be string template
+      const renderFunc = vm.compileTemplate(vm.details.template)
+
+      // handle master/details
+      // Add event listener for opening and closing details
+      $el.on('click', 'td.details-control', (e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        const target = jq(e.target)
+        let that     = target
+        let tr       = that.closest('tr')
+        if (tr.attr('role') !== 'row') {
+          tr = tr.prev()
+        }
+        const row = vm.dataTable.row( tr )
+
+        if ( row.child.isShown() ) {
+          // This row is already open - close it
+          row.child.hide()
+          tr.removeClass('shown')
+        }
+        else {
+          // Open this row
+          const data = row.data()
+          row.child( renderFunc(data, 'child', row, tr) ).show()
+          tr.addClass('shown')
+        }
+      })
+    }
+  },
+  methods: {
+    compileTemplate(template) {
+      const vm  = this
+      const jq  = vm.jq
+      const res = Vue.compile(`<div>${template}</div>`)
+      const renderFunc = (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()
+      }
+
+      return renderFunc
+    }
   }
 }
 </script>
@@ -262,4 +310,23 @@ export default {
   float: left;
   padding-right: 10px;
 }
+.shown .details-control-plus
+{
+  cursor: pointer;
+  display: none;
+}
+.details-control-minus
+{
+  cursor: pointer;
+  display: none;
+}
+.shown .details-control-minus
+{
+  cursor: pointer;
+  display: inline;
+}
+.details-control {
+  cursor: pointer;
+  font-weight: 700;
+}
 </style>