vue-good-table
Version:
A simple, clean data table for VueJS (2.x) with essential features like sorting, column filtering, pagination etc
1,717 lines (1,600 loc) • 73.3 kB
JavaScript
/**
* vue-good-table v2.12.1
* (c) 2018-present xaksis <shay@crayonbits.com>
* https://github.com/xaksis/vue-good-table
* Released under the MIT License.
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var diacriticless = _interopDefault(require('diacriticless'));
var cloneDeep = _interopDefault(require('lodash.clonedeep'));
var assign = _interopDefault(require('lodash.assign'));
var dateFns = require('date-fns');
var clone = _interopDefault(require('lodash.clone'));
var each = _interopDefault(require('lodash.foreach'));
var filter = _interopDefault(require('lodash.filter'));
function _typeof(obj) {
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) {
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
return arr2;
}
}
function _iterableToArray(iter) {
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance");
}
var escapeRegExp = function escapeRegExp(str) {
return str.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&');
};
var def = {
format: function format(x) {
return x;
},
filterPredicate: function filterPredicate(rowval, filter$$1) {
// take care of nulls
if (typeof rowval === 'undefined' || rowval === null) {
return false;
} // row value
var rowValue = diacriticless(String(rowval).toLowerCase()); // search term
var searchTerm = diacriticless(escapeRegExp(filter$$1).toLowerCase()); // comparison
return rowValue.search(searchTerm) > -1;
},
compare: function compare(x, y) {
function cook(d) {
if (typeof d === 'undefined' || d === null) return '';
return d.toLowerCase();
}
x = cook(x);
y = cook(y);
if (x < y) return -1;
if (x > y) return 1;
return 0;
}
};
var VgtPaginationPageInfo = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "footer__navigation__page-info"
}, [_vm._v(" " + _vm._s(_vm.pageText) + " "), _c('input', {
staticClass: "footer__navigation__page-info__current-entry",
attrs: {
"type": "text"
},
domProps: {
"value": _vm.currentPage
},
on: {
"keyup": function keyup($event) {
if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
return null;
}
$event.stopPropagation();
return _vm.changePage($event);
}
}
}), _vm._v(" " + _vm._s(_vm.pageInfo) + " ")]);
},
staticRenderFns: [],
_scopeId: 'data-v-731a4dda',
name: 'VgtPaginationPageInfo',
props: {
currentPerPage: {
default: 10
},
currentPage: {
default: 1
},
totalRecords: {
default: 0
},
ofText: {
default: 'of',
type: String
},
pageText: {
default: 'page',
type: String
}
},
data: function data() {
return {};
},
computed: {
pageInfo: function pageInfo() {
return "".concat(this.ofText, " ").concat(this.lastPage);
},
lastPage: function lastPage() {
return this.currentPerPage === -1 ? 1 : Math.ceil(this.totalRecords / this.currentPerPage);
}
},
methods: {
changePage: function changePage(event) {
var value = parseInt(event.target.value, 10); //! invalid number
if (Number.isNaN(value) || value > this.lastPage || value < 1) {
event.target.value = this.currentPage;
return false;
} //* valid number
event.target.value = value;
this.$emit('page-changed', value);
}
},
mounted: function mounted() {},
components: {}
};
var VgtPagination = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "vgt-wrap__footer vgt-clearfix"
}, [_c('div', {
staticClass: "footer__row-count vgt-pull-left"
}, [_c('span', {
staticClass: "footer__row-count__label"
}, [_vm._v(_vm._s(_vm.rowsPerPageText))]), _vm._v(" "), _c('select', {
directives: [{
name: "model",
rawName: "v-model",
value: _vm.currentPerPage,
expression: "currentPerPage"
}],
staticClass: "footer__row-count__select",
attrs: {
"autocomplete": "off",
"name": "perPageSelect"
},
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.currentPerPage = $event.target.multiple ? $$selectedVal : $$selectedVal[0];
}, _vm.perPageChanged]
}
}, [_vm._l(_vm.getRowsPerPageDropdown(), function (option, idx) {
return _c('option', {
key: 'rows-dropdown-option-' + idx,
domProps: {
"value": option
}
}, [_vm._v(" " + _vm._s(option) + " ")]);
}), _vm._v(" "), _vm.paginateDropdownAllowAll ? _c('option', {
attrs: {
"value": "-1"
}
}, [_vm._v(_vm._s(_vm.allText))]) : _vm._e()], 2)]), _vm._v(" "), _c('div', {
staticClass: "footer__navigation vgt-pull-right"
}, [_c('a', {
staticClass: "footer__navigation__page-btn",
class: {
disabled: !_vm.prevIsPossible
},
attrs: {
"href": "javascript:undefined",
"tabindex": "0"
},
on: {
"click": function click($event) {
$event.preventDefault();
$event.stopPropagation();
return _vm.previousPage($event);
}
}
}, [_c('span', {
staticClass: "chevron",
class: {
'left': !_vm.rtl,
'right': _vm.rtl
}
}), _vm._v(" "), _c('span', [_vm._v(_vm._s(_vm.prevText))])]), _vm._v(" "), _vm.mode === 'pages' ? _c('pagination-page-info', {
attrs: {
"totalRecords": _vm.total,
"currentPerPage": _vm.currentPerPage,
"currentPage": _vm.currentPage,
"ofText": _vm.ofText,
"pageText": _vm.pageText
},
on: {
"page-changed": _vm.changePage
}
}) : _c('div', {
staticClass: "footer__navigation__info"
}, [_vm._v(_vm._s(_vm.paginatedInfo))]), _vm._v(" "), _c('a', {
staticClass: "footer__navigation__page-btn",
class: {
disabled: !_vm.nextIsPossible
},
attrs: {
"href": "javascript:undefined",
"tabindex": "0"
},
on: {
"click": function click($event) {
$event.preventDefault();
$event.stopPropagation();
return _vm.nextPage($event);
}
}
}, [_c('span', [_vm._v(_vm._s(_vm.nextText))]), _vm._v(" "), _c('span', {
staticClass: "chevron",
class: {
'right': !_vm.rtl,
'left': _vm.rtl
}
})])], 1)]);
},
staticRenderFns: [],
name: 'VgtPagination',
props: {
styleClass: {
default: 'table table-bordered'
},
total: {
default: null
},
perPage: {},
rtl: {
default: false
},
customRowsPerPageDropdown: {
default: function _default() {
return [];
}
},
paginateDropdownAllowAll: {
default: true
},
mode: {
default: 'records'
},
// text options
nextText: {
default: 'Next'
},
prevText: {
default: 'Prev'
},
rowsPerPageText: {
default: 'Rows per page:'
},
ofText: {
default: 'of'
},
pageText: {
default: 'page'
},
allText: {
default: 'All'
}
},
data: function data() {
return {
currentPage: 1,
currentPerPage: 10,
rowsPerPageOptions: [],
defaultRowsPerPageDropdown: [10, 20, 30, 40, 50]
};
},
watch: {
perPage: function perPage() {
this.handlePerPage();
this.perPageChanged();
},
customRowsPerPageDropdown: function customRowsPerPageDropdown() {
if (this.customRowsPerPageDropdown !== null && Array.isArray(this.customRowsPerPageDropdown) && this.customRowsPerPageDropdown.lenght !== 0) {
this.rowsPerPageOptions = this.customRowsPerPageDropdown;
}
}
},
computed: {
currentPerPageString: function currentPerPageString() {
return this.currentPerPage === -1 ? 'All' : this.currentPerPage;
},
paginatedInfo: function paginatedInfo() {
if (this.currentPerPage === -1) {
return "1 - ".concat(this.total, " ").concat(this.ofText, " ").concat(this.total);
}
var first = (this.currentPage - 1) * this.currentPerPage + 1 ? (this.currentPage - 1) * this.currentPerPage + 1 : 1;
if (first > this.total) {
// this probably happened as a result of filtering
first = 1;
this.currentPage = 1;
}
var last = Math.min(this.total, this.currentPerPage * this.currentPage);
return "".concat(first, " - ").concat(last, " ").concat(this.ofText, " ").concat(this.total);
},
nextIsPossible: function nextIsPossible() {
return this.currentPerPage === -1 ? false : this.total > this.currentPerPage * this.currentPage;
},
prevIsPossible: function prevIsPossible() {
return this.currentPage > 1;
}
},
methods: {
// optionSelected(option) {
// return this.currentPerPage === option;
// },
reset: function reset() {},
changePage: function changePage(pageNumber) {
if (pageNumber > 0 && this.total > this.currentPerPage * (pageNumber - 1)) {
this.currentPage = pageNumber;
this.pageChanged();
}
},
nextPage: function nextPage() {
if (this.currentPerPage === -1) return;
if (this.nextIsPossible) {
++this.currentPage;
this.pageChanged();
}
},
previousPage: function previousPage() {
if (this.currentPage > 1) {
--this.currentPage;
this.pageChanged();
}
},
pageChanged: function pageChanged() {
this.$emit('page-changed', {
currentPage: this.currentPage
});
},
perPageChanged: function perPageChanged(event) {
if (event) {
this.currentPerPage = parseInt(event.target.value, 10);
}
if (this.currentPerPage === -1) {
// reset current page to 1
this.currentPage = 1;
}
this.$emit('per-page-changed', {
currentPerPage: this.currentPerPage
});
},
getRowsPerPageDropdown: function getRowsPerPageDropdown() {
return this.rowsPerPageOptions;
},
handlePerPage: function handlePerPage() {
this.rowsPerPageOptions = cloneDeep(this.defaultRowsPerPageDropdown);
if (this.perPage) {
this.currentPerPage = this.perPage; // if perPage doesn't already exist, we add it
var found = false;
for (var i = 0; i < this.rowsPerPageOptions.length; i++) {
if (this.rowsPerPageOptions[i] === this.perPage) {
found = true;
}
}
if (!found && this.perPage !== -1) this.rowsPerPageOptions.push(this.perPage);
} else {
// reset to default
this.currentPerPage = 10;
}
if (this.customRowsPerPageDropdown !== null && Array.isArray(this.customRowsPerPageDropdown) && this.customRowsPerPageDropdown.length !== 0) {
this.rowsPerPageOptions = this.customRowsPerPageDropdown;
}
}
},
mounted: function mounted() {
this.handlePerPage();
},
components: {
'pagination-page-info': VgtPaginationPageInfo
}
};
var VgtGlobalSearch = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _vm.showControlBar ? _c('div', {
staticClass: "vgt-global-search vgt-clearfix"
}, [_c('div', {
staticClass: "vgt-global-search__input vgt-pull-left"
}, [_vm.searchEnabled ? _c('span', {
staticClass: "input__icon"
}, [_c('div', {
staticClass: "magnifying-glass"
})]) : _vm._e(), _vm._v(" "), _vm.searchEnabled ? _c('input', {
staticClass: "vgt-input vgt-pull-left",
attrs: {
"type": "text",
"placeholder": _vm.globalSearchPlaceholder
},
domProps: {
"value": _vm.value
},
on: {
"input": function input($event) {
_vm.updateValue($event.target.value);
},
"keyup": function keyup($event) {
if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
return null;
}
_vm.entered($event.target.value);
}
}
}) : _vm._e()]), _vm._v(" "), _c('div', {
staticClass: "vgt-global-search__actions vgt-pull-right"
}, [_vm._t("internal-table-actions")], 2)]) : _vm._e();
},
staticRenderFns: [],
name: 'VgtGlobalSearch',
props: ['value', 'searchEnabled', 'globalSearchPlaceholder'],
data: function data() {
return {
globalSearchTerm: null
};
},
computed: {
showControlBar: function showControlBar() {
if (this.searchEnabled) return true;
if (this.$slots && this.$slots['internal-table-actions']) return true;
return false;
}
},
methods: {
updateValue: function updateValue(value) {
this.$emit('input', value);
this.$emit('on-keyup', value);
},
entered: function entered(value) {
this.$emit('on-enter', value);
}
}
};
var VgtFilterRow = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _vm.hasFilterRow ? _c('tr', [_vm.lineNumbers ? _c('th') : _vm._e(), _vm._v(" "), _vm.selectable ? _c('th') : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column, index) {
return !column.hidden ? _c('th', {
key: index,
staticClass: "filter-th"
}, [_vm.isFilterable(column) ? _c('div', [!_vm.isDropdown(column) ? _c('input', {
staticClass: "vgt-input",
attrs: {
"type": "text",
"placeholder": _vm.getPlaceholder(column)
},
domProps: {
"value": _vm.columnFilters[column.field]
},
on: {
"keyup": function keyup($event) {
if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
return null;
}
_vm.updateFiltersOnEnter(column, $event.target.value);
},
"input": function input($event) {
_vm.updateFiltersOnKeyup(column, $event.target.value);
}
}
}) : _vm._e(), _vm._v(" "), _vm.isDropdownArray(column) ? _c('select', {
staticClass: "vgt-select",
domProps: {
"value": _vm.columnFilters[column.field]
},
on: {
"input": function input($event) {
_vm.updateFilters(column, $event.target.value);
}
}
}, [_c('option', {
key: "-1",
attrs: {
"value": ""
}
}, [_vm._v(_vm._s(_vm.getPlaceholder(column)))]), _vm._v(" "), _vm._l(column.filterOptions.filterDropdownItems, function (option, i) {
return _c('option', {
key: i,
domProps: {
"value": option
}
}, [_vm._v(" " + _vm._s(option) + " ")]);
})], 2) : _vm._e(), _vm._v(" "), _vm.isDropdownObjects(column) ? _c('select', {
staticClass: "vgt-select",
domProps: {
"value": _vm.columnFilters[column.field]
},
on: {
"input": function input($event) {
_vm.updateFilters(column, $event.target.value, true);
}
}
}, [_c('option', {
key: "-1",
attrs: {
"value": ""
}
}, [_vm._v(_vm._s(_vm.getPlaceholder(column)))]), _vm._v(" "), _vm._l(column.filterOptions.filterDropdownItems, function (option, i) {
return _c('option', {
key: i,
domProps: {
"value": option.value
}
}, [_vm._v(_vm._s(option.text))]);
})], 2) : _vm._e()]) : _vm._e()]) : _vm._e();
})], 2) : _vm._e();
},
staticRenderFns: [],
_scopeId: 'data-v-2949d74f',
name: 'VgtFilterRow',
props: ['lineNumbers', 'columns', 'typedColumns', 'globalSearchEnabled', 'selectable', 'mode'],
watch: {
columns: {
handler: function handler() {
this.populateInitialFilters();
},
deep: true
}
},
data: function data() {
return {
columnFilters: {},
timer: null
};
},
computed: {
// to create a filter row, we need to
// make sure that there is atleast 1 column
// that requires filtering
hasFilterRow: function hasFilterRow() {
if (this.mode === 'remote' || !this.globalSearchEnabled) {
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i];
if (col.filterOptions && col.filterOptions.enabled) {
return true;
}
}
}
return false;
}
},
methods: {
reset: function reset() {
var emitEvent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
this.columnFilters = {};
if (emitEvent) {
this.$emit('filter-changed', this.columnFilters);
}
},
isFilterable: function isFilterable(column) {
return column.filterOptions && column.filterOptions.enabled;
},
isDropdown: function isDropdown(column) {
return this.isFilterable(column) && column.filterOptions.filterDropdownItems && column.filterOptions.filterDropdownItems.length;
},
isDropdownObjects: function isDropdownObjects(column) {
return this.isDropdown(column) && _typeof(column.filterOptions.filterDropdownItems[0]) === 'object';
},
isDropdownArray: function isDropdownArray(column) {
return this.isDropdown(column) && _typeof(column.filterOptions.filterDropdownItems[0]) !== 'object';
},
// get column's defined placeholder or default one
getPlaceholder: function getPlaceholder(column) {
var placeholder = this.isFilterable(column) && column.filterOptions.placeholder || "Filter ".concat(column.label);
return placeholder;
},
updateFiltersOnEnter: function updateFiltersOnEnter(column, value) {
if (this.timer) clearTimeout(this.timer);
this.updateFiltersImmediately(column, value);
},
updateFiltersOnKeyup: function updateFiltersOnKeyup(column, value) {
// if the trigger is enter, we don't filter on keyup
if (column.filterOptions.trigger === 'enter') return;
this.updateFilters(column, value);
},
// since vue doesn't detect property addition and deletion, we
// need to create helper function to set property etc
updateFilters: function updateFilters(column, value) {
var _this = this;
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(function () {
_this.updateFiltersImmediately(column, value);
}, 400);
},
updateFiltersImmediately: function updateFiltersImmediately(column, value) {
this.$set(this.columnFilters, column.field, value);
this.$emit('filter-changed', this.columnFilters);
},
populateInitialFilters: function populateInitialFilters() {
for (var i = 0; i < this.columns.length; i++) {
var col = this.columns[i]; // lets see if there are initial
// filters supplied by user
if (this.isFilterable(col) && typeof col.filterOptions.filterValue !== 'undefined' && col.filterOptions.filterValue !== null) {
this.updateFiltersImmediately(col, col.filterOptions.filterValue);
this.$set(col.filterOptions, 'filterValue', undefined);
}
}
}
},
mounted: function mounted() {
// take care of initial filters
this.populateInitialFilters();
}
};
var VgtTableHeader = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('thead', [_c('tr', [_vm.lineNumbers ? _c('th', {
staticClass: "line-numbers"
}) : _vm._e(), _vm._v(" "), _vm.selectable ? _c('th', {
staticClass: "vgt-checkbox-col"
}, [_c('input', {
attrs: {
"type": "checkbox"
},
domProps: {
"checked": _vm.allSelected,
"indeterminate": _vm.allSelectedIndeterminate
},
on: {
"change": _vm.toggleSelectAll
}
})]) : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column, index) {
return !column.hidden ? _c('th', {
key: index,
class: _vm.getHeaderClasses(column, index),
style: _vm.columnStyles[index],
on: {
"click": function click($event) {
_vm.sort(index);
}
}
}, [_vm._t("table-column", [_c('span', [_vm._v(_vm._s(column.label))])], {
column: column
})], 2) : _vm._e();
})], 2), _vm._v(" "), _c("vgt-filter-row", {
ref: "filter-row",
tag: "tr",
attrs: {
"global-search-enabled": _vm.searchEnabled,
"line-numbers": _vm.lineNumbers,
"selectable": _vm.selectable,
"columns": _vm.columns,
"mode": _vm.mode,
"typed-columns": _vm.typedColumns
},
on: {
"filter-changed": _vm.filterRows
}
})]);
},
staticRenderFns: [],
_scopeId: 'data-v-0c8b4370',
name: 'VgtTableHeader',
props: {
lineNumbers: {
default: false,
type: Boolean
},
selectable: {
default: false,
type: Boolean
},
allSelected: {
default: false,
type: Boolean
},
allSelectedIndeterminate: {
default: false,
type: Boolean
},
columns: {
type: Array
},
mode: {
type: String
},
typedColumns: {},
//* Sort related
sortColumn: {
type: Number
},
sortType: {
type: String
},
// utility functions
isSortableColumn: {
type: Function
},
getClasses: {
type: Function
},
//* search related
searchEnabled: {
type: Boolean
},
tableRef: {},
paginated: {}
},
watch: {
tableRef: {
handler: function handler() {
this.setColumnStyles();
},
immediate: true
},
paginated: {
handler: function handler() {
if (this.tableRef) {
this.setColumnStyles();
}
},
deep: true
}
},
data: function data() {
return {
checkBoxThStyle: {},
lineNumberThStyle: {},
columnStyles: []
};
},
computed: {},
methods: {
toggleSelectAll: function toggleSelectAll() {
this.$emit('on-toggle-select-all');
},
sort: function sort(index) {
this.$emit('on-sort-change', index);
},
getHeaderClasses: function getHeaderClasses(column, index) {
var isSortable = this.isSortableColumn(index);
var classes = assign({}, this.getClasses(index, 'th'), {
sorting: isSortable,
'sorting-desc': isSortable && this.sortColumn === index && this.sortType === 'desc',
'sorting-asc': isSortable && this.sortColumn === index && this.sortType === 'asc'
});
return classes;
},
filterRows: function filterRows(columnFilters) {
this.$emit('filter-changed', columnFilters);
},
getWidthStyle: function getWidthStyle(dom) {
var cellStyle = window.getComputedStyle(dom, null);
return {
width: cellStyle.width
};
},
setColumnStyles: function setColumnStyles() {
var _this = this;
var colStyles = [];
setTimeout(function () {
for (var i = 0; i < _this.columns.length; i++) {
if (_this.tableRef) {
var skip = 0;
if (_this.selectable) skip++;
if (_this.lineNumbers) skip++;
var cell = _this.tableRef.rows[0].cells[i + skip];
colStyles.push(_this.getWidthStyle(cell));
} else {
colStyles.push({
width: _this.columns[i].width ? _this.columns[i].width : 'auto'
});
}
}
_this.columnStyles = colStyles;
}, 200);
},
getColumnStyle: function getColumnStyle(column, index) {
var styleObject = {
width: column.width ? column.width : 'auto'
}; //* if fixed header we need to get width from original table
if (this.tableRef) {
if (this.selectable) index++;
if (this.lineNumbers) index++;
var cell = this.tableRef.rows[0].cells[index];
var cellStyle = window.getComputedStyle(cell, null);
styleObject.width = cellStyle.width;
}
return styleObject;
}
},
mounted: function mounted() {},
components: {
'vgt-filter-row': VgtFilterRow
}
};
var VgtHeaderRow = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('tr', [_vm.headerRow.mode === 'span' ? _c('th', {
staticClass: "vgt-left-align vgt-row-header",
attrs: {
"colspan": _vm.fullColspan
}
}, [_vm._t("table-header-row", [_vm.headerRow.html ? _c('span', {
domProps: {
"innerHTML": _vm._s(_vm.headerRow.label)
}
}) : _c('span', [_vm._v(" " + _vm._s(_vm.headerRow.label) + " ")])], {
row: _vm.headerRow
})], 2) : _vm._e(), _vm._v(" "), _vm.headerRow.mode !== 'span' && _vm.lineNumbers ? _c('th', {
staticClass: "vgt-row-header"
}) : _vm._e(), _vm._v(" "), _vm.headerRow.mode !== 'span' && _vm.selectable ? _c('th', {
staticClass: "vgt-row-header"
}) : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column, i) {
return _vm.headerRow.mode !== 'span' ? _c('th', {
key: i,
staticClass: "vgt-row-header",
class: _vm.getClasses(i, 'td')
}, [_vm._t("table-header-row", [!column.html ? _c('span', [_vm._v(" " + _vm._s(_vm.collectFormatted(_vm.headerRow, column, true)) + " ")]) : _vm._e(), _vm._v(" "), column.html ? _c('span', {
domProps: {
"innerHTML": _vm._s(_vm.collectFormatted(_vm.headerRow, column, true))
}
}) : _vm._e()], {
row: _vm.headerRow,
column: column,
formattedRow: _vm.formattedRow(_vm.headerRow, true)
})], 2) : _vm._e();
})], 2);
},
staticRenderFns: [],
name: 'VgtHeaderRow',
props: {
headerRow: {
type: Object
},
columns: {
type: Array
},
lineNumbers: {
type: Boolean
},
selectable: {
type: Boolean
},
collectFormatted: {
type: Function
},
formattedRow: {
type: Function
},
getClasses: {
type: Function
},
fullColspan: {
type: Number
}
},
data: function data() {
return {};
},
computed: {},
methods: {},
mounted: function mounted() {},
components: {}
};
var date = clone(def);
date.isRight = true;
date.compare = function (x, y, column) {
function cook(d) {
if (column && column.dateInputFormat) {
return dateFns.parse("".concat(d), "".concat(column.dateInputFormat), new Date());
}
return d;
}
x = cook(x);
y = cook(y);
if (!dateFns.isValid(x)) {
return -1;
}
if (!dateFns.isValid(y)) {
return 1;
}
return dateFns.compareAsc(x, y);
};
date.format = function (v, column) {
if (v === undefined || v === null) return ''; // convert to date
var date = dateFns.parse(v, column.dateInputFormat, new Date());
return dateFns.format(date, column.dateOutputFormat);
};
var date$1 = /*#__PURE__*/Object.freeze({
default: date
});
var number = clone(def);
number.isRight = true;
number.filterPredicate = function (rowval, filter$$1) {
return number.compare(rowval, filter$$1) === 0;
};
number.compare = function (x, y) {
function cook(d) {
// if d is null or undefined we give it the smallest
// possible value
if (d === undefined || d === null) return -Infinity;
return d.indexOf('.') >= 0 ? parseFloat(d) : parseInt(d, 10);
}
x = typeof x === 'number' ? x : cook(x);
y = typeof y === 'number' ? y : cook(y);
if (x < y) return -1;
if (x > y) return 1;
return 0;
};
var number$1 = /*#__PURE__*/Object.freeze({
default: number
});
var decimal = clone(number);
decimal.format = function (v) {
if (v === undefined || v === null) return '';
return parseFloat(Math.round(v * 100) / 100).toFixed(2);
};
var decimal$1 = /*#__PURE__*/Object.freeze({
default: decimal
});
var percentage = clone(number);
percentage.format = function (v) {
if (v === undefined || v === null) return '';
return "".concat(parseFloat(v * 100).toFixed(2), "%");
};
var percentage$1 = /*#__PURE__*/Object.freeze({
default: percentage
});
var boolean = clone(def);
boolean.isRight = true;
boolean.filterPredicate = function (rowval, filter$$1) {
return boolean.compare(rowval, filter$$1) === 0;
};
boolean.compare = function (x, y) {
function cook(d) {
// if d is null or undefined we give it the smallest
// possible value
if (typeof d !== 'boolean') return -Infinity;
return d ? 1 : 0;
}
x = cook(x);
y = cook(y);
if (x < y) return -1;
if (x > y) return 1;
return 0;
};
var boolean$1 = /*#__PURE__*/Object.freeze({
default: boolean
});
var index = {
date: date$1,
decimal: decimal$1,
number: number$1,
percentage: percentage$1,
boolean: boolean$1
};
var dataTypes = {};
var coreDataTypes = index;
each(Object.keys(coreDataTypes), function (key) {
var compName = key.replace(/^\.\//, '').replace(/\.js/, '');
dataTypes[compName] = coreDataTypes[key].default;
});
var VueGoodTable = {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('div', {
staticClass: "vgt-wrap",
class: {
'rtl': _vm.rtl,
'nocturnal': _vm.theme === 'nocturnal',
'black-rhino': _vm.theme === 'black-rhino'
}
}, [_vm.isTableLoading ? _c('div', {
staticClass: "vgt-loading vgt-center-align"
}, [_vm._t("loadingContent", [_c('span', {
staticClass: "vgt-loading__content"
}, [_vm._v(" Loading... ")])])], 2) : _vm._e(), _vm._v(" "), _c('div', {
staticClass: "vgt-inner-wrap",
class: {
'is-loading': _vm.isTableLoading
}
}, [_vm.paginate && _vm.paginateOnTop ? _vm._t("pagination-top", [_c('vgt-pagination', {
ref: "paginationTop",
attrs: {
"perPage": _vm.perPage,
"rtl": _vm.rtl,
"total": _vm.totalRows || _vm.totalRowCount,
"mode": _vm.paginationMode,
"nextText": _vm.nextText,
"prevText": _vm.prevText,
"rowsPerPageText": _vm.rowsPerPageText,
"customRowsPerPageDropdown": _vm.customRowsPerPageDropdown,
"paginateDropdownAllowAll": _vm.paginateDropdownAllowAll,
"ofText": _vm.ofText,
"pageText": _vm.pageText,
"allText": _vm.allText
},
on: {
"page-changed": _vm.pageChanged,
"per-page-changed": _vm.perPageChanged
}
})], {
pageChanged: _vm.pageChanged,
perPageChanged: _vm.perPageChanged,
total: _vm.totalRows || _vm.totalRowCount
}) : _vm._e(), _vm._v(" "), _c('vgt-global-search', {
attrs: {
"search-enabled": _vm.searchEnabled && _vm.externalSearchQuery == null,
"global-search-placeholder": _vm.searchPlaceholder
},
on: {
"on-keyup": _vm.searchTableOnKeyUp,
"on-enter": _vm.searchTableOnEnter
},
model: {
value: _vm.globalSearchTerm,
callback: function callback($$v) {
_vm.globalSearchTerm = $$v;
},
expression: "globalSearchTerm"
}
}, [_c('template', {
slot: "internal-table-actions"
}, [_vm._t("table-actions")], 2)], 2), _vm._v(" "), _vm.selectedRowCount ? _c('div', {
staticClass: "vgt-selection-info-row clearfix",
class: _vm.selectionInfoClass
}, [_vm._v(" " + _vm._s(_vm.selectionInfo) + " "), _c('a', {
attrs: {
"href": ""
},
on: {
"click": function click($event) {
$event.preventDefault();
_vm.unselectAllInternal(true);
}
}
}, [_vm._v(" " + _vm._s(_vm.clearSelectionText) + " ")]), _vm._v(" "), _c('div', {
staticClass: "vgt-selection-info-row__actions vgt-pull-right"
}, [_vm._t("selected-row-actions")], 2)]) : _vm._e(), _vm._v(" "), _vm.fixedHeader ? _c('table', {
staticClass: "vgt-fixed-header",
class: _vm.tableStyleClasses
}, [_c("vgt-table-header", {
tag: "thead",
attrs: {
"columns": _vm.columns,
"line-numbers": _vm.lineNumbers,
"selectable": _vm.selectable,
"all-selected": _vm.allSelected,
"all-selected-indeterminate": _vm.allSelectedIndeterminate,
"mode": _vm.mode,
"typed-columns": _vm.typedColumns,
"sort-column": _vm.sortColumn,
"sort-type": _vm.sortType,
"isSortableColumn": _vm.isSortableColumn,
"getClasses": _vm.getClasses,
"searchEnabled": _vm.searchEnabled,
"paginated": _vm.paginated,
"table-ref": _vm.$refs.table
},
on: {
"on-toggle-select-all": _vm.toggleSelectAll,
"on-sort-change": _vm.sort,
"filter-changed": _vm.filterRows
}
})]) : _vm._e(), _vm._v(" "), _c('div', {
class: {
'vgt-responsive': _vm.responsive
},
style: _vm.wrapperStyles
}, [_c('table', {
ref: "table",
class: _vm.tableStyleClasses
}, [_c("vgt-table-header", {
tag: "thead",
attrs: {
"columns": _vm.columns,
"line-numbers": _vm.lineNumbers,
"selectable": _vm.selectable,
"all-selected": _vm.allSelected,
"all-selected-indeterminate": _vm.allSelectedIndeterminate,
"mode": _vm.mode,
"typed-columns": _vm.typedColumns,
"sort-column": _vm.sortColumn,
"sort-type": _vm.sortType,
"isSortableColumn": _vm.isSortableColumn,
"getClasses": _vm.getClasses,
"searchEnabled": _vm.searchEnabled
},
on: {
"on-toggle-select-all": _vm.toggleSelectAll,
"on-sort-change": _vm.sort,
"filter-changed": _vm.filterRows
}
}), _vm._v(" "), _vm._l(_vm.paginated, function (headerRow, index$$1) {
return _c('tbody', {
key: index$$1
}, [_vm.groupHeaderOnTop ? _c('vgt-header-row', {
attrs: {
"header-row": headerRow,
"columns": _vm.columns,
"line-numbers": _vm.lineNumbers,
"selectable": _vm.selectable,
"collect-formatted": _vm.collectFormatted,
"formatted-row": _vm.formattedRow,
"get-classes": _vm.getClasses,
"full-colspan": _vm.fullColspan
},
scopedSlots: _vm._u([{
key: "table-header-row",
fn: function fn(props) {
return _vm.hasHeaderRowTemplate ? [_vm._t("table-header-row", null, {
column: props.column,
formattedRow: props.formattedRow,
row: props.row
})] : undefined;
}
}])
}) : _vm._e(), _vm._v(" "), _vm._l(headerRow.children, function (row, index$$1) {
return _c('tr', {
key: row.originalIndex,
class: _vm.getRowStyleClass(row),
on: {
"mouseenter": function mouseenter($event) {
_vm.onMouseenter(row, index$$1);
},
"mouseleave": function mouseleave($event) {
_vm.onMouseleave(row, index$$1);
},
"click": function click($event) {
_vm.onRowClicked(row, index$$1, $event);
}
}
}, [_vm.lineNumbers ? _c('th', {
staticClass: "line-numbers"
}, [_vm._v(" " + _vm._s(_vm.getCurrentIndex(index$$1)) + " ")]) : _vm._e(), _vm._v(" "), _vm.selectable ? _c('th', {
staticClass: "vgt-checkbox-col",
on: {
"click": function click($event) {
$event.preventDefault();
$event.stopPropagation();
_vm.onCheckboxClicked(row, index$$1, $event);
}
}
}, [_c('input', {
attrs: {
"type": "checkbox"
},
domProps: {
"checked": row.vgtSelected
}
})]) : _vm._e(), _vm._v(" "), _vm._l(_vm.columns, function (column, i) {
return !column.hidden && column.field ? _c('td', {
key: i,
class: _vm.getClasses(i, 'td'),
on: {
"click": function click($event) {
_vm.onCellClicked(row, column, index$$1, $event);
}
}
}, [_vm._t("table-row", [!column.html ? _c('span', [_vm._v(" " + _vm._s(_vm.collectFormatted(row, column)) + " ")]) : _vm._e(), _vm._v(" "), column.html ? _c('span', {
domProps: {
"innerHTML": _vm._s(_vm.collect(row, column.field))
}
}) : _vm._e()], {
row: row,
column: column,
formattedRow: _vm.formattedRow(row),
index: index$$1
})], 2) : _vm._e();
})], 2);
}), _vm._v(" "), _vm.groupHeaderOnBottom ? _c('vgt-header-row', {
attrs: {
"header-row": headerRow,
"columns": _vm.columns,
"line-numbers": _vm.lineNumbers,
"selectable": _vm.selectable,
"collect-formatted": _vm.collectFormatted,
"formatted-row": _vm.formattedRow,
"get-classes": _vm.getClasses,
"full-colspan": _vm.fullColspan
},
scopedSlots: _vm._u([{
key: "table-header-row",
fn: function fn(props) {
return _vm.hasHeaderRowTemplate ? [_vm._t("table-header-row", null, {
column: props.column,
formattedRow: props.formattedRow,
row: props.row
})] : undefined;
}
}])
}) : _vm._e()], 2);
}), _vm._v(" "), _vm.showEmptySlot ? _c('tbody', [_c('tr', [_c('td', {
attrs: {
"colspan": _vm.fullColspan
}
}, [_vm._t("emptystate", [_c('div', {
staticClass: "vgt-center-align vgt-text-disabled"
}, [_vm._v(" No data for table ")])])], 2)])]) : _vm._e()], 2)]), _vm._v(" "), _vm.paginate && _vm.paginateOnBottom ? _vm._t("pagination-bottom", [_c('vgt-pagination', {
ref: "paginationBottom",
attrs: {
"perPage": _vm.perPage,
"rtl": _vm.rtl,
"total": _vm.totalRows || _vm.totalRowCount,
"mode": _vm.paginationMode,
"nextText": _vm.nextText,
"prevText": _vm.prevText,
"rowsPerPageText": _vm.rowsPerPageText,
"customRowsPerPageDropdown": _vm.customRowsPerPageDropdown,
"paginateDropdownAllowAll": _vm.paginateDropdownAllowAll,
"ofText": _vm.ofText,
"pageText": _vm.pageText,
"allText": _vm.allText
},
on: {
"page-changed": _vm.pageChanged,
"per-page-changed": _vm.perPageChanged
}
})], {
pageChanged: _vm.pageChanged,
perPageChanged: _vm.perPageChanged,
total: _vm.totalRows || _vm.totalRowCount
}) : _vm._e()], 2)]);
},
staticRenderFns: [],
name: 'vue-good-table',
props: {
isLoading: {
default: false,
type: Boolean
},
maxHeight: {
default: null,
type: String
},
fixedHeader: {
default: false,
type: Boolean
},
theme: {
default: ''
},
mode: {
default: 'local'
},
// could be remote
totalRows: {},
// required if mode = 'remote'
styleClass: {
default: 'vgt-table bordered'
},
columns: {},
rows: {},
lineNumbers: {
default: false
},
responsive: {
default: true
},
rtl: {
default: false
},
rowStyleClass: {
default: null,
type: [Function, String]
},
groupOptions: {
default: function _default() {
return {
enabled: false
};
}
},
selectOptions: {
default: function _default() {
return {
enabled: false,
selectionInfoClass: '',
selectionText: 'rows selected',
clearSelectionText: 'clear'
};
}
},
// sort
sortOptions: {
default: function _default() {
return {
enabled: true,
initialSortBy: {}
};
}
},
// pagination
paginationOptions: {
default: function _default() {
return {
enabled: false,
perPage: 10,
perPageDropdown: null,
position: 'bottom',
dropdownAllowAll: true,
mode: 'records' // or pages
};
}
},
searchOptions: {
default: function _default() {
return {
enabled: false,
trigger: null,
externalQuery: null,
searchFn: null,
placeholder: 'Search Table'
};
}
}
},
data: function data() {
return {
// loading state for remote mode
tableLoading: false,
// text options
nextText: 'Next',
prevText: 'Prev',
rowsPerPageText: 'Rows per page',
ofText: 'of',
allText: 'All',
pageText: 'page',
// internal select options
selectable: false,
selectOnCheckboxOnly: false,
selectAllByPage: true,
selectionInfoClass: '',
selectionText: 'rows selected',
clearSelectionText: 'clear',
// internal sort options
sortable: true,
defaultSortBy: null,
// internal search options
searchEnabled: false,
searchTrigger: null,
externalSearchQuery: null,
searchFn: null,
searchPlaceholder: 'Search Table',
// internal pagination options
perPage: null,
paginate: false,
paginateOnTop: false,
paginateOnBottom: true,
customRowsPerPageDropdown: [],
paginateDropdownAllowAll: true,
paginationMode: 'records',
currentPage: 1,
currentPerPage: 10,
sortColumn: -1,
sortType: 'asc',
globalSearchTerm: '',
filteredRows: [],
columnFilters: {},
forceSearch: false,
sortChanged: false,
dataTypes: dataTypes || {}
};
},
watch: {
rows: {
handler: function handler() {
this.tableLoading = false;
this.filterRows(this.columnFilters, false);
},
deep: true,
immediate: true
},
selectOptions: {
handler: function handler() {
this.initializeSelect();
},
deep: true,
immediate: true
},
paginationOptions: {
handler: function handler() {
this.initializePagination();
},
deep: true,
immediate: true
},
searchOptions: {
handler: function handler() {
if (this.searchOptions.externalQuery !== undefined && this.searchOptions.externalQuery !== this.searchTerm) {
this.handleSearch();
}
this.initializeSearch();
},
deep: true,
immediate: true
},
sortOptions: {
handler: function handler() {
this.initializeSort();
},
deep: true,
immediate: true
},
selectedRows: function selectedRows() {
this.$emit('on-selected-rows-change', {
selectedRows: this.selectedRows
});
}
},
computed: {
wrapperStyles: function wrapperStyles() {
return {
overflow: 'scroll-y',
maxHeight: this.maxHeight ? this.maxHeight : 'auto'
};
},
hasHeaderRowTemplate: function hasHeaderRowTemplate() {
return !!this.$slots['table-header-row'] || !!this.$scopedSlots['table-header-row'];
},
isTableLoading: function isTableLoading() {
return this.isLoading || this.tableLoading;
},
showEmptySlot: function showEmptySlot() {
if (!this.paginated.length) return true;
if (this.paginated[0].label === 'no groups' && !this.paginated[0].children.length) return true;
return false;
},
allSelected: function allSelected() {
return this.selectedRowCount > 0 && (this.selectAllByPage && this.selectedPageRowsCount === this.totalPageRowCount || !this.selectAllByPage && this.selectedRowCount === this.totalRowCount);
},
allSelectedIndeterminate: function allSelectedIndeterminate() {
return !this.allSelected && (this.selectAllByPage && this.selectedPageRowsCount > 0 || !this.selectAllByPage && this.selectedRowCount > 0);
},
selectionInfo: function selectionInfo() {
return "".concat(this.selectedRowCount, " ").concat(this.selectionText);
},
selectedRowCount: function selectedRowCount() {
return this.selectedRows.length;
},
selectedPageRowsCount: function selectedPageRowsCount() {
return this.selectedPageRows.length;
},
selectedPageRows: function selectedPageRows() {
var selectedRows = [];
each(this.paginated, function (headerRow) {
each(headerRow.children, function (row) {
if (row.vgtSelected) {
selectedRows.push(row);
}
});
});
return selectedRows;
},
selectedRows: function selectedRows() {
var selectedRows = [];
each(this.processedRows, function (headerRow) {
each(headerRow.children, function (row) {
if (row.vgtSelected) {
selectedRows.push(row);
}
});
});
return selectedRows;
},
fullColspan: function fullColspan() {
var fullColspan = this.columns.length;
if (this.lineNumbers) fullColspan++;
if (this.selectable) fullColspan++;
return fullColspan;
},
groupHeaderOnTop: function groupHeaderOnTop() {
if (this.groupOptions && this.groupOptions.enabled && this.groupOptions.headerPosition && this.groupOptions.headerPosition === 'bottom') {
return false;
}
if (this.groupOptions && this.groupOptions.enabled) return true; // will only get here if groupOptions is false
return false;
},
groupHeaderOnBottom: function groupHeaderOnBottom() {
if (this.groupOptions && this.groupOptions.enabled && this.groupOptions.headerPosition && this.groupOptions.headerPosition === 'bottom') {
return true;
}
return false;
},
totalRowCount: function totalRowCount() {
var total = 0;
each(this.processedRows, function (headerRow) {
total += headerRow.children ? headerRow.children.length : 0;
});
return total;
},
totalPageRowCount: function totalPageRowCount() {
var total = 0;
each(this.paginated, function (headerRow) {
total += headerRow.children ? headerRow.children.length : 0;
});
return total;
},
tableStyleClasses: function tableStyleClasses() {
var classes = this.styleClass;
classes += " ".concat(this.theme);
return classes;
},
searchTerm: function searchTerm() {
return this.externalSearchQuery != null ? this.externalSearchQuery : this.globalSearchTerm;
},
//
globalSearchAllowed: function globalSearchAllowed() {
if (this.searchEnabled && !!this.globalSearchTerm && this.searchTrigger !== 'enter') {
return true;
}
if (this.externalSearchQuery != null && this.searchTrigger !== 'enter') {
return true;
}
if (this.forceSearch) {
this.forceSearch = false;
return true;
}
return false;
},
// this is done everytime sortColumn
// or sort type changes
//----------------------------------------
processedRows: function processedRows() {
var _this = this;
// we only process rows when mode is local
var computedRows = this.filteredRows;
if (this.mode === 'remote') {
return computedRows;
} // take care of the global filter here also
if (this.globalSearchAllowed) {
// here also we need to de-construct and then
// re-construct the rows.
var allRows = [];
each(this.filteredRows, function (headerRow) {
allRows.push.apply(allRows, _toConsumableArray(headerRow.children));
});
var filteredRows = [];
each(allRows, function (row) {
each(_this.columns, function (col) {
// if col does not have search disabled,
if (!col.globalSearchDisabled) {
// if a search function is provided,
// use that for searching, otherwise,
// use the default search behavior
if (_this.searchFn) {
var foundMatch = _this.searchFn(row, col, _this.collectFormatted(row, col), _this.searchTerm);
if (foundMatch) {
filteredRows.push(row);