update demo

Author: noogen

README.md

@@ -327,6 +327,29 @@ window.open(url)
   render: 'provide a custom render function as alternative to template'
 }
 ```
+## 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.
+
+**Client-Side**
+This is mostly provided by jQuery DataTables.  We demonstrate in our default demo.  You can find the documentation for [Buttons](https://datatables.net/extensions/buttons/) directly on the jQuery DataTables website.
+
+**Server-Side**
+Our demo for server-side export is here: https://laratt.niiknow.org/home/contacts
+
+The source of the demo can be found here: https://github.com/niiknow/laratt-api
+And, specifically, the client-side vue component usage source: https://github.com/niiknow/laratt-api/blob/5117bfae1273b31f95af6aa99c51aae7fc413d2f/resources/js/components/DataTableNet.vue#L148
+
+The code use `convention` to calculate a route/url as:
+```
+url: that.$app.apiRoute(that.rName, that.rPath),
+```
+
+Which result to a URL like so: https://laratt.niiknow.org/api/v1/democontact/example?x-tenant=test&x-api-key=demo123
+
+And the server-side source for the export is simply: https://github.com/niiknow/laratt-api/blob/876ce385fc64d83b564f2e697790465675741634/api/Controllers/DemoContactController.php#L90
+
+**Export Tip**
+Outside of csv export, most modern OS and Browser support PDF printing.  As a result, simply instruct the user to Print your page and use printing CSS to manipulate for exporting of PDF.
 
 ## Tips
 If you're like us, you want to write as little code as possible; as in, application of the DRY Principle.  This mean the UI has a standard look/feel/behavior; where toolbar, search, and other controls are place at specific location.  So this mean you want to wrap this component inside your own component?  Our sample App give you a good idea on how to start.  Below are a few things to consider:

example/app.vue

@@ -5,26 +5,13 @@
   >
     <div class="row">
       <div class="col-12 col-md-9">
-        <div class="dt-buttons btn-group">
-          <button
-            class="btn btn-secondary buttons-copy buttons-html5"
-            @click.stop.prevent="doExport('csv')"
-          >
-            Csv
-          </button>
-          <button
-            class="btn btn-secondary buttons-copy buttons-html5"
-            @click.stop.prevent="doExport('excel')"
-          >
-            Excel
-          </button>
-          <button
-            class="btn btn-secondary buttons-copy buttons-html5"
-            @click.stop.prevent="doExport('pdf')"
-          >
-            Pdf
-          </button>
-        </div>
+        Below are client-side buttons demo, go here to see
+        <a
+          href="https://laratt.niiknow.org/home/contacts"
+          target="_blank"
+        >
+          server-side buttons demo
+        </a>
       </div>
       <div class="col-12 col-md-3">
         <form
@@ -71,15 +58,20 @@
 <script>
 // this demonstrate with buttons and responsive master/details row
 import VdtnetTable from '../src'
-// since I already include on index.html, I don't need to include it here
-// import 'datatables.net/js/jquery.dataTables.js'
-import 'datatables.net-bs4/js/dataTables.bootstrap4.js'
+
+import 'datatables.net-bs4'
+
+// import buttons and plugins
+import 'datatables.net-buttons/js/dataTables.buttons.js'
+import 'datatables.net-buttons/js/buttons.html5.js'
+import 'datatables.net-buttons/js/buttons.print.js'
 
 // import the rest
+import 'datatables.net-buttons-bs4'
 import 'datatables.net-select-bs4'
 
-import 'datatables.net-bs4/css/dataTables.bootstrap4.min.css'
 import 'datatables.net-select-bs4/css/select.bootstrap4.min.css'
+import 'datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css'
 
 export default {
   name: 'App',
@@ -95,6 +87,10 @@ export default {
             return json
           }
         },
+        buttons: ['copy', 'csv', 'print'],
+/*eslint-disable */
+        dom: "Btr<'row vdtnet-footer'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'pl>>",
+/*eslint-enable */
         responsive: false,
         processing: true,
         searching: true,

example/index.js

@@ -1,4 +1,4 @@
 {
-    "/index.js": "/index.js?id=32ec8b280fd84173c683",
-    "/index.js.map": "/index.js.map?id=642f9a187e8ecd87f3ed"
+    "/index.js": "/index.js?id=3560ad448a37fa3d71c5",
+    "/index.js.map": "/index.js.map?id=aec5afec3dd3eab095f2"
 }

example/index.js.map

@@ -1,7 +1,7 @@
 {
   "name": "vue-datatables-net",
   "description": "Vue jQuery DataTables.net wrapper component",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "author": "[email protected]",
   "license": "MIT",
   "main": "lib/index.js",
@@ -43,6 +43,7 @@
     "cross-env": "^5.1.6",
     "css-loader": "^2.1.0",
     "datatables.net-bs4": "^1.10.19",
+    "datatables.net-buttons-bs4": "^1.5.6",
     "datatables.net-select-bs4": "^1.2.7",
     "eslint": "^5.16.0",
     "eslint-config-prettier": "^4.2.0",

lib/index.js

@@ -222,10 +222,10 @@ export default {
         orderable: false,
         searchable: false,
         name: '_select_checkbox',
-        className: 'select-checkbox',
+        className: 'select-checkbox d-print-none',
         data: null,
         defaultContent: '',
-        title: '<input type="checkbox" class="select-all-checkbox">'
+        title: '<input type="checkbox" class="select-all-checkbox d-print-none">'
       }
       vm.options.columns.splice(vm.selectCheckbox - 1, 0, col)
 
@@ -252,7 +252,7 @@ export default {
         orderable: false,
         searchable: false,
         name: '_details_control',
-        className: 'details-control',
+        className: 'details-control d-print-none',
         data: null,
         defaultContent: vm.details.icons || '<span class="details-plus" title="Show details">+</span><span class="details-minus" title="Hide details">-</span>'
       }