primereact
Version:
PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime
1,150 lines (1,120 loc) • 299 kB
JavaScript
'use client';
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var PrimeReact$1 = require('primereact/api');
var componentbase = require('primereact/componentbase');
var utils = require('primereact/utils');
var hooks = require('primereact/hooks');
var arrowdown = require('primereact/icons/arrowdown');
var arrowup = require('primereact/icons/arrowup');
var spinner = require('primereact/icons/spinner');
var paginator = require('primereact/paginator');
var virtualscroller = require('primereact/virtualscroller');
var bars = require('primereact/icons/bars');
var check = require('primereact/icons/check');
var chevrondown = require('primereact/icons/chevrondown');
var chevronright = require('primereact/icons/chevronright');
var pencil = require('primereact/icons/pencil');
var times = require('primereact/icons/times');
var overlayservice = require('primereact/overlayservice');
var ripple = require('primereact/ripple');
var button = require('primereact/button');
var csstransition = require('primereact/csstransition');
var dropdown = require('primereact/dropdown');
var filter = require('primereact/icons/filter');
var filterslash = require('primereact/icons/filterslash');
var plus = require('primereact/icons/plus');
var trash = require('primereact/icons/trash');
var inputtext = require('primereact/inputtext');
var portal = require('primereact/portal');
var sortalt = require('primereact/icons/sortalt');
var sortamountdown = require('primereact/icons/sortamountdown');
var sortamountupalt = require('primereact/icons/sortamountupalt');
var tooltip = require('primereact/tooltip');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var React__namespace = /*#__PURE__*/_interopNamespace(React);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact$1);
function _extends() {
_extends = Object.assign ? Object.assign.bind() : function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
return target;
};
return _extends.apply(this, arguments);
}
function _typeof(o) {
"@babel/helpers - typeof";
return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
return typeof o;
} : function (o) {
return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
}, _typeof(o);
}
function _toPrimitive(input, hint) {
if (_typeof(input) !== "object" || input === null) return input;
var prim = input[Symbol.toPrimitive];
if (prim !== undefined) {
var res = prim.call(input, hint || "default");
if (_typeof(res) !== "object") return res;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return (hint === "string" ? String : Number)(input);
}
function _toPropertyKey(arg) {
var key = _toPrimitive(arg, "string");
return _typeof(key) === "symbol" ? key : String(key);
}
function _defineProperty(obj, key, value) {
key = _toPropertyKey(key);
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _arrayLikeToArray$1(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
}
function _unsupportedIterableToArray$1(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray$1(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen);
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(r, l) {
var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
if (null != t) {
var e,
n,
i,
u,
a = [],
f = !0,
o = !1;
try {
if (i = (t = t.call(r)).next, 0 === l) {
if (Object(t) !== t) return;
f = !1;
} else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
} catch (r) {
o = !0, n = r;
} finally {
try {
if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
} finally {
if (o) throw n;
}
}
return a;
}
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
}
var ColumnBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'Column',
align: null,
alignFrozen: 'left',
alignHeader: null,
body: null,
bodyClassName: null,
bodyStyle: null,
cellEditValidator: null,
cellEditValidatorEvent: 'click',
className: null,
colSpan: null,
columnKey: null,
dataType: 'text',
editor: null,
excludeGlobalFilter: false,
expander: false,
exportField: null,
exportable: true,
field: null,
filter: false,
filterApply: null,
filterClear: null,
filterElement: null,
filterField: null,
filterFooter: null,
filterFunction: null,
filterHeader: null,
filterHeaderClassName: null,
filterHeaderStyle: null,
filterMatchMode: null,
filterMatchModeOptions: null,
filterMaxLength: null,
filterMenuClassName: null,
filterMenuStyle: null,
filterPlaceholder: null,
filterType: 'text',
footer: null,
footerClassName: null,
footerStyle: null,
frozen: false,
header: null,
headerClassName: null,
headerStyle: null,
headerTooltip: null,
headerTooltipOptions: null,
hidden: false,
maxConstraints: 2,
onBeforeCellEditHide: null,
onBeforeCellEditShow: null,
onCellEditCancel: null,
onCellEditComplete: null,
onCellEditInit: null,
onFilterApplyClick: null,
onFilterClear: null,
onFilterConstraintAdd: null,
onFilterConstraintRemove: null,
onFilterMatchModeChange: null,
onFilterOperatorChange: null,
reorderable: true,
resizeable: true,
rowEditor: false,
rowReorder: false,
rowReorderIcon: null,
rowSpan: null,
selectionMode: null,
showAddButton: true,
showApplyButton: true,
showClearButton: true,
showFilterMatchModes: true,
showFilterMenu: true,
showFilterMenuOptions: true,
showFilterOperator: true,
sortField: null,
sortFunction: null,
sortable: false,
sortableDisabled: false,
style: null,
children: undefined
},
getCProp: function getCProp(column, name) {
return utils.ObjectUtils.getComponentProp(column, name, ColumnBase.defaultProps);
},
getCProps: function getCProps(column) {
return utils.ObjectUtils.getComponentProps(column, ColumnBase.defaultProps);
},
getCOtherProps: function getCOtherProps(column) {
return utils.ObjectUtils.getComponentDiffProps(column, ColumnBase.defaultProps);
}
});
function ownKeys$c(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var styles$1 = "\n@layer primereact {\n .p-datatable {\n position: relative;\n }\n\n .p-datatable > .p-datatable-wrapper {\n overflow: auto;\n }\n\n .p-datatable-table {\n border-spacing: 0px;\n width: 100%;\n }\n\n .p-datatable .p-sortable-disabled {\n cursor: auto;\n }\n\n .p-datatable .p-sortable-column {\n cursor: pointer;\n user-select: none;\n }\n\n .p-datatable .p-sortable-column .p-column-title,\n .p-datatable .p-sortable-column .p-sortable-column-icon,\n .p-datatable .p-sortable-column .p-sortable-column-badge {\n vertical-align: middle;\n }\n\n .p-datatable .p-sortable-column .p-sortable-column-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .p-datatable-selectable .p-selectable-row,\n .p-datatable-selectable-cell .p-selectable-cell {\n cursor: pointer;\n }\n\n .p-datatable-drag-selection-helper {\n position: absolute;\n z-index: 99999999;\n }\n\n /* Scrollable */\n .p-datatable-scrollable > .p-datatable-wrapper {\n position: relative;\n }\n\n .p-datatable-scrollable-table > .p-datatable-thead {\n position: sticky;\n top: 0;\n z-index: 1;\n }\n\n .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n position: sticky;\n z-index: 1;\n }\n\n .p-datatable-scrollable-table > .p-datatable-tfoot {\n position: sticky;\n bottom: 0;\n z-index: 1;\n }\n\n .p-datatable-scrollable .p-frozen-column {\n position: sticky;\n background: inherit;\n }\n\n .p-datatable-scrollable th.p-frozen-column {\n z-index: 1;\n }\n\n .p-datatable-flex-scrollable {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n .p-datatable-flex-scrollable > .p-datatable-wrapper {\n display: flex;\n flex-direction: column;\n flex: 1;\n height: 100%;\n }\n\n .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n position: sticky;\n z-index: 1;\n }\n\n /* Resizable */\n .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n overflow: hidden;\n white-space: nowrap;\n }\n\n .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n background-clip: padding-box;\n position: relative;\n }\n\n .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n display: none;\n }\n\n .p-datatable .p-column-resizer {\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n margin: 0;\n width: 0.5rem;\n height: 100%;\n padding: 0px;\n cursor: col-resize;\n border: 1px solid transparent;\n }\n\n .p-datatable .p-column-header-content {\n display: flex;\n align-items: center;\n }\n\n .p-datatable .p-column-resizer-helper {\n width: 1px;\n position: absolute;\n z-index: 10;\n display: none;\n }\n\n .p-datatable .p-row-editor-init,\n .p-datatable .p-row-editor-save,\n .p-datatable .p-row-editor-cancel {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Expand */\n .p-datatable .p-row-toggler {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Reorder */\n .p-datatable-reorder-indicator-up,\n .p-datatable-reorder-indicator-down {\n position: absolute;\n display: none;\n }\n\n .p-reorderable-column,\n .p-datatable-reorderablerow-handle {\n cursor: move;\n }\n\n /* Loader */\n .p-datatable .p-datatable-loading-overlay {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 2;\n }\n\n /* Filter */\n .p-column-filter-row {\n display: flex;\n align-items: center;\n width: 100%;\n }\n\n .p-column-filter-menu {\n display: inline-flex;\n margin-left: auto;\n }\n\n .p-column-filter-row .p-column-filter-element {\n flex: 1 1 auto;\n width: 1%;\n }\n\n .p-column-filter-menu-button,\n .p-column-filter-clear-button {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n text-decoration: none;\n overflow: hidden;\n position: relative;\n }\n\n .p-column-filter-overlay {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n .p-column-filter-row-items {\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .p-column-filter-row-item {\n cursor: pointer;\n }\n\n .p-column-filter-add-button,\n .p-column-filter-remove-button {\n justify-content: center;\n }\n\n .p-column-filter-add-button .p-button-label,\n .p-column-filter-remove-button .p-button-label {\n flex-grow: 0;\n }\n\n .p-column-filter-buttonbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n }\n\n .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n width: auto;\n }\n\n /* Responsive */\n .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n display: none;\n }\n\n /* VirtualScroller */\n .p-datatable-virtualscroller-spacer {\n display: flex;\n }\n\n .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n transform: none;\n min-height: 0;\n position: sticky;\n top: 0;\n left: 0;\n }\n\n /* Alignment */\n .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n text-align: left;\n justify-content: flex-start;\n }\n\n .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n text-align: right;\n justify-content: flex-end;\n }\n\n .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n text-align: center;\n justify-content: center;\n }\n}\n";
var classes = {
root: function root(_ref) {
var props = _ref.props,
selectable = _ref.selectable;
return utils.classNames('p-datatable p-component', {
'p-datatable-hoverable-rows': props.rowHover,
'p-datatable-selectable': selectable && !props.cellSelection,
'p-datatable-selectable-cell': selectable && props.cellSelection,
'p-datatable-resizable': props.resizableColumns,
'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
'p-datatable-scrollable': props.scrollable,
'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
'p-datatable-striped': props.stripedRows,
'p-datatable-gridlines': props.showGridlines,
'p-datatable-grouped-header': props.headerColumnGroup != null,
'p-datatable-grouped-footer': props.footerColumnGroup != null,
'p-datatable-sm': props.size === 'small',
'p-datatable-lg': props.size === 'large'
});
},
loadingIcon: 'p-datatable-loading-icon',
loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
header: 'p-datatable-header',
wrapper: 'p-datatable-wrapper',
table: function table(_ref2) {
var props = _ref2.props;
return utils.classNames('p-datatable-table', {
'p-datatable-scrollable-table': props.scrollable,
'p-datatable-resizable-table': props.resizableColumns,
'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
});
},
thead: 'p-datatable-thead',
tfoot: 'p-datatable-tfoot',
footer: 'p-datatable-footer',
resizeHelper: 'p-column-resizer-helper',
reorderIndicatorUp: 'p-datatable-reorder-indicator-up',
reorderIndicatorDown: 'p-datatable-reorder-indicator-down',
paginator: function paginator(_ref3) {
var position = _ref3.position;
return utils.classNames('p-paginator-' + position);
},
bodyCell: function bodyCell(_ref4) {
var selectionMode = _ref4.selectionMode,
editor = _ref4.editor,
editingState = _ref4.editingState,
frozen = _ref4.frozen,
cellSelected = _ref4.cellSelected,
align = _ref4.align,
props = _ref4.bodyProps,
getCellParams = _ref4.getCellParams;
return utils.classNames(_defineProperty({
'p-selection-column': selectionMode !== null,
'p-editable-column': editor,
'p-cell-editing': editor && editingState,
'p-frozen-column': frozen,
'p-selectable-cell': props.allowCellSelection && props.isSelectable({
data: getCellParams(),
index: props.rowIndex
}),
'p-highlight': cellSelected
}, "p-align-".concat(align), !!align));
},
columnTitle: 'p-column-title',
bodyRow: function bodyRow(_ref5) {
var props = _ref5.rowProps;
return utils.classNames({
'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
'p-highlight-contextmenu': props.contextMenuSelected,
'p-selectable-row': props.allowRowSelection && props.isSelectable({
data: props.rowData,
index: props.rowIndex
}),
'p-row-odd': props.rowIndex % 2 !== 0
});
},
rowGroupTogglerIcon: 'p-row-toggler-icon',
rowGroupToggler: 'p-row-toggler p-link',
rowGroupHeader: 'p-rowgroup-header',
rowGroupHeaderName: 'p-rowgroup-header-name',
rowGroupFooter: 'p-rowgroup-footer',
rowReorderIcon: 'p-datatable-reorderablerow-handle',
rowTogglerIcon: 'p-row-toggler-icon',
rowToggler: 'p-row-toggler p-link',
rowEditorSaveIcon: 'p-row-editor-save-icon',
rowEditorSaveButton: 'p-row-editor-save p-link',
rowEditorCancelIcon: 'p-row-editor-cancel-icon',
rowEditorCancelButton: 'p-row-editor-cancel p-link',
rowEditorInitIcon: 'p-row-editor-init-icon',
rowEditorInitButton: 'p-row-editor-init p-link',
rowExpansion: 'p-datatable-row-expansion',
virtualScrollerSpacer: function virtualScrollerSpacer(_ref6) {
var className = _ref6.className;
return className;
},
tbody: function tbody(_ref7) {
var className = _ref7.className;
return className;
},
filterInput: 'p-fluid p-column-filter-element',
filterMenuButton: function filterMenuButton(_ref8) {
var overlayVisibleState = _ref8.overlayVisibleState,
hasFilter = _ref8.hasFilter;
return utils.classNames('p-column-filter-menu-button p-link', {
'p-column-filter-menu-button-open': overlayVisibleState,
'p-column-filter-menu-button-active': hasFilter()
});
},
headerFilterClearButton: function headerFilterClearButton(_ref9) {
var hasRowFilter = _ref9.hasRowFilter;
return utils.classNames('p-column-filter-clear-button p-link', {
'p-hidden-space': !hasRowFilter()
});
},
filterSeparator: 'p-column-filter-separator',
filterRowItem: function filterRowItem(_ref10) {
var isRowMatchModeSelected = _ref10.isRowMatchModeSelected,
isShowMatchModes = _ref10.isShowMatchModes,
value = _ref10.value;
return isShowMatchModes() ? utils.classNames('p-column-filter-row-item', {
'p-highlight': value && isRowMatchModeSelected(value)
}) : undefined;
},
filterRowItems: 'p-column-filter-row-items',
filterOperator: 'p-column-filter-operator',
filterConstraints: 'p-column-filter-constraints',
filterConstraint: 'p-column-filter-constraint',
filterAddRule: 'p-column-filter-add-rule',
filterButtonBar: 'p-column-filter-buttonbar',
filterOverlay: function filterOverlay(_ref11) {
var props = _ref11.columnFilterProps,
context = _ref11.context,
getColumnProp = _ref11.getColumnProp;
return utils.classNames('p-column-filter-overlay p-component p-fluid', getColumnProp('filterMenuClassName'), {
'p-column-filter-overlay-menu': props.display === 'menu',
'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
});
},
columnFilter: function columnFilter(_ref12) {
var props = _ref12.columnFilterProps;
return utils.classNames('p-column-filter p-fluid', {
'p-column-filter-row': props.display === 'row',
'p-column-filter-menu': props.display === 'menu'
});
},
columnResizer: 'p-column-resizer',
emptyMessage: 'p-datatable-emptymessage',
sortBadge: 'p-sortable-column-badge',
sortIcon: 'p-sortable-column-icon',
checkboxWrapper: function checkboxWrapper(_ref13) {
var props = _ref13.rowProps,
focusedState = _ref13.focusedState;
return utils.classNames('p-checkbox p-component', {
'p-checkbox-focused': focusedState,
'p-disabled': props.disabled
});
},
checkbox: function checkbox(_ref14) {
var props = _ref14.rowProps,
focusedState = _ref14.focusedState;
return utils.classNames('p-checkbox-box p-component', {
'p-highlight': props.checked,
'p-focus': focusedState
});
},
checkboxIcon: 'p-checkbox-icon',
radiobuttonWrapper: function radiobuttonWrapper(_ref15) {
var props = _ref15.rowProps,
focusedState = _ref15.focusedState;
return utils.classNames('p-radiobutton p-component', {
'p-radiobutton-focused': focusedState,
'p-disabled': props.disabled
});
},
radiobutton: function radiobutton(_ref16) {
var props = _ref16.rowProps,
focusedState = _ref16.focusedState;
return utils.classNames('p-radiobutton-box p-component', {
'p-highlight': props.checked,
'p-focus': focusedState
});
},
radiobuttonIcon: 'p-radiobutton-icon',
headerTitle: 'p-column-title',
headerCheckboxWrapper: 'p-checkbox p-component',
headerCheckbox: function headerCheckbox(_ref17) {
var props = _ref17.headerProps,
focusedState = _ref17.focusedState;
return utils.classNames('p-checkbox-box p-component', {
'p-highlight': props.checked,
'p-disabled': props.disabled,
'p-focus': focusedState
});
},
headerCheckboxIcon: 'p-checkbox-icon',
headerContent: 'p-column-header-content',
headerCell: function headerCell(_ref18) {
var props = _ref18.headerProps,
frozen = _ref18.frozen,
sortMeta = _ref18.sortMeta,
align = _ref18.align,
_isSortableDisabled = _ref18._isSortableDisabled,
getColumnProp = _ref18.getColumnProp;
return utils.ObjectUtils.isEmpty(props) ? utils.classNames('p-filter-column', {
'p-frozen-column': frozen
}) : utils.classNames(_defineProperty({
'p-filter-column': !props.headerColumnGroup && props.filterDisplay === 'row',
'p-sortable-column': getColumnProp('sortable'),
'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
'p-highlight': sortMeta.sorted,
'p-frozen-column': frozen,
'p-selection-column': getColumnProp('selectionMode'),
'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
}, "p-align-".concat(align), !!align));
},
footerCell: function footerCell(_ref19) {
var getColumnProp = _ref19.getColumnProp,
align = _ref19.align;
return utils.classNames(_defineProperty({
'p-frozen-column': getColumnProp('frozen')
}, "p-align-".concat(align), !!align));
},
transition: 'p-connected-overlay'
};
var inlineStyles = {
wrapper: {
overflow: 'auto'
},
resizeHelper: {
display: 'none'
},
reorderIndicatorUp: function reorderIndicatorUp(_ref20) {
var style = _ref20.style;
return _objectSpread$c({}, style);
},
reorderIndicatorDown: function reorderIndicatorDown(_ref21) {
var style = _ref21.style;
return _objectSpread$c({}, style);
}
};
var DataTableBase = componentbase.ComponentBase.extend({
defaultProps: {
__TYPE: 'DataTable',
alwaysShowPaginator: true,
breakpoint: '960px',
cellClassName: null,
cellSelection: false,
checkIcon: null,
className: null,
collapsedRowIcon: null,
columnResizeMode: 'fit',
compareSelectionBy: 'deepEquals',
contextMenuSelection: null,
csvSeparator: ',',
currentPageReportTemplate: '({currentPage} of {totalPages})',
customRestoreState: null,
customSaveState: null,
dataKey: null,
defaultSortOrder: 1,
dragSelection: false,
editMode: null,
editingRows: null,
emptyMessage: null,
expandableRowGroups: false,
expandedRowIcon: null,
expandedRows: null,
exportFilename: 'download',
exportFunction: null,
filterClearIcon: null,
filterDelay: 300,
filterDisplay: 'menu',
filterIcon: null,
filterLocale: undefined,
filters: null,
first: 0,
footer: null,
footerColumnGroup: null,
frozenRow: false,
frozenValue: null,
frozenWidth: null,
globalFilter: null,
globalFilterFields: null,
globalFilterMatchMode: PrimeReact$1.FilterMatchMode.CONTAINS,
groupRowsBy: null,
header: null,
headerColumnGroup: null,
id: null,
isDataSelectable: null,
lazy: false,
loading: false,
loadingIcon: null,
metaKeySelection: false,
multiSortMeta: null,
onAllRowsSelect: null,
onAllRowsUnselect: null,
onCellClick: null,
onCellSelect: null,
onCellUnselect: null,
onColReorder: null,
onColumnResizeEnd: null,
onColumnResizerClick: null,
onColumnResizerDoubleClick: null,
onContextMenu: null,
onContextMenuSelectionChange: null,
onFilter: null,
onPage: null,
onRowClick: null,
onRowCollapse: null,
onRowDoubleClick: null,
onRowEditCancel: null,
onRowEditChange: null,
onRowEditComplete: null,
onRowEditInit: null,
onRowEditSave: null,
onRowExpand: null,
onRowMouseEnter: null,
onRowMouseLeave: null,
onRowPointerDown: null,
onRowPointerUp: null,
onRowReorder: null,
onRowSelect: null,
onRowToggle: null,
onRowUnselect: null,
onSelectAllChange: null,
onSelectionChange: null,
onSort: null,
onStateRestore: null,
onStateSave: null,
onValueChange: null,
pageLinkSize: 5,
paginator: false,
paginatorClassName: null,
paginatorDropdownAppendTo: null,
paginatorLeft: null,
paginatorPosition: 'bottom',
paginatorRight: null,
paginatorTemplate: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown',
removableSort: false,
reorderIndicatorDownIcon: null,
reorderIndicatorUpIcon: null,
reorderableColumns: false,
reorderableRows: false,
resizableColumns: false,
responsiveLayout: 'scroll',
rowClassName: null,
rowEditValidator: null,
rowEditorCancelIcon: null,
rowEditorInitIcon: null,
rowEditorSaveIcon: null,
rowExpansionTemplate: null,
rowGroupFooterTemplate: null,
rowGroupHeaderTemplate: null,
rowGroupMode: null,
rowHover: false,
rows: null,
rowsPerPageOptions: null,
scrollHeight: null,
scrollable: false,
selectAll: false,
selectOnEdit: true,
selection: null,
selectionAriaLabel: null,
selectionAutoFocus: true,
selectionMode: null,
selectionPageOnly: false,
showGridlines: false,
showHeaders: true,
showRowReorderElement: null,
showSelectAll: true,
showSelectionElement: null,
size: 'normal',
sortField: null,
sortIcon: null,
sortMode: 'single',
sortOrder: null,
stateKey: null,
stateStorage: 'session',
stripedRows: false,
style: null,
tabIndex: 0,
tableClassName: null,
tableStyle: null,
totalRecords: null,
value: null,
virtualScrollerOptions: null,
children: undefined
},
css: {
styles: styles$1,
classes: classes,
inlineStyles: inlineStyles
}
});
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var RowCheckbox = /*#__PURE__*/React__namespace.memo(function (props) {
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var mergeProps = hooks.useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName,
state: {
focused: focusedState
},
context: {
index: props.tabIndex,
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
};
var _onFocus = function onFocus() {
setFocusedState(true);
};
var _onBlur = function onBlur() {
setFocusedState(false);
};
var _onClick = function onClick(event) {
if (!props.disabled) {
setFocusedState(true);
props.onChange(event);
event.preventDefault();
}
};
var _onKeyDown = function onKeyDown(event) {
if (event.code === 'Space' || event.key === ' ') {
// event.key is for Android support
_onClick(event);
event.preventDefault();
}
};
var checkboxIconProps = mergeProps({
className: cx('checkboxIcon')
}, getColumnPTOptions('checkboxIcon'));
var icon = props.checked ? props.checkIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconProps) : null;
var checkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$b({}, checkboxIconProps), {
props: props
});
var tabIndex = props.disabled ? null : '0';
var checkboxWrapperProps = mergeProps({
className: cx('checkboxWrapper', {
rowProps: props,
focusedState: focusedState
}),
onClick: function onClick(e) {
return _onClick(e);
}
}, getColumnPTOptions('checkboxWrapper'));
var checkboxProps = mergeProps({
className: cx('checkbox', {
rowProps: props,
focusedState: focusedState
}),
role: 'checkbox',
'aria-checked': props.checked,
tabIndex: tabIndex,
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
onFocus: function onFocus(e) {
return _onFocus();
},
onBlur: function onBlur(e) {
return _onBlur();
},
'aria-label': props.ariaLabel
}, getColumnPTOptions('checkbox'));
return /*#__PURE__*/React__namespace.createElement("div", checkboxWrapperProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkIcon));
});
RowCheckbox.displayName = 'RowCheckbox';
var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
var _React$useState = React__namespace.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
focusedState = _React$useState2[0],
setFocusedState = _React$useState2[1];
var inputRef = React__namespace.useRef(null);
var mergeProps = hooks.useMergeProps();
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnPTOptions = function getColumnPTOptions(key) {
var columnMetaData = {
props: getColumnProps(),
parent: props.metaData,
hostName: props.hostName,
state: {
focused: focusedState
},
context: {
index: props.tabIndex,
checked: props.checked,
disabled: props.disabled
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(getColumnProps(), key, columnMetaData));
};
var _onFocus = function onFocus() {
setFocusedState(true);
};
var _onBlur = function onBlur() {
setFocusedState(false);
};
var _onClick = function onClick(event) {
if (!props.disabled) {
props.onChange(event);
utils.DomHandler.focus(inputRef.current);
}
};
var _onKeyDown = function onKeyDown(event) {
if (event.code === 'Space' || event.key === ' ') {
// event.key is for Android support
_onClick(event);
event.preventDefault();
}
};
var _onChange = function onChange(event) {
_onClick(event);
};
var name = "".concat(props.tableSelector, "_dt_radio");
var radiobuttonWrapperProps = mergeProps({
className: cx('radiobuttonWrapper', {
rowProps: props,
focusedState: focusedState
})
}, getColumnPTOptions('radiobuttonWrapper'));
var hiddenInputWrapperProps = mergeProps({
className: 'p-hidden-accessible'
}, getColumnPTOptions('hiddenInputWrapper'));
var hiddenInputProps = mergeProps({
name: name,
type: 'radio',
checked: props.checked,
onFocus: function onFocus(e) {
return _onFocus();
},
onBlur: function onBlur(e) {
return _onBlur();
},
onChange: function onChange(e) {
return _onChange(e);
},
onKeyDown: function onKeyDown(e) {
return _onKeyDown(e);
},
'aria-label': props.ariaLabel
}, getColumnPTOptions('hiddenInput'));
var radiobuttonProps = mergeProps({
className: cx('radiobutton', {
rowProps: props,
focusedState: focusedState
}),
onClick: function onClick(e) {
return _onClick(e);
},
role: 'radio',
'aria-checked': props.checked
}, getColumnPTOptions('radiobutton'));
var radiobuttonIconProps = mergeProps({
className: cx('radiobuttonIcon')
}, getColumnPTOptions('radiobuttonIcon'));
return /*#__PURE__*/React__namespace.createElement("div", radiobuttonWrapperProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", _extends({
ref: inputRef
}, hiddenInputProps))), /*#__PURE__*/React__namespace.createElement("div", radiobuttonProps, /*#__PURE__*/React__namespace.createElement("div", radiobuttonIconProps)));
});
RowRadioButton.displayName = 'RowRadioButton';
function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
var mergeProps = hooks.useMergeProps();
var _React$useState = React__namespace.useState(props.editing),
_React$useState2 = _slicedToArray(_React$useState, 2),
editingState = _React$useState2[0],
setEditingState = _React$useState2[1];
var _React$useState3 = React__namespace.useState(props.rowData),
_React$useState4 = _slicedToArray(_React$useState3, 2),
editingRowDataState = _React$useState4[0],
setEditingRowDataState = _React$useState4[1];
var _React$useState5 = React__namespace.useState({}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
styleObjectState = _React$useState6[0],
setStyleObjectState = _React$useState6[1];
var elementRef = React__namespace.useRef(null);
var keyHelperRef = React__namespace.useRef(null);
var overlayEventListener = React__namespace.useRef(null);
var selfClick = React__namespace.useRef(false);
var tabindexTimeout = React__namespace.useRef(null);
var initFocusTimeout = React__namespace.useRef(null);
var _props$ptCallbacks = props.ptCallbacks,
ptm = _props$ptCallbacks.ptm,
ptmo = _props$ptCallbacks.ptmo,
cx = _props$ptCallbacks.cx;
var getColumnProp = function getColumnProp(name) {
return ColumnBase.getCProp(props.column, name);
};
var getColumnProps = function getColumnProps() {
return ColumnBase.getCProps(props.column);
};
var getColumnPTOptions = function getColumnPTOptions(key) {
var cProps = getColumnProps();
var columnMetaData = {
props: cProps,
parent: props.metaData,
hostName: props.hostName,
state: {
styleObject: styleObjectState,
editing: editingState,
editingRowData: editingRowDataState
},
context: {
index: props.index,
size: props.metaData.props.size,
showGridlines: props.metaData.props.showGridlines
}
};
return mergeProps(ptm("column.".concat(key), {
column: columnMetaData
}), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
};
var field = getColumnProp('field') || "field_".concat(props.index);
var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
var isEditable = function isEditable() {
return getColumnProp('editor');
};
var _useEventListener = hooks.useEventListener({
type: 'click',
listener: function listener(e) {
if (!selfClick.current && isOutsideClicked(e.target)) {
// #2666 for overlay components and outside is clicked
setTimeout(function () {
switchCellToViewMode(e, true);
}, 0);
}
selfClick.current = false;
},
options: true,
when: isEditable()
}),
_useEventListener2 = _slicedToArray(_useEventListener, 2),
bindDocumentClickListener = _useEventListener2[0],
unbindDocumentClickListener = _useEventListener2[1];
var isSelected = function isSelected() {
return props.selection ? props.selection instanceof Array ? findIndex(props.selection) > -1 : equals(props.selection) : false;
};
var equalsData = function equalsData(data) {
return props.compareSelectionBy === 'equals' ? data === props.rowData : utils.ObjectUtils.equals(data, props.rowData, props.dataKey);
};
var equals = function equals(selectedCell) {
return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
};
var isOutsideClicked = function isOutsideClicked(target) {
return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
};
var getVirtualScrollerOption = function getVirtualScrollerOption(option) {
return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
};
var getStyle = function getStyle() {
var bodyStyle = getColumnProp('bodyStyle');
var columnStyle = getColumnProp('style');
return getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
};
var getCellParams = function getCellParams() {
return {
value: resolveFieldData(),
field: field,
rowData: props.rowData,
rowIndex: props.rowIndex,
cellIndex: props.index,
selected: isSelected(),
column: props.column,
props: props
};
};
var getCellCallbackParams = function getCellCallbackParams(event) {
var params = getCellParams();
return _objectSpread$a({
originalEvent: event
}, params);
};
var resolveFieldData = function resolveFieldData(data) {
return utils.ObjectUtils.resolveFieldData(data || props.rowData, field);
};
var getEditingRowData = function getEditingRowData() {
return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
};
var getTabIndex = function getTabIndex(cellSelected) {
return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && props.index === 0 ? props.tabIndex : -1 : null;
};
var findIndex = function findIndex(collection) {
return (collection || []).findIndex(function (data) {
return equals(data);
});
};
var closeCell = function closeCell(event) {
var params = getCellCallbackParams(event);
var onBeforeCellEditHide = getColumnProp('onBeforeCellEditHide');
if (onBeforeCellEditHide) {
onBeforeCellEditHide(params);
}
/* When using the 'tab' key, the focus event of the next cell is not called in IE. */
setTimeout(function () {
setEditingState(false);
unbindDocumentClickListener();
overlayservice.OverlayService.off('overlay-click', overlayEventListener.current);
overlayEventListener.current = null;
selfClick.current = false;
}, 1);
};
var switchCellToViewMode = function switchCellToViewMode(event, submit) {
var callbackParams = getCellCallbackParams(event);
setEditingRowDataState(function (prev) {
var newRowData = prev;
var newValue = resolveFieldData(newRowData);
var params = _objectSpread$a(_objectSpread$a({}, callbackParams), {}, {
newRowData: newRowData,
newValue: newValue
});
var onCellEditCancel = getColumnProp('onCellEditCancel');
var cellEditValidator = getColumnProp('cellEditValidator');
var onCellEditComplete = getColumnProp('onCellEditComplete');
if (!submit && onCellEditCancel) {
onCellEditCancel(params);
}
var valid = true;
if (!submit && cellEditValidator) {
valid = cellEditValidator(params);
}
if (valid) {
if (submit && onCellEditComplete) {
setTimeout(function () {
return onCellEditComplete(params);
});
}
closeCell(event);
} else {
event.preventDefault();
}
return newRowData;
});
};
var findNextSelectableCell = function findNextSelectableCell(cell) {
var nextCell = cell.nextElementSibling;
return nextCell ? utils.DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
};
var findPrevSelectableCell = function findPrevSelectableCell(cell) {
var prevCell = cell.previousElementSibling;
return prevCell ? utils.DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
};
var findDownSelectableCell = function findDownSelectableCell(cell) {
var downRow = cell.parentElement.nextElementSibling;
var downCell = downRow ? downRow.children[props.index] : null;
return downRow && downCell ? utils.DomHandler.getAttribute(downRow, 'data-p-selectable-row') && utils.DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
};
var findUpSelectableCell = function findUpSelectableCell(cell) {
var upRow = cell.parentElement.previousElementSibling;
var upCell = upRow ? upRow.children[props.index] : null;
return upRow && upCell ? utils.DomHandler.getAttribute(upRow, 'data-p-selectable-row') && utils.DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
};
var changeTabIndex = function changeTabIndex(currentCell, nextCell) {
if (currentCell && nextCell) {
currentCell.tabIndex = -1;
nextCell.tabIndex = props.tabIndex;
}
};
var focusOnElement = function focusOnElement() {
clearTimeout(tabindexTimeout.current);
tabindexTimeout.current = setTimeout(function () {
if (editingState) {
var focusableEl = props.editMode === 'cell' ? utils.DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
focusableEl && focusableEl.focus();
}
keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
}, 1);
};
var focusOnInit = function focusOnInit() {
clearTimeout(initFocusTimeout.current);
initFocusTimeout.current = setTimeout(function () {
var focusableEl = props.editMode === 'row' ? utils.DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
focusableEl && focusableEl.focus();
}, 1);
};
var updateStickyPosition = function updateStickyPosition() {
if (getColumnProp('frozen')) {
var styleObject = _objectSpread$a({}, styleObjectState);
var align = getColumnProp('alignFrozen');
if (align === 'right') {
var right = 0;
var next = elementRef.current && elementRef.current.nextElementSibling;
if (next) {
right = utils.DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
}
styleObject['right'] = right + 'px';
} else {
var left = 0;
var prev = elementRef.current && elementRef.current.previousElementSibling;
if (prev) {
left = utils.DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
}
styleObject['left'] = left + 'px';
}
var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
!isSameStyle && setStyleObjectState(styleObject);
}
};
var editorCallback = function editorCallback(val) {
var editingRowData = _objectSpread$a({}, editingRowDataState);
utils.ObjectUtils.mutateFieldData(editingRowData, field, val);
setEditingRowDataState(editingRowData);
// update editing meta for complete met