primevue
Version:
[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [ • 278 kB
JavaScript
this.primevue = this.primevue || {};
this.primevue.datatable = (function (api, BaseComponent, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, ChevronDownIcon, ChevronRightIcon, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, vue, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
'use strict';
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
var ArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownIcon);
var ArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpIcon);
var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
var VirtualScroller__default = /*#__PURE__*/_interopDefaultLegacy(VirtualScroller);
var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
var PencilIcon__default = /*#__PURE__*/_interopDefaultLegacy(PencilIcon);
var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
var FilterIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterIcon);
var FilterSlashIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterSlashIcon);
var PlusIcon__default = /*#__PURE__*/_interopDefaultLegacy(PlusIcon);
var TrashIcon__default = /*#__PURE__*/_interopDefaultLegacy(TrashIcon);
var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
var SortAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAltIcon);
var SortAmountDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountDownIcon);
var SortAmountUpAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortAmountUpAltIcon);
var script$a = {
name: 'RowCheckbox',
extends: BaseComponent__default["default"],
emits: ['change'],
props: {
value: null,
checked: null,
column: null,
rowCheckboxIconTemplate: {
type: Function,
default: null
}
},
data() {
return {
focused: false
};
},
methods: {
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.$attrs.disabled) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
utils.DomHandler.focus(this.$refs.input);
}
event.preventDefault();
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
},
onKeydown(event) {
switch (event.code) {
case 'Space': {
this.onClick(event);
break;
}
}
}
},
computed: {
checkboxAriaLabel() {
return this.$primevue.config.locale.aria ? (this.checked ? this.$primevue.config.locale.aria.selectRow : this.$primevue.config.locale.aria.unselectRow) : undefined;
}
},
components: {
CheckIcon: CheckIcon__default["default"]
}
};
const _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
const _component_CheckIcon = vue.resolveComponent("CheckIcon");
return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
class: ['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }],
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
}, $options.getColumnPTOptions('checkboxWrapper')), [
vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenInputWrapper')), [
vue.createElementVNode("input", vue.mergeProps({
ref: "input",
type: "checkbox",
checked: $props.checked,
disabled: _ctx.$attrs.disabled,
tabindex: _ctx.$attrs.disabled ? null : '0',
"aria-label": $options.checkboxAriaLabel,
onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
}, $options.getColumnPTOptions('hiddenInput')), null, 16, _hoisted_1$7)
], 16),
vue.createElementVNode("div", vue.mergeProps({
ref: "box",
class: ['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]
}, $options.getColumnPTOptions('checkbox')), [
($props.rowCheckboxIconTemplate)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.rowCheckboxIconTemplate), {
key: 0,
checked: $props.checked,
class: "p-checkbox-icon"
}, null, 8, ["checked"]))
: (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
key: 1,
class: "p-checkbox-icon"
}, $options.getColumnPTOptions('checkboxIcon')), null, 16))
], 16)
], 16))
}
script$a.render = render$a;
var script$9 = {
name: 'RowRadioButton',
extends: BaseComponent__default["default"],
inheritAttrs: false,
emits: ['change'],
props: {
value: null,
checked: null,
name: null,
column: null
},
data() {
return {
focused: false
};
},
methods: {
getColumnPTOptions(key) {
return this.ptmo(this.getColumnProp(), key, {
props: this.column.props,
parent: {
props: this.$props,
state: this.$data
},
context: {
checked: this.checked,
focused: this.focused,
disabled: this.$attrs.disabled
}
});
},
getColumnProp() {
return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
},
onClick(event) {
if (!this.disabled) {
if (!this.checked) {
this.$emit('change', {
originalEvent: event,
data: this.value
});
utils.DomHandler.focus(this.$refs.input);
}
}
},
onFocus() {
this.focused = true;
},
onBlur() {
this.focused = false;
}
}
};
const _hoisted_1$6 = ["checked", "disabled", "name"];
function render$9(_ctx, _cache, $props, $setup, $data, $options) {
return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
class: ['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }],
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
}, $options.getColumnPTOptions('radiobuttonWrapper')), [
vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
vue.createElementVNode("input", vue.mergeProps({
ref: "input",
type: "radio",
checked: $props.checked,
disabled: _ctx.$attrs.disabled,
name: $props.name,
tabindex: "0",
onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
}, $options.getColumnPTOptions('hiddenInput')), null, 16, _hoisted_1$6)
], 16),
vue.createElementVNode("div", vue.mergeProps({
ref: "box",
class: ['p-radiobutton-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]
}, $options.getColumnPTOptions('radiobutton')), [
vue.createElementVNode("div", vue.mergeProps({ class: "p-radiobutton-icon" }, $options.getColumnPTOptions('radiobuttonIcon')), null, 16)
], 16)
], 16))
}
script$9.render = render$9;
var script$8 = {
name: 'BodyCell',
extends: BaseComponent__default["default"],
emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
props: {
rowData: {
type: Object,
default: null
},
column: {
type: Object,
default: null
},
frozenRow: {
type: Boolean,
default: false
},
rowIndex: {
type: Number,
default: null
},
index: {
type: Number,
default: null
},
isRowExpanded: {
type: Boolean,
default: false
},
selected: {
type: Boolean,
default: false
},
editing: {
type: Boolean,
default: false
},
editingMeta: {
type: Object,
default: null
},
editMode: {
type: String,
default: null
},
responsiveLayout: {
type: String,
default: 'stack'
},
virtualScrollerContentProps: {
type: Object,
default: null
},
ariaControls: {
type: String,
default: null
},
name: {
type: String,
default: null
},
expandedRowIcon: {
type: String,
default: null
},
collapsedRowIcon: {
type: String,
default: null
}
},
documentEditListener: null,
selfClick: false,
overlayEventListener: null,
data() {
return {
d_editing: this.editing,
styleObject: {}
};
},
watch: {
editing(newValue) {
this.d_editing = newValue;
},
'$data.d_editing': function (newValue) {
this.$emit('editing-meta-change', { data: this.rowData, field: this.field || `field_${this.index}`, index: this.rowIndex, editing: newValue });
}
},
mounted() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
},
updated() {
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
setTimeout(() => {
const focusableEl = utils.DomHandler.getFirstFocusableElement(this.$el);
focusableEl && focusableEl.focus();
}, 1);
}
},
beforeUnmount() {
if (this.overlayEventListener) {
OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
}
},
methods: {
columnProp(prop) {
return utils.ObjectUtils.getVNodeProp(this.column, prop);
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
resolveFieldData() {
return utils.ObjectUtils.resolveFieldData(this.rowData, this.field);
},
toggleRow(event) {
this.$emit('row-toggle', {
originalEvent: event,
data: this.rowData
});
},
toggleRowWithRadio(event, index) {
this.$emit('radio-change', { originalEvent: event.originalEvent, index: index, data: event.data });
},
toggleRowWithCheckbox(event, index) {
this.$emit('checkbox-change', { originalEvent: event.originalEvent, index: index, data: event.data });
},
isEditable() {
return this.column.children && this.column.children.editor != null;
},
bindDocumentEditListener() {
if (!this.documentEditListener) {
this.documentEditListener = (event) => {
if (!this.selfClick) {
this.completeEdit(event, 'outside');
}
this.selfClick = false;
};
document.addEventListener('click', this.documentEditListener);
}
},
unbindDocumentEditListener() {
if (this.documentEditListener) {
document.removeEventListener('click', this.documentEditListener);
this.documentEditListener = null;
this.selfClick = false;
}
},
switchCellToViewMode() {
this.d_editing = false;
this.unbindDocumentEditListener();
OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
this.overlayEventListener = null;
},
onClick(event) {
if (this.editMode === 'cell' && this.isEditable()) {
this.selfClick = true;
if (!this.d_editing) {
this.d_editing = true;
this.bindDocumentEditListener();
this.$emit('cell-edit-init', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
this.overlayEventListener = (e) => {
if (this.$el && this.$el.contains(e.target)) {
this.selfClick = true;
}
};
OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
}
}
},
completeEdit(event, type) {
const completeEvent = {
originalEvent: event,
data: this.rowData,
newData: this.editingRowData,
value: this.rowData[this.field],
newValue: this.editingRowData[this.field],
field: this.field,
index: this.rowIndex,
type: type,
defaultPrevented: false,
preventDefault: function () {
this.defaultPrevented = true;
}
};
this.$emit('cell-edit-complete', completeEvent);
if (!completeEvent.defaultPrevented) {
this.switchCellToViewMode();
}
},
onKeyDown(event) {
if (this.editMode === 'cell') {
switch (event.code) {
case 'Enter':
this.completeEdit(event, 'enter');
break;
case 'Escape':
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
break;
case 'Tab':
this.completeEdit(event, 'tab');
if (event.shiftKey) this.moveToPreviousCell(event);
else this.moveToNextCell(event);
break;
}
}
},
moveToPreviousCell(event) {
let currentCell = this.findCell(event.target);
let targetCell = this.findPreviousEditableColumn(currentCell);
if (targetCell) {
utils.DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
moveToNextCell(event) {
let currentCell = this.findCell(event.target);
let targetCell = this.findNextEditableColumn(currentCell);
if (targetCell) {
utils.DomHandler.invokeElementMethod(targetCell, 'click');
event.preventDefault();
}
},
findCell(element) {
if (element) {
let cell = element;
while (cell && !utils.DomHandler.hasClass(cell, 'p-cell-editing')) {
cell = cell.parentElement;
}
return cell;
} else {
return null;
}
},
findPreviousEditableColumn(cell) {
let prevCell = cell.previousElementSibling;
if (!prevCell) {
let previousRow = cell.parentElement.previousElementSibling;
if (previousRow) {
prevCell = previousRow.lastElementChild;
}
}
if (prevCell) {
if (utils.DomHandler.hasClass(prevCell, 'p-editable-column')) return prevCell;
else return this.findPreviousEditableColumn(prevCell);
} else {
return null;
}
},
findNextEditableColumn(cell) {
let nextCell = cell.nextElementSibling;
if (!nextCell) {
let nextRow = cell.parentElement.nextElementSibling;
if (nextRow) {
nextCell = nextRow.firstElementChild;
}
}
if (nextCell) {
if (utils.DomHandler.hasClass(nextCell, 'p-editable-column')) return nextCell;
else return this.findNextEditableColumn(nextCell);
} else {
return null;
}
},
isEditingCellValid() {
return utils.DomHandler.find(this.$el, '.p-invalid').length === 0;
},
onRowEditInit(event) {
this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
},
onRowEditSave(event) {
this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
},
onRowEditCancel(event) {
this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
},
editorInitCallback(event) {
this.$emit('row-edit-init', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
},
editorSaveCallback(event) {
if (this.editMode === 'row') {
this.$emit('row-edit-save', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
} else {
this.completeEdit(event, 'enter');
}
},
editorCancelCallback(event) {
if (this.editMode === 'row') {
this.$emit('row-edit-cancel', { originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex });
} else {
this.switchCellToViewMode();
this.$emit('cell-edit-cancel', { originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex });
}
},
updateStickyPosition() {
if (this.columnProp('frozen')) {
let align = this.columnProp('alignFrozen');
if (align === 'right') {
let right = 0;
let next = this.$el.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
this.styleObject.right = right + 'px';
} else {
let left = 0;
let prev = this.$el.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
this.styleObject.left = left + 'px';
}
}
},
getVirtualScrollerProp(option) {
return this.virtualScrollerContentProps ? this.virtualScrollerContentProps[option] : null;
}
},
computed: {
editingRowData() {
return this.editingMeta[this.rowIndex] ? this.editingMeta[this.rowIndex].data : this.rowData;
},
field() {
return this.columnProp('field');
},
containerClass() {
return [
this.columnProp('bodyClass'),
this.columnProp('class'),
{
'p-selection-column': this.columnProp('selectionMode') != null,
'p-editable-column': this.isEditable(),
'p-cell-editing': this.d_editing,
'p-frozen-column': this.columnProp('frozen')
}
];
},
containerStyle() {
let bodyStyle = this.columnProp('bodyStyle');
let columnStyle = this.columnProp('style');
return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject] : [columnStyle, bodyStyle];
},
loading() {
return this.getVirtualScrollerProp('loading');
},
loadingOptions() {
const getLoaderOptions = this.getVirtualScrollerProp('getLoaderOptions');
return (
getLoaderOptions &&
getLoaderOptions(this.rowIndex, {
cellIndex: this.index,
cellFirst: this.index === 0,
cellLast: this.index === this.getVirtualScrollerProp('columns').length - 1,
cellEven: this.index % 2 === 0,
cellOdd: this.index % 2 !== 0,
column: this.column,
field: this.field
})
);
},
expandButtonAriaLabel() {
return this.$primevue.config.locale.aria ? (this.isRowExpanded ? this.$primevue.config.locale.aria.expandRow : this.$primevue.config.locale.aria.collapseRow) : undefined;
},
initButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.editRow : undefined;
},
saveButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.saveEdit : undefined;
},
cancelButtonAriaLabel() {
return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.cancelEdit : undefined;
}
},
components: {
DTRadioButton: script$9,
DTCheckbox: script$a,
ChevronDownIcon: ChevronDownIcon__default["default"],
ChevronRightIcon: ChevronRightIcon__default["default"],
BarsIcon: BarsIcon__default["default"],
PencilIcon: PencilIcon__default["default"],
CheckIcon: CheckIcon__default["default"],
TimesIcon: TimesIcon__default["default"]
},
directives: {
ripple: Ripple__default["default"]
}
};
const _hoisted_1$5 = ["aria-expanded", "aria-controls", "aria-label"];
const _hoisted_2$2 = ["aria-label"];
const _hoisted_3$2 = ["aria-label"];
const _hoisted_4$1 = ["aria-label"];
function render$8(_ctx, _cache, $props, $setup, $data, $options) {
const _component_DTRadioButton = vue.resolveComponent("DTRadioButton");
const _component_DTCheckbox = vue.resolveComponent("DTCheckbox");
const _component_ChevronDownIcon = vue.resolveComponent("ChevronDownIcon");
const _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
const _directive_ripple = vue.resolveDirective("ripple");
return ($options.loading)
? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
key: 0,
style: $options.containerStyle,
class: $options.containerClass,
role: "cell"
}, { ...$options.getColumnPTOptions($props.column, 'root'), ...$options.getColumnPTOptions($props.column, 'bodyCell') }), [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
data: $props.rowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow,
loadingOptions: $options.loadingOptions
}, null, 8, ["data", "column", "field", "index", "frozenRow", "loadingOptions"]))
], 16))
: (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
key: 1,
style: $options.containerStyle,
class: $options.containerClass,
onClick: _cache[6] || (_cache[6] = (...args) => ($options.onClick && $options.onClick(...args))),
onKeydown: _cache[7] || (_cache[7] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
role: "cell"
}, { ...$options.getColumnPTOptions($props.column, 'root'), ...$options.getColumnPTOptions($props.column, 'bodyCell') }), [
($props.responsiveLayout === 'stack')
? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
key: 0,
class: "p-column-title"
}, $options.getColumnPTOptions($props.column, 'columnTitle')), vue.toDisplayString($options.columnProp('header')), 17))
: vue.createCommentVNode("", true),
($props.column.children && $props.column.children.body && !$data.d_editing)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
key: 1,
data: $props.rowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow,
editorInitCallback: $options.editorInitCallback
}, null, 8, ["data", "column", "field", "index", "frozenRow", "editorInitCallback"]))
: ($props.column.children && $props.column.children.editor && $data.d_editing)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.editor), {
key: 2,
data: $options.editingRowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow,
editorSaveCallback: $options.editorSaveCallback,
editorCancelCallback: $options.editorCancelCallback
}, null, 8, ["data", "column", "field", "index", "frozenRow", "editorSaveCallback", "editorCancelCallback"]))
: ($props.column.children && $props.column.children.body && !$props.column.children.editor && $data.d_editing)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
key: 3,
data: $options.editingRowData,
column: $props.column,
field: $options.field,
index: $props.rowIndex,
frozenRow: $props.frozenRow
}, null, 8, ["data", "column", "field", "index", "frozenRow"]))
: ($options.columnProp('selectionMode'))
? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 4 }, [
($options.columnProp('selectionMode') === 'single')
? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
key: 0,
value: $props.rowData,
name: $props.name,
checked: $props.selected,
onChange: _cache[0] || (_cache[0] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex))),
column: $props.column,
pt: _ctx.pt
}, null, 8, ["value", "name", "checked", "column", "pt"]))
: ($options.columnProp('selectionMode') === 'multiple')
? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
key: 1,
value: $props.rowData,
checked: $props.selected,
rowCheckboxIconTemplate: $props.column.children && $props.column.children.rowcheckboxicon,
"aria-selected": $props.selected ? true : undefined,
onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex))),
column: $props.column,
pt: _ctx.pt
}, null, 8, ["value", "checked", "rowCheckboxIconTemplate", "aria-selected", "column", "pt"]))
: vue.createCommentVNode("", true)
], 64))
: ($options.columnProp('rowReorder'))
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.rowreordericon ? $props.column.children.rowreordericon : $options.columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'), {
key: 5,
class: vue.normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon')])
}, null, 8, ["class"]))
: ($options.columnProp('expander'))
? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 6,
class: "p-row-toggler p-link",
type: "button",
"aria-expanded": $props.isRowExpanded,
"aria-controls": $props.ariaControls,
"aria-label": $options.expandButtonAriaLabel,
onClick: _cache[2] || (_cache[2] = (...args) => ($options.toggleRow && $options.toggleRow(...args)))
}, $options.getColumnPTOptions($props.column, 'rowToggler')), [
($props.column.children && $props.column.children.rowtogglericon)
? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowtogglericon), {
key: 0,
rowExpanded: $props.isRowExpanded
}, null, 8, ["rowExpanded"]))
: (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
($props.isRowExpanded && $props.expandedRowIcon)
? (vue.openBlock(), vue.createElementBlock("span", {
key: 0,
class: vue.normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
}, null, 2))
: ($props.isRowExpanded && !$props.expandedRowIcon)
? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
key: 1,
class: "p-row-toggler-icon"
}, $options.getColumnPTOptions($props.column, 'rowTogglerIcon')), null, 16))
: (!$props.isRowExpanded && $props.collapsedRowIcon)
? (vue.openBlock(), vue.createElementBlock("span", {
key: 2,
class: vue.normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
}, null, 2))
: (!$props.isRowExpanded && !$props.collapsedRowIcon)
? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
key: 3,
class: "p-row-toggler-icon"
}, $options.getColumnPTOptions($props.column, 'rowTogglerIcon')), null, 16))
: vue.createCommentVNode("", true)
], 64))
], 16, _hoisted_1$5)), [
[_directive_ripple]
])
: ($props.editMode === 'row' && $options.columnProp('rowEditor'))
? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 7 }, [
(!$data.d_editing)
? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 0,
class: "p-row-editor-init p-link",
type: "button",
"aria-label": $options.initButtonAriaLabel,
onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args)))
}, $options.getColumnPTOptions($props.column, 'rowEditorInitButton')), [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), vue.mergeProps({ class: "p-row-editor-init-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorInitIcon')), null, 16))
], 16, _hoisted_2$2)), [
[_directive_ripple]
])
: vue.createCommentVNode("", true),
($data.d_editing)
? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 1,
class: "p-row-editor-save p-link",
type: "button",
"aria-label": $options.saveButtonAriaLabel,
onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args)))
}, $options.getColumnPTOptions($props.column, 'rowEditorEditButton')), [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), vue.mergeProps({ class: "p-row-editor-save-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorEditIcon')), null, 16))
], 16, _hoisted_3$2)), [
[_directive_ripple]
])
: vue.createCommentVNode("", true),
($data.d_editing)
? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
key: 2,
class: "p-row-editor-cancel p-link",
type: "button",
"aria-label": $options.cancelButtonAriaLabel,
onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args)))
}, $options.getColumnPTOptions($props.column, 'rowEditorCancelButton')), [
(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), vue.mergeProps({ class: "p-row-editor-cancel-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorCancelIcon')), null, 16))
], 16, _hoisted_4$1)), [
[_directive_ripple]
])
: vue.createCommentVNode("", true)
], 64))
: (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 8 }, [
vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
], 64))
], 16))
}
script$8.render = render$8;
var script$7 = {
name: 'TableBody',
extends: BaseComponent__default["default"],
emits: [
'rowgroup-toggle',
'row-click',
'row-dblclick',
'row-rightclick',
'row-touchend',
'row-keydown',
'row-mousedown',
'row-dragstart',
'row-dragover',
'row-dragleave',
'row-dragend',
'row-drop',
'row-toggle',
'radio-change',
'checkbox-change',
'cell-edit-init',
'cell-edit-complete',
'cell-edit-cancel',
'row-edit-init',
'row-edit-save',
'row-edit-cancel',
'editing-meta-change'
],
props: {
value: {
type: Array,
default: null
},
columns: {
type: null,
default: null
},
frozenRow: {
type: Boolean,
default: false
},
empty: {
type: Boolean,
default: false
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array, String, Function],
default: null
},
expandableRowGroups: {
type: Boolean,
default: false
},
expandedRowGroups: {
type: Array,
default: null
},
first: {
type: Number,
default: 0
},
dataKey: {
type: String,
default: null
},
expandedRowIcon: {
type: String,
default: null
},
collapsedRowIcon: {
type: String,
default: null
},
expandedRows: {
type: Array,
default: null
},
expandedRowKeys: {
type: null,
default: null
},
selection: {
type: [Array, Object],
default: null
},
selectionKeys: {
type: null,
default: null
},
selectionMode: {
type: String,
default: null
},
contextMenu: {
type: Boolean,
default: false
},
contextMenuSelection: {
type: Object,
default: null
},
rowClass: {
type: null,
default: null
},
rowStyle: {
type: null,
default: null
},
editMode: {
type: String,
default: null
},
compareSelectionBy: {
type: String,
default: 'deepEquals'
},
editingRows: {
type: Array,
default: null
},
editingRowKeys: {
type: null,
default: null
},
editingMeta: {
type: Object,
default: null
},
templates: {
type: null,
default: null
},
scrollable: {
type: Boolean,
default: false
},
responsiveLayout: {
type: String,
default: 'stack'
},
virtualScrollerContentProps: {
type: Object,
default: null
},
isVirtualScrollerDisabled: {
type: Boolean,
default: false
}
},
data() {
return {
rowGroupHeaderStyleObject: {},
tabindexArray: [],
isARowSelected: false
};
},
mounted() {
if (this.frozenRow) {
this.updateFrozenRowStickyPosition();
}
if (this.scrollable && this.rowGroupMode === 'subheader') {
this.updateFrozenRowGroupHeaderStickyPosition();
}
},
updated() {
if (this.frozenRow) {
this.updateFrozenRowStickyPosition();
}
if (this.scrollable && this.rowGroupMode === 'subheader') {
this.updateFrozenRowGroupHeaderStickyPosition();
}
},
methods: {
columnProp(col, prop) {
return utils.ObjectUtils.getVNodeProp(col, prop);
},
getColumnPTOptions(column, key) {
return this.ptmo(this.getColumnProp(column), key, {
props: column.props,
parent: {
props: this.$props,
state: this.$data
}
});
},
getColumnProp(column) {
return column.props && column.props.pt ? column.props.pt : undefined; //@todo
},
shouldRenderRowGroupHeader(value, rowData, i) {
let currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let prevRowData = value[i - 1];
if (prevRowData) {
let previousRowFieldData = utils.ObjectUtils.resolveFieldData(prevRowData, this.groupRowsBy);
return currentRowFieldData !== previousRowFieldData;
} else {
return true;
}
},
getRowKey(rowData, index) {
return this.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, this.dataKey) : this.getRowIndex(index);
},
getRowIndex(index) {
const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
return getItemOptions ? getItemOptions(index).index : this.first + index;
},
getRowStyle(rowData) {
if (this.rowStyle) {
return this.rowStyle(rowData);
}
},
getRowClass(rowData) {
let rowStyleClass = [];
if (this.selectionMode) {
rowStyleClass.push('p-selectable-row');
}
if (this.selection) {
rowStyleClass.push({
'p-highlight': this.isSelected(rowData)
});
}
if (this.contextMenuSelection) {
rowStyleClass.push({
'p-highlight-contextmenu': this.isSelectedWithContextMenu(rowData)
});
}
if (this.rowClass) {
let rowClassValue = this.rowClass(rowData);
if (rowClassValue) {
rowStyleClass.push(rowClassValue);
}
}
return rowStyleClass;
},
shouldRenderRowGroupFooter(value, rowData, i) {
if (this.expandableRowGroups && !this.isRowGroupExpanded(rowData)) {
return false;
} else {
let currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
let nextRowData = value[i + 1];
if (nextRowData) {
let nextRowFieldData = utils.ObjectUtils.resolveFieldData(nextRowData, this.groupRowsBy);
return currentRowFieldData !== nextRowFieldData;
} else {
return true;
}
}
},
shouldRenderBodyCell(value, column, i) {
if (this.rowGroupMode) {
if (this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== this.columnProp(column, 'field');
} else if (this.rowGroupMode === 'rowspan') {