add back master/details

README.md

@@ -313,4 +313,9 @@ const url = 'export.php?' + $.param(data)
 window.open(url)
 ```
 
+## Responsive
+1. In Bootstrap4, there's a class called [table-responsive](https://getbootstrap.com/docs/4.1/content/tables/#responsive-tables) that wrap the table at each screen breakpoint.  We apply this class on our wrapper div to make the table scroll horizontally.
+
+2. Alternatively, you can set `options.responsive = true` to use jQuery DataTable responsive plugin.  **WARNING**: This plugin does not play well with `select-checkbox`, `master-details`, and many other features.  It is recommended to use option 1 above.
+
 # MIT

example/App.vue

@@ -1,7 +1,9 @@
 <template>
-  <div id="app">
+  <div
+    id="app"
+    class="col-12">
     <div class="row">
-      <div class="col-sm-12 col-md-9">
+      <div class="col-12 col-md-9">
         <div class="dt-buttons btn-group">
           <button
             class="btn btn-secondary buttons-copy buttons-html5"
@@ -14,7 +16,7 @@
             @click.stop.prevent="doExport('pdf')">Pdf</button>
         </div>
       </div>
-      <div class="col-sm-12 col-md-3">
+      <div class="col-12 col-md-3">
         <form
           class="form-inline d-flex mx-1 justify-content-end"
           @submit.stop.prevent="doSearch"
@@ -42,7 +44,8 @@
       ref="table"
       :fields="fields"
       :opts="options"
-      :selectable="true"
+      :select-checkbox="1"
+      :details="details"
       @edit="doAlertEdit"
       @delete="doAlertDelete"
       @reloaded="doAfterReload"
@@ -91,6 +94,7 @@ export default {
             return json
           }
         },
+        responsive: false,
         processing: true,
         pageLength: 10,
         searching: true,
@@ -105,6 +109,7 @@ export default {
       fields: {
         id: { label: 'ID', sortable: true },
         actions: {
+          sortable: false,
           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>' +
             '<span data-action="delete" class="btn btn-danger btn-sm"><i class="mdi mdi-delete"></i> Delete</span>'
@@ -124,7 +129,10 @@ export default {
           }
         }
       },
-      quickSearch: ''
+      quickSearch: '',
+      details: {
+        template: 'I\'m a child yall'
+      }
     }
   },
   methods: {

lib/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=254425902da007fae0cb",
-    "/index.js.map": "/index.js.map?id=e8d36f85fbc0c90450bc"
+    "/index.js": "/index.js?id=b482da4e8fec4bbfb917",
+    "/index.js.map": "/index.js.map?id=5582d0a6806758c436b1"
 }

package.json

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

src/VdtnetTable.vue

@@ -69,13 +69,13 @@ export default {
       type: Object
     },
     /**
-     * True to enable multi-select checkboxes
+     * The select-checkbox column index (start at 1)
      * Current implementation require datatables.net-select
      *
-     * @type Boolean
+     * @type Number
      */
-    selectable: {
-      type: Boolean
+    selectCheckbox: {
+      type: Number
     },
     /**
      * Provide custom local data loading.  Warning: this option has not been
@@ -93,22 +93,28 @@ export default {
      */
     hideFooter: {
       type: Boolean
+    },
+    /**
+     * The details column configuration of master/details.
+     *
+     * @type {Object}
+     */
+    details: {
+      type: Object
     }
   },
   data() {
     // initialize defaults
     return {
       options: {
 /*eslint-disable */
-        dom: "<'row'<'col-sm-12'tr>>" +
-          "<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>",
+        dom: "tr<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>",
 /*eslint-enable */
         columns: [],
         language: {
           infoFiltered: ''
         },
         lengthMenu: [ [15, 100, 500, 1000, -1], [15, 100, 500, 1000, 'All'] ],
-        responsive: true,
         pageLength: 15,
         buttons: []  // remove any button defaults
       },
@@ -120,7 +126,7 @@ export default {
       return this.jquery || window.jQuery
     },
     classes() {
-      let classes = 'vdtnet-container'
+      let classes = 'table-responsive vdtnet-container'
       if (this.hideFooter) {
         classes += ' hide-footer'
       }
@@ -131,6 +137,7 @@ export default {
   created() {
     const vm  = this
     const jq  = vm.jq
+    let sort  = 0
 
     // allow user to override default options
     if (vm.opts) {
@@ -182,7 +189,7 @@ export default {
       }
     }
 
-    if (vm.selectable) {
+    if (vm.selectCheckbox) {
       // expand column
       const col = {
         orderable: false,
@@ -191,7 +198,7 @@ export default {
         defaultContent: '',
         title: '<input type="checkbox" class="select-all-checkbox">'
       }
-      vm.options.columns.splice(1, 0, col)
+      vm.options.columns.splice(vm.selectCheckbox - 1, 0, col)
 
       // console.log(vm.options.columns)
       vm.options.select = jq.extend(
@@ -201,8 +208,33 @@ export default {
           selector: 'td.select-checkbox'
         }
       )
+
+      if (vm.selectCheckbox == 1) {
+        sort++
+      }
+    }
+
+    // handle master details
+    if (vm.details) {
+      console.log('hi')
+      const col = {
+        orderable: false,
+        className: 'details-control',
+        data: null,
+        defaultContent: vm.details.icons || '<span class="details-plus" title="Show details">+</span><span class="details-minus" title="Hide details">-</span>'
+      }
+      vm.options.columns.splice((vm.details.index || 1) - 1, 0, col)
+
+      if ((vm.details.index || 1) > 0) {
+        sort++
+      }
+    }
+
+    if (sort > 0) {
+      vm.options.order = [[sort, 'asc']]
     }
 
+    // handle local data loader
     if (vm.dataLoader) {
       delete vm.options.ajax
       vm.options.serverSide = false
@@ -216,7 +248,7 @@ export default {
     // console.log(vm.options.buttons)
     vm.dataTable = $el.DataTable(vm.options)
 
-    if (vm.selectable) {
+    if (vm.selectCheckbox) {
       // handle select all checkbox
       $el.on('click', 'th input.select-all-checkbox', (e) => {
         if(jq(e.target).is(':checked')) {
@@ -279,6 +311,36 @@ export default {
       }
     })
 
+    // handle master/details
+    if (vm.details && vm.details.template) {
+      // 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('master')
+        }
+        else {
+          // Open this row
+          const data = row.data()
+          row.child( renderFunc(data, 'child', row, tr) ).show()
+          tr.addClass('master')
+        }
+      })
+    }
+
     // finally, load data
     if (vm.dataLoader) {
       vm.reload()
@@ -392,4 +454,24 @@ export default {
 .hide-footer .vdtnet-footer {
   display: none;
 }
+
+.master .details-plus
+{
+  cursor: pointer;
+  display: none;
+}
+.details-minus
+{
+  cursor: pointer;
+  display: none;
+}
+.master .details-minus
+{
+  cursor: pointer;
+  display: inline;
+}
+.details-control {
+  cursor: pointer;
+  font-weight: 700;
+}
 </style>