UNPKG

vue-scroll-table

Version:

A Vue table component with fully customizable cells (using scoped slots), a sticky first column, horizontal scrolling and pagination.

1,301 lines • 56.9 kB
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define(['exports'], factory) :
    (factory((global.VueScrollTable = {})));
}(this, (function (exports) { 'use strict';

    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //
    //

    var script = {
        props: ['classes', 'styles', 'direction'],
        name: 'sort-icon',
        watch: {
            'classes.active': {
                immediate: true,
                handler: function(newActiveClasses) {
                    var activateClasses = function (activeClasses, currentClass) {
                        var obj;

                        return (Object.assign({}, activeClasses,
                        ( obj = {}, obj[currentClass] = true, obj )));
                    };

                    this.activeClasses = Object.assign({}, this.defaultActiveClasses.reduce(activateClasses, {}),
                        newActiveClasses.reduce(activateClasses, {}));
                }
            },
            'styles.active': {
                immediate: true,
                handler: function(newActiveStyles) {
                    this.activeStyle = Object.assign({}, this.defaultActiveStyle,
                        newActiveStyles);
                }
            }
        },
        data: function data() {
            return {
                defaultActiveClasses: ['s_active'],
                defaultActiveStyle: {},
                activeClasses: {},
                activeStyle: {}
            };
        }
    };

    /* script */
                var __vue_script__ = script;
                
    /* template */
    var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('button',{staticClass:"vst_sort-btn",class:[].concat( _vm.classes.button ),style:(_vm.styles.button)},[_c('span',{class:this.direction === 'ascending' ? _vm.activeClasses : {},style:(this.direction === 'ascending' ? _vm.activeStyle : {})},[_vm._v("\n        ▲\n    ")]),_vm._v(" "),_c('span',{class:this.direction === 'descending' ? _vm.activeClasses : {},style:(this.direction === 'descending' ? _vm.activeStyle : {})},[_vm._v("\n        ▼\n    ")])])};
    var __vue_staticRenderFns__ = [];

      /* style */
      var __vue_inject_styles__ = function (inject) {
        if (!inject) { return }
        inject("data-v-c717b436_0", { source: "\n.vst_table-scroll .vst_sort-btn[data-v-c717b436]{position:relative;z-index:0\n}\nspan[data-v-c717b436]{opacity:.5\n}\nspan.s_active[data-v-c717b436]{opacity:1\n}", map: undefined, media: undefined });

      };
      /* scoped */
      var __vue_scope_id__ = "data-v-c717b436";
      /* module identifier */
      var __vue_module_identifier__ = undefined;
      /* functional template */
      var __vue_is_functional_template__ = false;
      /* component normalizer */
      function __vue_normalize__(
        template, style, script$$1,
        scope, functional, moduleIdentifier,
        createInjector, createInjectorSSR
      ) {
        var component = (typeof script$$1 === 'function' ? script$$1.options : script$$1) || {};

        // For security concerns, we use only base name in production mode.
        component.__file = "SortIcon.vue";

        if (!component.render) {
          component.render = template.render;
          component.staticRenderFns = template.staticRenderFns;
          component._compiled = true;

          if (functional) { component.functional = true; }
        }

        component._scopeId = scope;

        {
          var hook;
          if (style) {
            hook = function(context) {
              style.call(this, createInjector(context));
            };
          }

          if (hook !== undefined) {
            if (component.functional) {
              // register for functional component in vue file
              var originalRender = component.render;
              component.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context)
              };
            } else {
              // inject component registration as beforeCreate hook
              var existing = component.beforeCreate;
              component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
            }
          }
        }

        return component
      }
      /* style inject */
      function __vue_create_injector__() {
        var head = document.head || document.getElementsByTagName('head')[0];
        var styles = __vue_create_injector__.styles || (__vue_create_injector__.styles = {});
        var isOldIE =
          typeof navigator !== 'undefined' &&
          /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

        return function addStyle(id, css) {
          if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.

          var group = isOldIE ? css.media || 'default' : id;
          var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

          if (!style.ids.includes(id)) {
            var code = css.source;
            var index = style.ids.length;

            style.ids.push(id);

            if (css.map) {
              // https://developer.chrome.com/devtools/docs/javascript-debugging
              // this makes source maps inside style tags work properly in Chrome
              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
              // http://stackoverflow.com/a/26603875
              code +=
                '\n/*# sourceMappingURL=data:application/json;base64,' +
                btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                ' */';
            }

            if (isOldIE) {
              style.element = style.element || document.querySelector('style[data-group=' + group + ']');
            }

            if (!style.element) {
              var el = style.element = document.createElement('style');
              el.type = 'text/css';

              if (css.media) { el.setAttribute('media', css.media); }
              if (isOldIE) {
                el.setAttribute('data-group', group);
                el.setAttribute('data-next-index', '0');
              }

              head.appendChild(el);
            }

            if (isOldIE) {
              index = parseInt(style.element.getAttribute('data-next-index'));
              style.element.setAttribute('data-next-index', index + 1);
            }

            if (style.element.styleSheet) {
              style.parts.push(code);
              style.element.styleSheet.cssText = style.parts
                .filter(Boolean)
                .join('\n');
            } else {
              var textNode = document.createTextNode(code);
              var nodes = style.element.childNodes;
              if (nodes[index]) { style.element.removeChild(nodes[index]); }
              if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
              else { style.element.appendChild(textNode); }
            }
          }
        }
      }
      /* style inject SSR */
      

      
      var SortIcon = __vue_normalize__(
        { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
        __vue_inject_styles__,
        __vue_script__,
        __vue_scope_id__,
        __vue_is_functional_template__,
        __vue_module_identifier__,
        __vue_create_injector__,
        undefined
      );

    //

    var script$1 = {
        name: 'table-part',
        props: ['data', 'headers', 'direction', 'classes', 'styles'],
        components: {
            SortIcon: SortIcon
        },
        methods: {
            onHeaderClick: function onHeaderClick($event, index, sortable) {
                if (sortable) {
                    this.$emit('sort', index);
                }
            },
            getCellDisplayValue: function getCellDisplayValue(cellData) {
                if (typeof cellData === 'object') {
                    if (Object.keys(cellData).includes('value')) {
                        return cellData.value;
                    }
                    console.log(
                        "Cell data object should have a 'value' property, cell data:",
                        cellData
                    );
                    return cellData;
                }
                return cellData;
            }
        }
    };

    /* script */
                var __vue_script__$1 = script$1;
                
    /* template */
    var __vue_render__$1 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('table',{class:[].concat( _vm.classes.table ),style:(_vm.styles.table)},[_c('thead',[_c('tr',_vm._l((_vm.headers),function(header,i){return _c('th',{key:("scroll-table-part-header-" + i),class:[].concat( _vm.classes.tableHeader ),style:(Object.assign({ 'min-width': ((header.width) + "px"), 'width': ((header.width) + "px"), 'cursor': header.sortable ? 'pointer' : 'default' }, _vm.styles.tableHeader)),on:{"click":function($event){_vm.onHeaderClick($event, i, header.sortable);}}},[_vm._v("\n                "+_vm._s(header.text)+"\n                "),(header.sortable)?_c('sort-icon',{attrs:{"classes":{ button: _vm.classes.button, active: _vm.classes.active},"styles":{ button: _vm.styles.button, active: _vm.styles.active },"direction":_vm.direction}}):_vm._e()],1)}))]),_vm._v(" "),_c('tbody',_vm._l((_vm.data),function(row,i){return _c('tr',{key:("scroll-table-part-row-" + i),class:[].concat( _vm.classes.tableRow ),style:(_vm.styles.tableRow)},[_vm._l((_vm.headers),function(header,i){return [(typeof _vm.$scopedSlots[header.text.toLowerCase()] !== 'undefined')?_c('td',{key:("scroll-table-part-row-item-" + i),class:[].concat( _vm.classes.tableData ),style:(_vm.styles.tableData)},[_vm._t(header.text.toLowerCase(),null,{header:header,index:i,data:row[i],row:row})],2):_c('td',{key:("scroll-table-part-row-item-" + i),class:[].concat( _vm.classes.tableData ),style:(_vm.styles.tableData)},[_vm._v("\n                    "+_vm._s(_vm.getCellDisplayValue(row[i]))+"\n                ")])]})],2)}))])};
    var __vue_staticRenderFns__$1 = [];

      /* style */
      var __vue_inject_styles__$1 = function (inject) {
        if (!inject) { return }
        inject("data-v-1e1ed9b3_0", { source: "\nth[data-v-1e1ed9b3]{cursor:pointer;padding:20px;border-right:1px #fff solid\n}\ntable[data-v-1e1ed9b3]{border:1px solid #ddd;border-collapse:separate;border-left:0;border-right:0;border-radius:10px;border-spacing:0;margin-bottom:0\n}\ntd[data-v-1e1ed9b3]:first-child,th[data-v-1e1ed9b3]:first-child{border-left:1px solid #ddd\n}\ntd[data-v-1e1ed9b3]:last-child,th[data-v-1e1ed9b3]:last-child{border-right:1px solid #ddd\n}\ntbody:first-child tr:first-child td[data-v-1e1ed9b3]:first-child,thead:first-child tr:first-child th[data-v-1e1ed9b3]:first-child{border-radius:10px 0 0 0\n}\ntbody:last-child tr:last-child td[data-v-1e1ed9b3]:first-child,thead:last-child tr:last-child th[data-v-1e1ed9b3]:first-child{border-radius:0 0 0 10px\n}\nth[data-v-1e1ed9b3]:last-child{border-radius:0 10px 0 0\n}\ntr:last-child td[data-v-1e1ed9b3]:last-child{border-radius:0 0 10px 0\n}", map: undefined, media: undefined });

      };
      /* scoped */
      var __vue_scope_id__$1 = "data-v-1e1ed9b3";
      /* module identifier */
      var __vue_module_identifier__$1 = undefined;
      /* functional template */
      var __vue_is_functional_template__$1 = false;
      /* component normalizer */
      function __vue_normalize__$1(
        template, style, script,
        scope, functional, moduleIdentifier,
        createInjector, createInjectorSSR
      ) {
        var component = (typeof script === 'function' ? script.options : script) || {};

        // For security concerns, we use only base name in production mode.
        component.__file = "TablePart.vue";

        if (!component.render) {
          component.render = template.render;
          component.staticRenderFns = template.staticRenderFns;
          component._compiled = true;

          if (functional) { component.functional = true; }
        }

        component._scopeId = scope;

        {
          var hook;
          if (style) {
            hook = function(context) {
              style.call(this, createInjector(context));
            };
          }

          if (hook !== undefined) {
            if (component.functional) {
              // register for functional component in vue file
              var originalRender = component.render;
              component.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context)
              };
            } else {
              // inject component registration as beforeCreate hook
              var existing = component.beforeCreate;
              component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
            }
          }
        }

        return component
      }
      /* style inject */
      function __vue_create_injector__$1() {
        var head = document.head || document.getElementsByTagName('head')[0];
        var styles = __vue_create_injector__$1.styles || (__vue_create_injector__$1.styles = {});
        var isOldIE =
          typeof navigator !== 'undefined' &&
          /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

        return function addStyle(id, css) {
          if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.

          var group = isOldIE ? css.media || 'default' : id;
          var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

          if (!style.ids.includes(id)) {
            var code = css.source;
            var index = style.ids.length;

            style.ids.push(id);

            if (css.map) {
              // https://developer.chrome.com/devtools/docs/javascript-debugging
              // this makes source maps inside style tags work properly in Chrome
              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
              // http://stackoverflow.com/a/26603875
              code +=
                '\n/*# sourceMappingURL=data:application/json;base64,' +
                btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                ' */';
            }

            if (isOldIE) {
              style.element = style.element || document.querySelector('style[data-group=' + group + ']');
            }

            if (!style.element) {
              var el = style.element = document.createElement('style');
              el.type = 'text/css';

              if (css.media) { el.setAttribute('media', css.media); }
              if (isOldIE) {
                el.setAttribute('data-group', group);
                el.setAttribute('data-next-index', '0');
              }

              head.appendChild(el);
            }

            if (isOldIE) {
              index = parseInt(style.element.getAttribute('data-next-index'));
              style.element.setAttribute('data-next-index', index + 1);
            }

            if (style.element.styleSheet) {
              style.parts.push(code);
              style.element.styleSheet.cssText = style.parts
                .filter(Boolean)
                .join('\n');
            } else {
              var textNode = document.createTextNode(code);
              var nodes = style.element.childNodes;
              if (nodes[index]) { style.element.removeChild(nodes[index]); }
              if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
              else { style.element.appendChild(textNode); }
            }
          }
        }
      }
      /* style inject SSR */
      

      
      var TablePart = __vue_normalize__$1(
        { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 },
        __vue_inject_styles__$1,
        __vue_script__$1,
        __vue_scope_id__$1,
        __vue_is_functional_template__$1,
        __vue_module_identifier__$1,
        __vue_create_injector__$1,
        undefined
      );

    //
    //
    //
    //
    //
    //
    //
    //
    //
    //

    var script$2 = {
        props: [
            'loading' ],
    };

    /* script */
                var __vue_script__$2 = script$2;
                
    /* template */
    var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.loading),expression:"loading"}],staticClass:"vst_loader"},[_c('svg',{attrs:{"version":"1.1","id":"vst_loader","xmlns":"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink","x":"0px","y":"0px","width":"36px","height":"36px","viewBox":"0 0 36 36","enable-background":"new 0 0 36 36","xml:space":"preserve"}},[_c('path',{attrs:{"opacity":"0.2","fill":"#262261","d":"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"}}),_vm._v(" "),_c('path',{attrs:{"fill":"#262261","d":"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0C22.32,8.481,24.301,9.057,26.013,10.047z"}},[_c('animateTransform',{attrs:{"attributeType":"xml","attributeName":"transform","type":"rotate","from":"0 20 20","to":"360 20 20","dur":"0.5s","repeatCount":"indefinite"}})],1)])])};
    var __vue_staticRenderFns__$2 = [];

      /* style */
      var __vue_inject_styles__$2 = undefined;
      /* scoped */
      var __vue_scope_id__$2 = "data-v-7131bad5";
      /* module identifier */
      var __vue_module_identifier__$2 = undefined;
      /* functional template */
      var __vue_is_functional_template__$2 = false;
      /* component normalizer */
      function __vue_normalize__$2(
        template, style, script,
        scope, functional, moduleIdentifier,
        createInjector, createInjectorSSR
      ) {
        var component = (typeof script === 'function' ? script.options : script) || {};

        // For security concerns, we use only base name in production mode.
        component.__file = "Loader.vue";

        if (!component.render) {
          component.render = template.render;
          component.staticRenderFns = template.staticRenderFns;
          component._compiled = true;

          if (functional) { component.functional = true; }
        }

        component._scopeId = scope;

        return component
      }
      /* style inject */
      
      /* style inject SSR */
      

      
      var Loader = __vue_normalize__$2(
        { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 },
        __vue_inject_styles__$2,
        __vue_script__$2,
        __vue_scope_id__$2,
        __vue_is_functional_template__$2,
        __vue_module_identifier__$2,
        undefined,
        undefined
      );

    var isMergeableObject = function isMergeableObject(value) {
    	return isNonNullObject(value)
    		&& !isSpecial(value)
    };

    function isNonNullObject(value) {
    	return !!value && typeof value === 'object'
    }

    function isSpecial(value) {
    	var stringValue = Object.prototype.toString.call(value);

    	return stringValue === '[object RegExp]'
    		|| stringValue === '[object Date]'
    		|| isReactElement(value)
    }

    // see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25
    var canUseSymbol = typeof Symbol === 'function' && Symbol.for;
    var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7;

    function isReactElement(value) {
    	return value.$$typeof === REACT_ELEMENT_TYPE
    }

    function emptyTarget(val) {
    	return Array.isArray(val) ? [] : {}
    }

    function cloneUnlessOtherwiseSpecified(value, options) {
    	return (options.clone !== false && options.isMergeableObject(value))
    		? deepmerge(emptyTarget(value), value, options)
    		: value
    }

    function defaultArrayMerge(target, source, options) {
    	return target.concat(source).map(function(element) {
    		return cloneUnlessOtherwiseSpecified(element, options)
    	})
    }

    function mergeObject(target, source, options) {
    	var destination = {};
    	if (options.isMergeableObject(target)) {
    		Object.keys(target).forEach(function(key) {
    			destination[key] = cloneUnlessOtherwiseSpecified(target[key], options);
    		});
    	}
    	Object.keys(source).forEach(function(key) {
    		if (!options.isMergeableObject(source[key]) || !target[key]) {
    			destination[key] = cloneUnlessOtherwiseSpecified(source[key], options);
    		} else {
    			destination[key] = deepmerge(target[key], source[key], options);
    		}
    	});
    	return destination
    }

    function deepmerge(target, source, options) {
    	options = options || {};
    	options.arrayMerge = options.arrayMerge || defaultArrayMerge;
    	options.isMergeableObject = options.isMergeableObject || isMergeableObject;

    	var sourceIsArray = Array.isArray(source);
    	var targetIsArray = Array.isArray(target);
    	var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray;

    	if (!sourceAndTargetTypesMatch) {
    		return cloneUnlessOtherwiseSpecified(source, options)
    	} else if (sourceIsArray) {
    		return options.arrayMerge(target, source, options)
    	} else {
    		return mergeObject(target, source, options)
    	}
    }

    deepmerge.all = function deepmergeAll(array, options) {
    	if (!Array.isArray(array)) {
    		throw new Error('first argument should be an array')
    	}

    	return array.reduce(function(prev, next) {
    		return deepmerge(prev, next, options)
    	}, {})
    };

    var deepmerge_1 = deepmerge;

    var DEFAULT_CLASSES = {
        pagination: {
            container: [],
            limit: {
                container: [],
                dropdown: []
            },
            links: {
                container: [],
                buttons: []
            }
        },
        tableContainer: [],
        sticky: {
            container: [],
            table: [],
            tableHeader: [],
            tableRow: [],
            tableData: []
        },
        scroll: {
            container: [],
            table: [],
            tableHeader: [],
            tableRow: [],
            tableData: []
        },
        sortButtons: {
            button: [],
            active: []
        }
    };

    var DEFAULT_STYLES = {
        pagination: {
            container: {},
            limit: {
                container: {},
                dropdown: {}
            },
            links: {
                container: {},
                buttons: {}
            }
        },
        tableContainer: {},
        sticky: {
            container: {},
            table: {},
            tableHeader: {},
            tableRow: {},
            tableData: {}
        },
        scroll: {
            container: {},
            table: {},
            tableHeader: {},
            tableRow: {},
            tableData: {}
        },
        sortButtons: {
            button: {},
            active: {}
        }
    };

    function mergeDefaultClasses(classes) {
      return deepmerge_1(DEFAULT_CLASSES, classes);
    }

    function mergeDefaultStyle(style) {
      return deepmerge_1(DEFAULT_STYLES, style);
    }

    var PaginationButtonType = {
      NUMBER: 'NUMBER',
      LEFT: 'LEFT',
      RIGHT: 'RIGHT',
      ELLIPSIS: 'ELLIPSIS'
    };

    /**
     * @typedef {Object} PaginationButton
     * @property {number} page
     * @property {string} label
     * @property {boolean} disabled
     * @property {boolean} current
     * @property {PaginationButtonType} type
     */

    /**
     * Returns an array of pagination buttons
     * @param {number} totalPages
     * @param {number} currentPage
     * @returns {Array<PaginationButton>} pagination buttons
     */
    function getPaginationButtons(totalPages, currentPage) {
      if (totalPages < 1) { return []; }
      if (currentPage < 1) { currentPage = 1; }
      if (currentPage > totalPages) { currentPage = totalPages; }

      if (totalPages <= 7) {
        // Variant complete

        return [
          getPreviousButton(currentPage === 1) ].concat( Array.from({ length: totalPages }, function (_, i) { return ({
            page: i + 1,
            label: i + 1,
            disabled: false,
            current: i + 1 === currentPage,
            buttonType: PaginationButtonType.NUMBER
          }); }),
          [getNextButton(currentPage === totalPages)]
        );
      }

      if (totalPages > 7 && currentPage <= 4) {
        // Variant from left
        return [
          getPreviousButton(currentPage === 1) ].concat( Array.from({ length: 5 }, function (_, i) { return ({
            page: i + 1,
            label: i + 1,
            disabled: false,
            current: i + 1 === currentPage,
            buttonType: PaginationButtonType.NUMBER
          }); }),
          [getEllipsisButton()],
          [{
            page: totalPages,
            label: totalPages,
            disabled: false,
            current: false,
            buttonType: PaginationButtonType.NUMBER
          }],
          [getNextButton(currentPage === totalPages)]
        );
      }

      var compare = 4;
      if (totalPages > 7 && currentPage > totalPages - compare) {
        // Variant from right
        return [
          getPreviousButton(currentPage === 1),
          {
            page: 1,
            label: 1,
            disabled: false,
            current: false,
            buttonType: PaginationButtonType.NUMBER
          },
          getEllipsisButton() ].concat( Array.from({ length: 5 }, function (_, i) { return ({
            page: totalPages - compare + i,
            label: totalPages - compare + i,
            disabled: false,
            current: totalPages - compare + i === currentPage,
            buttonType: PaginationButtonType.NUMBER
          }); }),
          [getNextButton(currentPage === totalPages)]
        );
      }

      // Variant from middle
      if (totalPages > 7 && currentPage > 4 && currentPage <= totalPages - 4) {
        return [
          getPreviousButton(currentPage === 1),
          {
            page: 1,
            label: 1,
            disabled: false,
            current: false,
            buttonType: PaginationButtonType.NUMBER
          },
          getEllipsisButton() ].concat( Array.from({ length: 3 }, function (_, i) { return ({
            page: currentPage - 1 + i,
            label: currentPage - 1 + i,
            disabled: false,
            current: currentPage - 1 + i === currentPage,
            buttonType: PaginationButtonType.NUMBER
          }); }),
          [getEllipsisButton()],
          [{
            page: totalPages,
            label: totalPages,
            disabled: false,
            current: false,
            buttonType: PaginationButtonType.NUMBER
          }],
          [getNextButton(currentPage === totalPages)]
        );
      }
    }

    function getPreviousButton(disabled) {
      return {
        page: -1,
        label: 'Previous',
        disabled: disabled,
        current: false,
        buttonType: PaginationButtonType.LEFT
      };
    }

    function getNextButton(disabled) {
      return {
        page: -1,
        label: 'Next',
        disabled: disabled,
        current: false,
        buttonType: PaginationButtonType.RIGHT
      };
    }

    function getEllipsisButton() {
      return {
        page: -1,
        label: '...',
        disabled: false,
        current: false,
        buttonType: PaginationButtonType.ELLIPSIS
      };
    }

    //

    var script$3 = {
      data: function data() {
        return {
          page: 1
        };
      },

      props: {
        paginationStyles: {
          type: Object,
          default: function default$1() {
            return mergeDefaultStyle({});
          }
        },
        paginationClasses: {
          type: Object,
          default: function default$2() {
            return mergeDefaultClasses({});
          }
        },

        pages: {
          type: Number,
          default: function default$3() {
            return 1;
          }
        }
      },
      methods: {
        paginate: function paginate(num) {
          this.page = num;
          this.$emit('on-paginated', num);
        },
        onClick: function onClick(buttonType, index) {
          var this$1 = this;

          var actions = {
            LEFT: function () { return this$1.paginate(this$1.page - 1); },
            RIGHT: function () { return this$1.paginate(this$1.page + 1); },
            ELLIPSIS: function () {
              /* do nothing */
            },
            default: function () { return this$1.paginate(index); }
          };

          return (actions[buttonType] || actions.default)();
        }
      },
      computed: {
        paginationButtons: function paginationButtons() {
          return getPaginationButtons(this.pages, this.page);
        }
      }
    };

    /* script */
                var __vue_script__$3 = script$3;
                
    /* template */
    var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"vst_pagination_links",class:[].concat( _vm.paginationClasses.links.container ),style:(_vm.paginationStyles.links.container)},_vm._l((_vm.paginationButtons),function(button,index){return _c('button',{key:("scroll-table-pagination-link-" + index),class:[{ s_active: button.current }, [].concat( _vm.paginationClasses.links.buttons )],style:(_vm.paginationStyles.links.buttons),attrs:{"disabled":button.disabled},on:{"click":function($event){_vm.onClick(button.buttonType, button.page);}}},[(button.buttonType === 'LEFT')?[_vm._v("\n        <\n      ")]:(button.buttonType === 'RIGHT')?[_vm._v("\n        >\n      ")]:(button.buttonType === 'ELLIPSIS')?[_vm._v("\n        ...\n      ")]:[_vm._v("\n      "+_vm._s(button.page)+"\n      ")]],2)}))};
    var __vue_staticRenderFns__$3 = [];

      /* style */
      var __vue_inject_styles__$3 = function (inject) {
        if (!inject) { return }
        inject("data-v-7c0fdea6_0", { source: "\n.s_active{background-color:#ccc\n}", map: undefined, media: undefined });

      };
      /* scoped */
      var __vue_scope_id__$3 = undefined;
      /* module identifier */
      var __vue_module_identifier__$3 = undefined;
      /* functional template */
      var __vue_is_functional_template__$3 = false;
      /* component normalizer */
      function __vue_normalize__$3(
        template, style, script,
        scope, functional, moduleIdentifier,
        createInjector, createInjectorSSR
      ) {
        var component = (typeof script === 'function' ? script.options : script) || {};

        // For security concerns, we use only base name in production mode.
        component.__file = "Pagination.vue";

        if (!component.render) {
          component.render = template.render;
          component.staticRenderFns = template.staticRenderFns;
          component._compiled = true;

          if (functional) { component.functional = true; }
        }

        component._scopeId = scope;

        {
          var hook;
          if (style) {
            hook = function(context) {
              style.call(this, createInjector(context));
            };
          }

          if (hook !== undefined) {
            if (component.functional) {
              // register for functional component in vue file
              var originalRender = component.render;
              component.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context)
              };
            } else {
              // inject component registration as beforeCreate hook
              var existing = component.beforeCreate;
              component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
            }
          }
        }

        return component
      }
      /* style inject */
      function __vue_create_injector__$2() {
        var head = document.head || document.getElementsByTagName('head')[0];
        var styles = __vue_create_injector__$2.styles || (__vue_create_injector__$2.styles = {});
        var isOldIE =
          typeof navigator !== 'undefined' &&
          /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

        return function addStyle(id, css) {
          if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.

          var group = isOldIE ? css.media || 'default' : id;
          var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

          if (!style.ids.includes(id)) {
            var code = css.source;
            var index = style.ids.length;

            style.ids.push(id);

            if (css.map) {
              // https://developer.chrome.com/devtools/docs/javascript-debugging
              // this makes source maps inside style tags work properly in Chrome
              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
              // http://stackoverflow.com/a/26603875
              code +=
                '\n/*# sourceMappingURL=data:application/json;base64,' +
                btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                ' */';
            }

            if (isOldIE) {
              style.element = style.element || document.querySelector('style[data-group=' + group + ']');
            }

            if (!style.element) {
              var el = style.element = document.createElement('style');
              el.type = 'text/css';

              if (css.media) { el.setAttribute('media', css.media); }
              if (isOldIE) {
                el.setAttribute('data-group', group);
                el.setAttribute('data-next-index', '0');
              }

              head.appendChild(el);
            }

            if (isOldIE) {
              index = parseInt(style.element.getAttribute('data-next-index'));
              style.element.setAttribute('data-next-index', index + 1);
            }

            if (style.element.styleSheet) {
              style.parts.push(code);
              style.element.styleSheet.cssText = style.parts
                .filter(Boolean)
                .join('\n');
            } else {
              var textNode = document.createTextNode(code);
              var nodes = style.element.childNodes;
              if (nodes[index]) { style.element.removeChild(nodes[index]); }
              if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
              else { style.element.appendChild(textNode); }
            }
          }
        }
      }
      /* style inject SSR */
      

      
      var Pagination = __vue_normalize__$3(
        { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 },
        __vue_inject_styles__$3,
        __vue_script__$3,
        __vue_scope_id__$3,
        __vue_is_functional_template__$3,
        __vue_module_identifier__$3,
        __vue_create_injector__$2,
        undefined
      );

    //

    var script$4 = {
      name: 'scroll-table',

      mounted: function mounted() {
        if (this.limits.length) {
          this.limit = this.limits[0];
        }
        if (this.hasScroll) {
          window.addEventListener('resize', this.handleResize);
        }
        this.$nextTick(this.handleResize);
      },
      beforeDestroy: function() {
        if (this.hasScroll) {
          window.removeEventListener('resize', this.handleResize);
        }
      },
      props: {
        limits: {
          type: Array,
          default: function defaultValue() {
            return [25, 50, 100];
          }
        },
        hasScroll: {
          default: false
        },
        data: {
          default: function default$1() {
            return [];
          }
        },
        headers: {
          default: function default$2() {
            return [];
          }
        },
        styles: {
          type: Object,
          default: function default$3() {
            return mergeDefaultStyle({});
          }
        },
        classes: {
          type: Object,
          default: function default$4() {
            return mergeDefaultClasses({});
          }
        },
        translations: {
          type: Object,
          default: function default$5() {
            return {
              limit: 'per page'
            };
          }
        }
      },
      watch: {
        limit: function limit() {
          this.page = 1;
        }
      },
      data: function data() {
        return {
          loading: false,
          limit: 0,
          page: 1,
          sortKey: 'naam',
          direction: 'descending',
          mergedClasses: mergeDefaultClasses(this.classes),
          mergedStyles: mergeDefaultStyle(this.styles)
        };
      },
      computed: {
        limitedData: function limitedData() {
          var this$1 = this;

          var vue = this;

          var sortCallback = (function () {
            if (this$1.data.length === 0) {
              return function () {
                return 0;
              };
            }

            if (typeof this$1.data[0][this$1.sortKey] === 'object') {
              // Sort callback for row array with data objects
              return function (a, b) {
                if (a[this$1.sortKey].value > b[this$1.sortKey].value)
                  { return this$1.direction === 'descending' ? -1 : 1; }
                if (a[this$1.sortKey].value < b[this$1.sortKey].value)
                  { return this$1.direction === 'descending' ? 1 : -1; }
                return 0;
              };
            }
            // Sort callback for row array with simple string values
            return function (a, b) {
              if (a[this$1.sortKey] > b[this$1.sortKey])
                { return this$1.direction === 'descending' ? -1 : 1; }
              if (a[this$1.sortKey] < b[this$1.sortKey])
                { return this$1.direction === 'descending' ? 1 : -1; }
              return 0;
            };
          })();

          var limitedData = [].concat( this.data ).sort(sortCallback).filter(function (row, i) {
            if (i >= (vue.page - 1) * vue.limit && i < vue.page * vue.limit)
              { return true; }
            return false;
          });

          if (!this.limit) { return this.data || []; }
          return limitedData;
        },
        pages: function pages() {
          if (!this.data.length || !this.limit) { return 0; }
          var pages = Math.ceil(this.data.length / this.limit);
          return pages;
        }
      },
      methods: {
        paginate: function paginate(num) {
          this.page = num;
        },
        sortBy: function sortBy(key) {
          this.direction =
            this.direction === 'descending' ? 'ascending' : 'descending';
          this.sortKey = key;
        },
        handleResize: function handleResize() {
          if (!this.hasScroll) {
            return;
          }
          this.$refs.overlay.$el.style.width = (this.$refs.scroll.$el.offsetWidth) + "px";
        }
      },
      components: {
        TablePart: TablePart,
        Loader: Loader,
        Pagination: Pagination
      }
    };

    /* script */
                var __vue_script__$4 = script$4;
                
    /* template */
    var __vue_render__$4 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.data)?_c('div',{staticClass:"vst_table-component-container"},[_c('div',{staticClass:"vst_pagination-container a_margin-bottom-20",class:[].concat( _vm.mergedClasses.pagination.container ),style:(_vm.mergedStyles.pagination.container)},[_c('div',{staticClass:"vst_pagination_limit a_margin-right-20",class:[].concat( _vm.mergedClasses.pagination.limit.container ),style:(_vm.mergedStyles.pagination.limit.container)},[_c('select',{directives:[{name:"model",rawName:"v-model",value:(_vm.limit),expression:"limit"}],staticClass:"v_transparent",class:[].concat( _vm.mergedClasses.pagination.limit.dropdown ),style:(_vm.mergedStyles.pagination.limit.dropdown),on:{"change":function($event){var $$selectedVal = Array.prototype.filter.call($event.target.options,function(o){return o.selected}).map(function(o){var val = "_value" in o ? o._value : o.value;return val}); _vm.limit=$event.target.multiple ? $$selectedVal : $$selectedVal[0];}}},_vm._l((_vm.limits),function(limit,i){return _c('option',{key:("scroll-table-limit-" + i),domProps:{"value":limit}},[_vm._v("\n          "+_vm._s(limit)+" "+_vm._s(_vm.translations.limit)+"\n        ")])}))]),_vm._v(" "),_c('pagination',{staticClass:"vst_pagination_links",attrs:{"classes":_vm.classes,"styles":_vm.styles,"pages":_vm.pages,"paginationClasses":_vm.mergedClasses.pagination,"paginationStyles":_vm.mergedStyles.pagination,"limits":_vm.limits,"translations":_vm.translations},on:{"on-paginated":_vm.paginate}})],1),_vm._v(" "),_c('div',{staticClass:"vst_table-container",class:[{ 'v_has-scroll': _vm.hasScroll } ].concat( _vm.mergedClasses.tableContainer),style:(_vm.mergedStyles.tableContainer)},[(_vm.hasScroll)?_c('div',{staticClass:"vst_table-overlay",class:[].concat( _vm.mergedClasses.sticky.container ),style:(Object.assign({ 'width': ((_vm.headers[0].width) + "px") }, _vm.mergedStyles.sticky.container))},[_c('table-part',{ref:"overlay",attrs:{"classes":Object.assign(_vm.mergedClasses.sticky, _vm.mergedClasses.sortButtons),"styles":Object.assign(_vm.mergedStyles.sticky, _vm.mergedStyles.sortButtons),"headers":_vm.headers,"data":_vm.limitedData,"direction":_vm.direction},on:{"sort":function($event){_vm.sortBy($event);}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})])},[_vm._l((Object.keys(_vm.$slots)),function(slot){return _vm._t(slot,null,{slot:slot})})],2)],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"vst_table-scroll",class:[].concat( _vm.mergedClasses.scroll.container ),style:(_vm.mergedStyles.scroll.container)},[_c('table-part',{ref:"scroll",attrs:{"classes":Object.assign(_vm.mergedClasses.scroll, _vm.mergedClasses.sortButtons),"styles":Object.assign(_vm.mergedStyles.scroll, _vm.mergedStyles.sortButtons),"headers":_vm.headers,"data":_vm.limitedData,"direction":_vm.direction},on:{"sort":function($event){_vm.sortBy($event);}},scopedSlots:_vm._u([_vm._l((Object.keys(_vm.$scopedSlots)),function(slot){return {key:slot,fn:function(scope){return [_vm._t(slot,null,null,scope)]}}})])},[_vm._l((Object.keys(_vm.$slots)),function(slot){return _vm._t(slot,null,{slot:slot})})],2)],1)]),_vm._v(" "),(!_vm.data)?_c('loader',{attrs:{"loading":_vm.loading}}):_vm._e()],1):_vm._e()};
    var __vue_staticRenderFns__$4 = [];

      /* style */
      var __vue_inject_styles__$4 = function (inject) {
        if (!inject) { return }
        inject("data-v-1146f9d6_0", { source: "\n.a_margin-top-0{margin-top:0!important\n}\n.a_margin-right-0{margin-right:0!important\n}\n.a_margin-bottom-0{margin-bottom:0!important\n}\n.a_margin-left-0{margin-left:0!important\n}\n.a_margin-top-10{margin-top:5px!important\n}\n.a_margin-right-10{margin-right:5px!important\n}\n.a_margin-bottom-10{margin-bottom:5px!important\n}\n.a_margin-left-10{margin-left:5px!important\n}\n.a_margin-top-20{margin-top:10px!important\n}\n.a_margin-right-20{margin-right:10px!important\n}\n.a_margin-bottom-20{margin-bottom:10px!important\n}\n.a_margin-left-20{margin-left:10px!important\n}\n.a_margin-top-40{margin-top:20px!important\n}\n.a_margin-right-40{margin-right:20px!important\n}\n.a_margin-bottom-40{margin-bottom:20px!important\n}\n.a_margin-left-40{margin-left:20px!important\n}\n.a_margin-top-60{margin-top:30px!important\n}\n.a_margin-right-60{margin-right:30px!important\n}\n.a_margin-bottom-60{margin-bottom:30px!important\n}\n.a_margin-left-60{margin-left:30px!important\n}\n.a_margin-top-80{margin-top:40px!important\n}\n.a_margin-right-80{margin-right:40px!important\n}\n.a_margin-bottom-80{margin-bottom:40px!important\n}\n.a_margin-left-80{margin-left:40px!important\n}\n.a_margin-top-100{margin-top:50px!important\n}\n.a_margin-right-100{margin-right:50px!important\n}\n.a_margin-bottom-100{margin-bottom:50px!important\n}\n.a_margin-left-100{margin-left:50px!important\n}\n@media (min-width:800px){\n.a_margin-top-0{margin-top:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-0{margin-right:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-0{margin-bottom:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-0{margin-left:0!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-10{margin-top:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-10{margin-right:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-10{margin-bottom:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-10{margin-left:10px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-20{margin-top:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-20{margin-right:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-20{margin-bottom:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-20{margin-left:20px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-40{margin-top:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-40{margin-right:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-40{margin-bottom:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-40{margin-left:40px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-60{margin-top:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-60{margin-right:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-60{margin-bottom:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-60{margin-left:60px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-80{margin-top:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-80{margin-right:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-80{margin-bottom:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-80{margin-left:80px!important\n}\n}\n@media (min-width:800px){\n.a_margin-top-100{margin-top:100px!important\n}\n}\n@media (min-width:800px){\n.a_margin-right-100{margin-right:100px!important\n}\n}\n@media (min-width:800px){\n.a_margin-bottom-100{margin-bottom:100px!important\n}\n}\n@media (min-width:800px){\n.a_margin-left-100{margin-left:100px!important\n}\n}\n.a_padding-top-0{padding-top:0!important\n}\n.a_padding-bottom-0{padding-bottom:0!important\n}\n@media (min-width:800px){\n.a_padding-top-0{padding-top:0!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-0{padding-bottom:0!important\n}\n}\n.a_padding-0{padding:0!important\n}\n@media (min-width:800px){\n.a_padding-0{padding:0!important\n}\n}\n.a_padding-top-10{padding-top:5px!important\n}\n.a_padding-bottom-10{padding-bottom:5px!important\n}\n@media (min-width:800px){\n.a_padding-top-10{padding-top:10px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-10{padding-bottom:10px!important\n}\n}\n.a_padding-10{padding:5px!important\n}\n@media (min-width:800px){\n.a_padding-10{padding:10px!important\n}\n}\n.a_padding-top-20{padding-top:10px!important\n}\n.a_padding-bottom-20{padding-bottom:10px!important\n}\n@media (min-width:800px){\n.a_padding-top-20{padding-top:20px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-20{padding-bottom:20px!important\n}\n}\n.a_padding-20{padding:10px!important\n}\n@media (min-width:800px){\n.a_padding-20{padding:20px!important\n}\n}\n.a_padding-top-40{padding-top:20px!important\n}\n.a_padding-bottom-40{padding-bottom:20px!important\n}\n@media (min-width:800px){\n.a_padding-top-40{padding-top:40px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-40{padding-bottom:40px!important\n}\n}\n.a_padding-40{padding:20px!important\n}\n@media (min-width:800px){\n.a_padding-40{padding:40px!important\n}\n}\n.a_padding-top-60{padding-top:30px!important\n}\n.a_padding-bottom-60{padding-bottom:30px!important\n}\n@media (min-width:800px){\n.a_padding-top-60{padding-top:60px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-60{padding-bottom:60px!important\n}\n}\n.a_padding-60{padding:30px!important\n}\n@media (min-width:800px){\n.a_padding-60{padding:60px!important\n}\n}\n.a_padding-top-80{padding-top:40px!important\n}\n.a_padding-bottom-80{padding-bottom:40px!important\n}\n@media (min-width:800px){\n.a_padding-top-80{padding-top:80px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-80{padding-bottom:80px!important\n}\n}\n.a_padding-80{padding:40px!important\n}\n@media (min-width:800px){\n.a_padding-80{padding:80px!important\n}\n}\n.a_padding-top-100{padding-top:50px!important\n}\n.a_padding-bottom-100{padding-bottom:50px!important\n}\n@media (min-width:800px){\n.a_padding-top-100{padding-top:100px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-100{padding-bottom:100px!important\n}\n}\n.a_padding-100{padding:50px!important\n}\n@media (min-width:800px){\n.a_padding-100{padding:100px!important\n}\n}\n.a_padding-top-120{padding-top:60px!important\n}\n.a_padding-bottom-120{padding-bottom:60px!important\n}\n@media (min-width:800px){\n.a_padding-top-120{padding-top:120px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-120{padding-bottom:120px!important\n}\n}\n.a_padding-120{padding:60px!important\n}\n@media (min-width:800px){\n.a_padding-120{padding:120px!important\n}\n}\n.a_padding-top-140{padding-top:70px!important\n}\n.a_padding-bottom-140{padding-bottom:70px!important\n}\n@media (min-width:800px){\n.a_padding-top-140{padding-top:140px!important\n}\n}\n@media (min-width:800px){\n.a_padding-bottom-140{padding-bottom:140px!important\n}\n}\n.a_padding-140{padding:70px!important\n}\n@media (min-width:800px){\n.a_padding-140{padding:140px!important\n}\n}\n*{box-sizing:border-box\n}\n.vst_table-container{width:100%;position:relative\n}\n.vst_table-container.v_has-scroll .vst_table-overlay{height:calc(100% - 16px)\n}\n.vst_table-overlay{height:100%;background-color:#fff;position:absolute;top:0;left:0;overflow:hidden;z-index:1\n}\n.vst_table-overlay.v_has-scroll{display:none\n}\n.vst_table-scroll{overflow-x:auto\n}\n.vst_table-scroll table{width:100%\n}\n.vst_loader{width:100%;height:100%;position:absolute;top:0;left:calc(100% - 42px)\n}", map: undefined, media: undefined });

      };
      /* scoped */
      var __vue_scope_id__$4 = undefined;
      /* module identifier */
      var __vue_module_identifier__$4 = undefined;
      /* functional template */
      var __vue_is_functional_template__$4 = false;
      /* component normalizer */
      function __vue_normalize__$4(
        template, style, script,
        scope, functional, moduleIdentifier,
        createInjector, createInjectorSSR
      ) {
        var component = (typeof script === 'function' ? script.options : script) || {};

        // For security concerns, we use only base name in production mode.
        component.__file = "ScrollTable.vue";

        if (!component.render) {
          component.render = template.render;
          component.staticRenderFns = template.staticRenderFns;
          component._compiled = true;

          if (functional) { component.functional = true; }
        }

        component._scopeId = scope;

        {
          var hook;
          if (style) {
            hook = function(context) {
              style.call(this, createInjector(context));
            };
          }

          if (hook !== undefined) {
            if (component.functional) {
              // register for functional component in vue file
              var originalRender = component.render;
              component.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context)
              };
            } else {
              // inject component registration as beforeCreate hook
              var existing = component.beforeCreate;
              component.beforeCreate = existing ? [].concat(existing, hook) : [hook];
            }
          }
        }

        return component
      }
      /* style inject */
      function __vue_create_injector__$3() {
        var head = document.head || document.getElementsByTagName('head')[0];
        var styles = __vue_create_injector__$3.styles || (__vue_create_injector__$3.styles = {});
        var isOldIE =
          typeof navigator !== 'undefined' &&
          /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());

        return function addStyle(id, css) {
          if (document.querySelector('style[data-vue-ssr-id~="' + id + '"]')) { return } // SSR styles are present.

          var group = isOldIE ? css.media || 'default' : id;
          var style = styles[group] || (styles[group] = { ids: [], parts: [], element: undefined });

          if (!style.ids.includes(id)) {
            var code = css.source;
            var index = style.ids.length;

            style.ids.push(id);

            if (css.map) {
              // https://developer.chrome.com/devtools/docs/javascript-debugging
              // this makes source maps inside style tags work properly in Chrome
              code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
              // http://stackoverflow.com/a/26603875
              code +=
                '\n/*# sourceMappingURL=data:application/json;base64,' +
                btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
                ' */';
            }

            if (isOldIE) {
              style.element = style.element || document.querySelector('style[data-group=' + group + ']');
            }

            if (!style.element) {
              var el = style.element = document.createElement('style');
              el.type = 'text/css';

              if (css.media) { el.setAttribute('media', css.media); }
              if (isOldIE) {
                el.setAttribute('data-group', group);
                el.setAttribute('data-next-index', '0');
              }

              head.appendChild(el);
            }

            if (isOldIE) {
              index = parseInt(style.element.getAttribute('data-next-index'));
              style.element.setAttribute('data-next-index', index + 1);
            }

            if (style.element.styleSheet) {
              style.parts.push(code);
              style.element.styleSheet.cssText = style.parts
                .filter(Boolean)
                .join('\n');
            } else {
              var textNode = document.createTextNode(code);
              var nodes = style.element.childNodes;
              if (nodes[index]) { style.element.removeChild(nodes[index]); }
              if (nodes.length) { style.element.insertBefore(textNode, nodes[index]); }
              else { style.element.appendChild(textNode); }
            }
          }
        }
      }
      /* style inject SSR */
      

      
      var component = __vue_normalize__$4(
        { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 },
        __vue_inject_styles__$4,
        __vue_script__$4,
        __vue_scope_id__$4,
        __vue_is_functional_template__$4,
        __vue_module_identifier__$4,
        __vue_create_injector__$3,
        undefined
      );

    // Import vue component

    // Declare install function executed by Vue.use()
    function install(Vue) {
    	if (install.installed) { return; }
    	install.installed = true;
    	Vue.component('scroll-table', component);
    }

    // Create module definition for Vue.use()
    var plugin = {
    	install: install,
    };

    // Auto-install when vue is found (eg. in browser via <script> tag)
    var GlobalVue = null;
    if (typeof window !== 'undefined') {
    	GlobalVue = window.Vue;
    } else if (typeof global !== 'undefined') {
    	GlobalVue = global.Vue;
    }
    if (GlobalVue) {
    	GlobalVue.use(plugin);
    }

    exports.install = install;
    exports.default = component;

    Object.defineProperty(exports, '__esModule', { value: true });

})));