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,291 lines 52 kB
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//

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);
}

export default component;
export { install };