allow action columns head to be customizable

niiknow · Nov 6, 2018 · 992dd65 · 992dd65
1 parent edf33ac
commit 992dd65
Show file tree

Hide file tree

Showing 8 changed files with 45 additions and 53 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/example/App.vue b/example/App.vue
@@ -40,6 +40,7 @@
         </form>
       </div>
     </div>
+    <!-- Using the VdtnetTable component -->
     <vdtnet-table
       ref="table"
       :fields="fields"
@@ -49,12 +50,11 @@
       @edit="doAlertEdit"
       @delete="doAlertDelete"
       @reloaded="doAfterReload"
-    />
-    <h3>Note:</h3>
-    <ul>
-      <li>Select Checkbox is on 2nd column to prevent conflict with responsive.</li>
-      <li>Responsive also has conflict with custom master/details implementation because, by default, it use the jQuery DataTables child function.  Therefore, it's probably best to use some kind of action button to support master/details.</li>
-    </ul>
+    >
+      <template slot="HEAD__details_control">
+        Show Details
+      </template>
+    </vdtnet-table>
   </div>
 </template>
 

diff --git a/lib/index.js b/lib/index.js
diff --git a/lib/index.js.map b/lib/index.js.map
diff --git a/lib/mix-manifest.json b/lib/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=b482da4e8fec4bbfb917",
-    "/index.js.map": "/index.js.map?id=5582d0a6806758c436b1"
+    "/index.js": "/index.js?id=50b82d53ec85496298b7",
+    "/index.js.map": "/index.js.map?id=9cdec933f914e6df4cb1"
 }
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTables.net wrapper component",
-  "version": "0.9.9",
+  "version": "1.0.0",
   "author": "[email protected]",
   "license": "MIT",
   "main": "lib/index.js",

diff --git a/src/VdtnetTable.vue b/src/VdtnetTable.vue
@@ -193,6 +193,7 @@ export default {
       // expand column
       const col = {
         orderable: false,
+        name: '_select_checkbox',
         className: 'select-checkbox',
         data: null,
         defaultContent: '',
@@ -216,11 +217,12 @@ export default {
 
     // handle master details
     if (vm.details) {
-      console.log('hi')
       const col = {
         orderable: false,
+        name: '_details_control',
         className: 'details-control',
         data: null,
+        defaultContent: '',
         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)