[fix #43] @2.1.20

Author: Ken Berkeley

dist/min.js

@@ -12,5 +12,5 @@
 
 <script src="//unpkg.com/jquery@2.1.4/dist/jquery.min.js"></script>
 <script src="//unpkg.com/bootstrap@3.3.5/dist/js/bootstrap.min.js"></script>
-<script type="text/javascript" src="client.7bfc66a2.js"></script></body>
+<script type="text/javascript" src="client.ced4d898.js"></script></body>
 </html>

examples/dist/client.7bfc66a2.js examples/dist/client.ced4d898.jsexamples/dist/client.7bfc66a2.js renamed to examples/dist/client.ced4d898.js

@@ -1,7 +1,7 @@
 {
   "name": "vue2-datatable-component",
   "description": "The best Datatable for Vue.js 2.x which never sucks",
-  "version": "2.1.19",
+  "version": "2.1.20",
   "main": "dist/min.js",
   "module": "src/main.js",
   "author": "Ken Berkeley <kenberkeley@foxmail.com>",

examples/dist/index.html

@@ -5,7 +5,7 @@
       <div v-if="x !== 'Footer' || x === 'Footer' && summary"
         ref="wrappers" :name="`Table${x}Wrapper`" :class="`-table-${x.toLowerCase()}`"
         :style="[
-          x !== 'Header' && { marginTop: `-${SCROLLBAR_WIDTH}px` },
+          x !== 'Header' && { marginTop: `-${scrollWidth}px` },
           x === 'Body' && { maxHeight: `${fixHeaderAndSetBodyMaxHeight}px` }
         ]">
         <div :name="`NormalTable${x}`">
@@ -47,8 +47,8 @@ import TableHeader from './TableHeader.vue'
 import TableBody from './TableBody.vue'
 import TableFooter from './TableFooter.vue'
 import props from '../_mixins/props'
+import getScrollWidth from '../_utils/getScrollWidth'
 import isColVisible from '../_utils/isColVisible'
-import SCROLLBAR_WIDTH from '../_utils/SCROLLBAR_WIDTH'
 import syncScroll from '../_utils/syncScroll'
 
 export default {
@@ -57,7 +57,7 @@ export default {
   components: { TableFrame, TableHeader, TableBody, TableFooter },
   data: () => ({
     offsetLeft: 0,
-    SCROLLBAR_WIDTH
+    scrollWidth: getScrollWidth()
   }),
   mounted () {
     // this allows you to fix columns or `fixHeaderAndSetBodyMaxHeight` dynamically

package.json

@@ -0,0 +1,24 @@
+// Refers to https://davidwalsh.name/detect-scrollbar-width
+let scrollWidth
+
+export default function () {
+  if (scrollWidth) {
+    return scrollWidth
+  }
+
+  const div = document.createElement('div')
+
+  div.style.width = '100px'
+  div.style.height = '100px'
+  div.style.overflow = 'scroll'
+  div.style.position = 'absolute'
+  div.style.top = '-9999px'
+
+  document.body.appendChild(div)
+
+  scrollWidth = div.offsetWidth - div.clientWidth
+
+  document.body.removeChild(div)
+
+  return scrollWidth
+}