primevue 3.7.0 → 3.8.1

package/datatable/datatable.js

@@ -448,7 +448,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             },
             overlayClass() {
                 return [this.filterMenuClass, {
-                    'p-column-filter-overlay p-component p-fluid': true, 
+                    'p-column-filter-overlay p-component p-fluid': true,
                     'p-column-filter-overlay-menu': this.display === 'menu',
                     'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                     'p-ripple-disabled': this.$primevue.config.ripple === false
@@ -559,7 +559,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               _hoisted_2$6
             ], 42, ["aria-expanded"]))
           : vue.createCommentVNode("", true),
-        ($options.showMenuButton && $props.display === 'row')
+        ($props.showClearButton && $props.display === 'row')
           ? (vue.openBlock(), vue.createBlock("button", {
               key: 2,
               class: [{'p-hidden-space': !$options.hasRowFilter()}, "p-column-filter-clear-button p-link"],
@@ -679,7 +679,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                               ]))
                             : vue.createCommentVNode("", true),
                           vue.createVNode("div", _hoisted_9, [
-                            (!$props.filterClearTemplate)
+                            (!$props.filterClearTemplate && $props.showClearButton)
                               ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
                                   key: 0,
                                   type: "button",
@@ -809,7 +809,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(prop) {
-                return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
             onClick(event) {
                 this.$emit('column-click', {originalEvent: event, column: this.column});
@@ -1115,7 +1115,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             },
             getFilterColumnHeaderClass(column) {
                 return ['p-filter-column', this.columnProp(column, 'filterHeaderClass'), this.columnProp(column, 'class'), {
@@ -1198,7 +1198,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                       return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                         key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
                       }, [
-                        (!$options.columnProp(col, 'hidden'))
+                        (!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || ($props.groupRowsBy !== $options.columnProp(col, 'field'))))
                           ? (vue.openBlock(), vue.createBlock("th", {
                               key: 0,
                               style: $options.getFilterColumnHeaderStyle(col),
@@ -1411,8 +1411,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
     var script$4 = {
         name: 'BodyCell',
-        emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change',
-                'row-toggle', 'radio-change', 'checkbox-change'],
+        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,
@@ -1446,6 +1446,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: Boolean,
                 default: false
             },
+            editingMeta: {
+                type: Object,
+                default: null
+            },
             editMode: {
                 type: String,
                 default: null
@@ -1467,6 +1471,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         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() {
@@ -1478,6 +1485,11 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             if (this.columnProp('frozen')) {
                 this.updateStickyPosition();
             }
+
+            if (this.d_editing && (this.editMode === 'cell' || (this.editMode === 'row' && this.columnProp('rowEditor')))) {
+                const focusableEl = utils.DomHandler.getFirstFocusableElement(this.$el);
+                focusableEl && focusableEl.focus();
+            }
         },
         beforeUnmount() {
             if (this.overlayEventListener) {
@@ -1487,10 +1499,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(prop) {
-                return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
             resolveFieldData() {
-                return utils.ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
+                return utils.ObjectUtils.resolveFieldData(this.rowData, this.field);
             },
             toggleRow(event) {
                 this.$emit('row-toggle', {
@@ -1529,7 +1541,6 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             switchCellToViewMode() {
                 this.d_editing = false;
                 this.unbindDocumentEditListener();
-                this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: false});
                 OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             },
@@ -1540,8 +1551,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     if (!this.d_editing) {
                         this.d_editing = true;
                         this.bindDocumentEditListener();
-                        this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
-                        this.$emit('editing-cell-change', {rowIndex: this.rowIndex, cellIndex: this.index, editing: true});
+                        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)) {
@@ -1553,10 +1563,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 }
             },
             completeEdit(event, type) {
-                let completeEvent = {
+                const completeEvent = {
                     originalEvent: event,
                     data: this.rowData,
-                    field: this.columnProp('field'),
+                    newData: this.editingRowData,
+                    value: this.rowData[this.field],
+                    newValue: this.editingRowData[this.field],
+                    field: this.field,
                     index: this.rowIndex,
                     type: type,
                     defaultPrevented: false,
@@ -1580,7 +1593,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                         case 27:
                             this.switchCellToViewMode();
-                            this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+                            this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.field, index: this.rowIndex});
                         break;
 
                         case 9:
@@ -1669,13 +1682,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 return (utils.DomHandler.find(this.$el, '.p-invalid').length === 0);
             },
             onRowEditInit(event) {
-                this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.rowIndex});
+                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, field: this.columnProp('field'), index: this.rowIndex});
+                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, field: this.columnProp('field'), index: this.rowIndex});
+                this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, newData: this.editingRowData, field: this.field, index: this.rowIndex});
             },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
@@ -1700,6 +1713,12 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             }
         },
         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,
@@ -1752,27 +1771,29 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               key: 1,
               data: $props.rowData,
               column: $props.column,
+              field: $options.field,
               index: $props.rowIndex,
               frozenRow: $props.frozenRow
-            }, null, 8, ["data", "column", "index", "frozenRow"]))
+            }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
           : ($props.column.children && $props.column.children.editor && $data.d_editing)
             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.editor), {
                 key: 2,
-                data: $props.rowData,
+                data: $options.editingRowData,
                 column: $props.column,
+                field: $options.field,
                 index: $props.rowIndex,
                 frozenRow: $props.frozenRow
-              }, null, 8, ["data", "column", "index", "frozenRow"]))
+              }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
             : ($options.columnProp('selectionMode'))
               ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 3 }, [
-                  ($props.column.props.selectionMode === 'single')
+                  ($options.columnProp('selectionMode') === 'single')
                     ? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
                         key: 0,
                         value: $props.rowData,
                         checked: $props.selected,
                         onChange: $options.toggleRowWithRadio
                       }, null, 8, ["value", "checked", "onChange"]))
-                    : ($props.column.props.selectionMode ==='multiple')
+                    : ($options.columnProp('selectionMode') ==='multiple')
                       ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
                           key: 1,
                           value: $props.rowData,
@@ -1849,7 +1870,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         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-cell-change'],
+            'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-meta-change'],
         props: {
             value: {
                 type: Array,
@@ -1943,6 +1964,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            editingMeta: {
+                type: Object,
+                default: null
+            },
             loading: {
                 type: Boolean,
                 default: false
@@ -1985,7 +2010,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             },
             shouldRenderRowGroupHeader(value, rowData, i) {
                 let currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
@@ -2244,8 +2269,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             onRowEditCancel(event) {
                 this.$emit('row-edit-cancel', event);
             },
-            onEditingCellChange(event) {
-                this.$emit('editing-cell-change', event);
+            onEditingMetaChange(event) {
+                this.$emit('editing-meta-change', event);
             },
             updateFrozenRowStickyPosition() {
                 this.$el.style.top = utils.DomHandler.getOuterHeight(this.$el.previousElementSibling) + 'px';
@@ -2327,15 +2352,15 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                       onClick: $event => ($options.onRowClick($event, rowData, index)),
                       onDblclick: $event => ($options.onRowDblClick($event, rowData, index)),
                       onContextmenu: $event => ($options.onRowRightClick($event, rowData, index)),
-                      onTouchend: _cache[11] || (_cache[11] = $event => ($options.onRowTouchEnd($event))),
+                      onTouchend: _cache[10] || (_cache[10] = $event => ($options.onRowTouchEnd($event))),
                       onKeydown: $event => ($options.onRowKeyDown($event, rowData, index)),
                       tabindex: $props.selectionMode || $props.contextMenu ? '0' : null,
-                      onMousedown: _cache[12] || (_cache[12] = $event => ($options.onRowMouseDown($event))),
+                      onMousedown: _cache[11] || (_cache[11] = $event => ($options.onRowMouseDown($event))),
                       onDragstart: $event => ($options.onRowDragStart($event, index)),
                       onDragover: $event => ($options.onRowDragOver($event,index)),
-                      onDragleave: _cache[13] || (_cache[13] = $event => ($options.onRowDragLeave($event))),
-                      onDragend: _cache[14] || (_cache[14] = $event => ($options.onRowDragEnd($event))),
-                      onDrop: _cache[15] || (_cache[15] = $event => ($options.onRowDrop($event))),
+                      onDragleave: _cache[12] || (_cache[12] = $event => ($options.onRowDragLeave($event))),
+                      onDragend: _cache[13] || (_cache[13] = $event => ($options.onRowDragEnd($event))),
+                      onDrop: _cache[14] || (_cache[14] = $event => ($options.onRowDrop($event))),
                       role: "row"
                     }, [
                       (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
@@ -2365,8 +2390,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                                 onRowEditInit: _cache[7] || (_cache[7] = $event => ($options.onRowEditInit($event))),
                                 onRowEditSave: _cache[8] || (_cache[8] = $event => ($options.onRowEditSave($event))),
                                 onRowEditCancel: _cache[9] || (_cache[9] = $event => ($options.onRowEditCancel($event))),
-                                onEditingCellChange: _cache[10] || (_cache[10] = $event => ($options.onEditingCellChange($event)))
-                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout"]))
+                                editingMeta: $props.editingMeta,
+                                onEditingMetaChange: $options.onEditingMetaChange
+                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout", "editingMeta", "onEditingMetaChange"]))
                             : vue.createCommentVNode("", true)
                         ], 64))
                       }), 128))
@@ -2440,7 +2466,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(prop) {
-                return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
@@ -2513,7 +2539,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             }
         },
         computed: {
@@ -2601,7 +2627,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
             'column-resize-end', 'column-reorder', 'row-reorder', 'update:expandedRows', 'row-collapse', 'row-expand',
             'update:expandedRowGroups', 'rowgroup-collapse', 'rowgroup-expand', 'update:filters', 'state-restore', 'state-save',
-            'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'editing-cell-change'],
+            'cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'update:editingRows', 'row-edit-init', 'row-edit-save', 'row-edit-cancel'],
         props: {
             value: {
                 type: Array,
@@ -2852,8 +2878,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 d_expandedRowKeys: null,
                 d_columnOrder: null,
                 d_editingRowKeys: null,
-                d_filters: this.cloneFilters(this.filters),
-                d_editingCells: []
+                d_editingMeta: {},
+                d_filters: this.cloneFilters(this.filters)
             };
         },
         rowTouched: false,
@@ -2920,9 +2946,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             }
         },
         mounted() {
-            if (this.scrollable && (this.scrollDirection !== 'vertical' || this.rowGroupMode === 'subheader' || !this.resizableColumns)) {
-                this.updateScrollWidth();
-            }
+            this.$el.setAttribute(this.attributeSelector, '');
 
             if (this.responsiveLayout === 'stack' && !this.scrollable) {
                 this.createResponsiveStyle();
@@ -2931,9 +2955,14 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             if (this.isStateful() && this.resizableColumns) {
                 this.restoreColumnWidths();
             }
+
+            if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
+                this.updateEditingRowKeys(this.editingRows);
+            }
         },
         beforeUnmount() {
             this.unbindColumnResizeEvents();
+            this.destroyStyleElement();
             this.destroyResponsiveStyle();
         },
         updated() {
@@ -2941,15 +2970,17 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.saveState();
             }
 
-            if (this.scrollable && (this.scrollDirection !== 'vertical' || this.rowGroupMode === 'subheader')) {
-                this.updateScrollWidth();
+            if (this.editMode === 'row' && this.dataKey && !this.d_editingRowKeys) {
+                this.updateEditingRowKeys(this.editingRows);
             }
         },
         methods: {
             columnProp(col, prop) {
-                return col.props ? ((col.type.props[prop].type === Boolean && col.props[prop] === '') ? true : col.props[prop]) : null;
+                return utils.ObjectUtils.getVNodeProp(col, prop);
             },
             onPage(event) {
+                this.clearEditingMetaData();
+
                 this.d_first = event.first;
                 this.d_rows = event.rows;
 
@@ -3009,6 +3040,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 }
             },
             sortSingle(value) {
+                this.clearEditingMetaData();
+
                 if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
                     this.d_multiSortMeta = [
                         {field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
@@ -3043,6 +3076,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 return data;
             },
             sortMultiple(value) {
+                this.clearEditingMetaData();
+
                 if (this.groupRowsBy && (this.d_groupRowsSortMeta || (this.d_multiSortMeta.length && this.groupRowsBy === this.d_multiSortMeta[0].field))) {
                     const firstSortMeta = this.d_multiSortMeta[0];
                     !this.d_groupRowsSortMeta && (this.d_groupRowsSortMeta = firstSortMeta);
@@ -3100,6 +3135,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     return;
                 }
 
+                this.clearEditingMetaData();
+
                 let globalFilterFieldsArray;
                 if (this.filters['global']) {
                     globalFilterFieldsArray = this.globalFilterFields|| this.columns.map(col => this.columnProp(col, 'filterField') || this.columnProp(col, 'field'));
@@ -3608,7 +3645,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                         }
                     }
                     else if (this.columnResizeMode === 'expand') {
-                        this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
+                        const tableWidth = this.$refs.table.offsetWidth + delta + 'px';
+                        this.$refs.table.style.width = tableWidth;
+                        this.$refs.table.style.minWidth = tableWidth;
 
                         if (!this.scrollable)
                             this.resizeColumnElement.style.width = newColumnWidth + 'px';
@@ -3634,22 +3673,27 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             },
             resizeTableCells(newColumnWidth, nextColumnWidth) {
                 let colIndex = utils.DomHandler.index(this.resizeColumnElement);
-                let children = this.$refs.table.children;
-                for (let child of children) {
-                    for (let row of child.children) {
-                        let resizeCell = row.children[colIndex];
-                        if (resizeCell) {
-                            resizeCell.style.flex = '0 0 ' + newColumnWidth + 'px';
-
-                            if (this.columnResizeMode === 'fit') {
-                                let nextCell = resizeCell.nextElementSibling;
-                                if (nextCell) {
-                                    nextCell.style.flex = '0 0 ' + nextColumnWidth + 'px';
-                                }
-                            }
-                        }
+                let widths = [];
+                let headers = utils.DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th');
+                headers.forEach(header => widths.push(utils.DomHandler.getOuterWidth(header)));
+
+                this.destroyStyleElement();
+                this.createStyleElement();
+
+                let innerHTML = '';
+                widths.forEach((width,index) => {
+                    let colWidth = index === colIndex ? newColumnWidth : (nextColumnWidth && index === colIndex + 1) ? nextColumnWidth : width;
+                    innerHTML += `
+                    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index+1}) {
+                        flex: 0 0 ${colWidth}px !important;
                     }
-                }
+
+                    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index+1}) {
+                        flex: 0 0 ${colWidth}px !important;
+                    }
+                `;
+                });
+                this.styleElement.innerHTML = innerHTML;
             },
             bindColumnResizeEvents() {
                 if (!this.documentColumnResizeListener) {
@@ -4058,7 +4102,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 state.columnWidths = widths.join(',');
 
                 if (this.columnResizeMode === 'expand') {
-                    state.tableWidth =  utils.DomHandler.getOuterWidth(this.$refs.table) + 'px';
+                    state.tableWidth = utils.DomHandler.getOuterWidth(this.$refs.table) + 'px';
                 }
             },
             restoreColumnWidths() {
@@ -4067,10 +4111,31 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                     if (this.columnResizeMode === 'expand' && this.tableWidthState) {
                         this.$refs.table.style.width = this.tableWidthState;
+                        this.$refs.table.style.minWidth = this.tableWidthState;
                         this.$el.style.width = this.tableWidthState;
                     }
 
-                    utils.DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th').forEach((header, index) => header.style.width = widths[index] + 'px');
+                    this.createStyleElement();
+
+                    if (this.scrollable && widths && widths.length > 0) {
+                        let innerHTML = '';
+                        widths.forEach((width,index) => {
+                            innerHTML += `
+                            .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index+1}) {
+                                flex: 0 0 ${width}px;
+                            }
+
+                            .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index+1}) {
+                                flex: 0 0 ${width}px;
+                            }
+                        `;
+                        });
+
+                        this.styleElement.innerHTML = innerHTML;
+                    }
+                    else {
+                        utils.DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th').forEach((header, index) => header.style.width = widths[index] + 'px');
+                    }
                 }
             },
             onCellEditInit(event) {
@@ -4082,18 +4147,6 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             onCellEditCancel(event) {
                 this.$emit('cell-edit-cancel', event);
             },
-            onEditingCellChange(event) {
-                let { rowIndex, cellIndex, editing } = event;
-                let _editingCells = [...this.d_editingCells];
-
-                if (editing)
-                    _editingCells.push({ rowIndex, cellIndex });
-                else
-                    _editingCells = _editingCells.filter(cell => !(cell.rowIndex === rowIndex && cell.cellIndex === cellIndex));
-
-                this.d_editingCells = _editingCells;
-                this.$emit('value-change', this.processedData);
-            },
             onRowEditInit(event) {
                 let _editingRows = this.editingRows ? [...this.editingRows] : [];
                 _editingRows.push(event.data);
@@ -4112,6 +4165,24 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.$emit('update:editingRows', _editingRows);
                 this.$emit('row-edit-cancel', event);
             },
+            onEditingMetaChange(event) {
+                let { data, field, index, editing } = event;
+                let meta = this.d_editingMeta[index];
+
+                if (editing) {
+                    !meta && (meta = this.d_editingMeta[index] = { data: { ...data }, fields: [] });
+                    meta['fields'].push(field);
+                }
+                else if (meta) {
+                    const fields = meta['fields'].filter(f => f !== field);
+                    !fields.length ? (delete this.d_editingMeta[index]) : (meta['fields'] = fields);
+                }
+            },
+            clearEditingMetaData() {
+                if (this.editMode) {
+                    this.d_editingMeta = {};
+                }
+            },
             createLazyLoadEvent(event) {
                 return {
                     originalEvent: event,
@@ -4156,22 +4227,16 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
                 this.d_columnOrder = columnOrder;
             },
-            updateScrollWidth() {
-                let parentElementHeight = utils.DomHandler.width(this.$refs.table.parentElement);
-
-                if (this.$refs.table.scrollWidth > parentElementHeight) {
-                    this.$refs.table.style.width = this.$refs.table.scrollWidth + 'px';
-                }
-                else {
-                    this.$refs.table.style.width = parentElementHeight - utils.DomHandler.calculateScrollbarWidth() + 'px';
-                }
+            createStyleElement() {
+                this.styleElement = document.createElement('style');
+                this.styleElement.type = 'text/css';
+                document.head.appendChild(this.styleElement);
             },
             createResponsiveStyle() {
-    			if (!this.styleElement) {
-                    this.$el.setAttribute(this.attributeSelector, '');
-    				this.styleElement = document.createElement('style');
-    				this.styleElement.type = 'text/css';
-    				document.head.appendChild(this.styleElement);
+    			if (!this.responsiveStyleElement) {
+    				this.responsiveStyleElement = document.createElement('style');
+    				this.responsiveStyleElement.type = 'text/css';
+    				document.head.appendChild(this.responsiveStyleElement);
 
                     let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
@@ -4203,10 +4268,16 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 }
 `;
 
-                    this.styleElement.innerHTML = innerHTML;
+                    this.responsiveStyleElement.innerHTML = innerHTML;
     			}
     		},
             destroyResponsiveStyle() {
+                if (this.responsiveStyleElement) {
+                    document.head.removeChild(this.responsiveStyleElement);
+                    this.responsiveStyleElement = null;
+                }
+            },
+            destroyStyleElement() {
                 if (this.styleElement) {
                     document.head.removeChild(this.styleElement);
                     this.styleElement = null;
@@ -4291,24 +4362,21 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             hasFilters() {
                 return this.filters && Object.keys(this.filters).length > 0 && this.filters.constructor === Object;
             },
-            hasEditingCell() {
-                return this.d_editingCells && this.d_editingCells.length !== 0;
-            },
             processedData() {
                 let data = this.value || [];
 
-                if (!this.lazy && !this.hasEditingCell) {
+                if (!this.lazy) {
                     if (data && data.length) {
+                        if (this.hasFilters) {
+                            data = this.filter(data);
+                        }
+
                         if (this.sorted) {
                             if(this.sortMode === 'single')
                                 data = this.sortSingle(data);
                             else if(this.sortMode === 'multiple')
                                 data = this.sortMultiple(data);
                         }
-
-                        if (this.hasFilters) {
-                            data = this.filter(data);
-                        }
                     }
                 }
 
@@ -4541,8 +4609,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   onRowEditInit: _cache[24] || (_cache[24] = $event => ($options.onRowEditInit($event))),
                   onRowEditSave: _cache[25] || (_cache[25] = $event => ($options.onRowEditSave($event))),
                   onRowEditCancel: _cache[26] || (_cache[26] = $event => ($options.onRowEditCancel($event))),
-                  onEditingCellChange: _cache[27] || (_cache[27] = $event => ($options.onEditingCellChange($event)))
-                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown"]))
+                  editingMeta: $data.d_editingMeta,
+                  onEditingMetaChange: $options.onEditingMetaChange
+                }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
               : vue.createCommentVNode("", true),
             vue.createVNode(_component_DTTableBody, {
               value: $options.dataToRender,
@@ -4572,28 +4641,29 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               loading: $props.loading,
               responsiveLayout: $props.responsiveLayout,
               onRowgroupToggle: $options.toggleRowGroup,
-              onRowClick: _cache[28] || (_cache[28] = $event => ($options.onRowClick($event))),
-              onRowDblclick: _cache[29] || (_cache[29] = $event => ($options.onRowDblClick($event))),
-              onRowRightclick: _cache[30] || (_cache[30] = $event => ($options.onRowRightClick($event))),
+              onRowClick: _cache[27] || (_cache[27] = $event => ($options.onRowClick($event))),
+              onRowDblclick: _cache[28] || (_cache[28] = $event => ($options.onRowDblClick($event))),
+              onRowRightclick: _cache[29] || (_cache[29] = $event => ($options.onRowRightClick($event))),
               onRowTouchend: $options.onRowTouchEnd,
               onRowKeydown: $options.onRowKeyDown,
               onRowMousedown: $options.onRowMouseDown,
-              onRowDragstart: _cache[31] || (_cache[31] = $event => ($options.onRowDragStart($event))),
-              onRowDragover: _cache[32] || (_cache[32] = $event => ($options.onRowDragOver($event))),
-              onRowDragleave: _cache[33] || (_cache[33] = $event => ($options.onRowDragLeave($event))),
-              onRowDragend: _cache[34] || (_cache[34] = $event => ($options.onRowDragEnd($event))),
-              onRowDrop: _cache[35] || (_cache[35] = $event => ($options.onRowDrop($event))),
-              onRowToggle: _cache[36] || (_cache[36] = $event => ($options.toggleRow($event))),
-              onRadioChange: _cache[37] || (_cache[37] = $event => ($options.toggleRowWithRadio($event))),
-              onCheckboxChange: _cache[38] || (_cache[38] = $event => ($options.toggleRowWithCheckbox($event))),
-              onCellEditInit: _cache[39] || (_cache[39] = $event => ($options.onCellEditInit($event))),
-              onCellEditComplete: _cache[40] || (_cache[40] = $event => ($options.onCellEditComplete($event))),
-              onCellEditCancel: _cache[41] || (_cache[41] = $event => ($options.onCellEditCancel($event))),
-              onRowEditInit: _cache[42] || (_cache[42] = $event => ($options.onRowEditInit($event))),
-              onRowEditSave: _cache[43] || (_cache[43] = $event => ($options.onRowEditSave($event))),
-              onRowEditCancel: _cache[44] || (_cache[44] = $event => ($options.onRowEditCancel($event))),
-              onEditingCellChange: _cache[45] || (_cache[45] = $event => ($options.onEditingCellChange($event)))
-            }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown"]),
+              onRowDragstart: _cache[30] || (_cache[30] = $event => ($options.onRowDragStart($event))),
+              onRowDragover: _cache[31] || (_cache[31] = $event => ($options.onRowDragOver($event))),
+              onRowDragleave: _cache[32] || (_cache[32] = $event => ($options.onRowDragLeave($event))),
+              onRowDragend: _cache[33] || (_cache[33] = $event => ($options.onRowDragEnd($event))),
+              onRowDrop: _cache[34] || (_cache[34] = $event => ($options.onRowDrop($event))),
+              onRowToggle: _cache[35] || (_cache[35] = $event => ($options.toggleRow($event))),
+              onRadioChange: _cache[36] || (_cache[36] = $event => ($options.toggleRowWithRadio($event))),
+              onCheckboxChange: _cache[37] || (_cache[37] = $event => ($options.toggleRowWithCheckbox($event))),
+              onCellEditInit: _cache[38] || (_cache[38] = $event => ($options.onCellEditInit($event))),
+              onCellEditComplete: _cache[39] || (_cache[39] = $event => ($options.onCellEditComplete($event))),
+              onCellEditCancel: _cache[40] || (_cache[40] = $event => ($options.onCellEditCancel($event))),
+              onRowEditInit: _cache[41] || (_cache[41] = $event => ($options.onRowEditInit($event))),
+              onRowEditSave: _cache[42] || (_cache[42] = $event => ($options.onRowEditSave($event))),
+              onRowEditCancel: _cache[43] || (_cache[43] = $event => ($options.onRowEditCancel($event))),
+              editingMeta: $data.d_editingMeta,
+              onEditingMetaChange: $options.onEditingMetaChange
+            }, null, 8, ["value", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
             vue.createVNode(_component_DTTableFooter, {
               columnGroup: $options.footerColumnGroup,
               columns: $options.columns
@@ -4611,7 +4681,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               rowsPerPageOptions: $props.rowsPerPageOptions,
               currentPageReportTemplate: $props.currentPageReportTemplate,
               class: "p-paginator-bottom",
-              onPage: _cache[46] || (_cache[46] = $event => ($options.onPage($event))),
+              onPage: _cache[44] || (_cache[44] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
               (_ctx.$slots.paginatorLeft)
@@ -4674,7 +4744,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       }
     }
 
-    var css_248z = "\n.p-datatable {\n    position: relative;\n}\n.p-datatable table {\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-datatable .p-sortable-column {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\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.p-datatable .p-sortable-column .p-sortable-column-badge {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper > table,\n.p-datatable-auto-layout > .p-datatable-wrapper > table {\n    table-layout: auto;\n}\n.p-datatable-hoverable-rows .p-selectable-row {\n    cursor: pointer;\n}\n\n/* Scrollable */\n.p-datatable-scrollable .p-datatable-wrapper {\n    position: relative;\n    overflow: auto;\n}\n.p-datatable-scrollable .p-datatable-table {\n    display: block;\n}\n.p-datatable-scrollable .p-datatable-thead,\n.p-datatable-scrollable .p-datatable-tbody,\n.p-datatable-scrollable .p-datatable-tfoot {\n    display: block;\n}\n.p-datatable-scrollable .p-datatable-thead > tr,\n.p-datatable-scrollable .p-datatable-tbody > tr,\n.p-datatable-scrollable .p-datatable-tfoot > tr {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n    width: 100%;\n}\n.p-datatable-scrollable .p-datatable-thead > tr > th,\n.p-datatable-scrollable .p-datatable-tbody > tr > td,\n.p-datatable-scrollable .p-datatable-tfoot > tr > td {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 0px;\n            flex: 1 1 0;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-datatable-scrollable .p-datatable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-tfoot {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n.p-datatable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n.p-datatable-scrollable-both .p-datatable-thead > tr > th,\n.p-datatable-scrollable-both .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th\n.p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-datatable-flex-scrollable {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n.p-datatable-flex-scrollable .p-datatable-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    height: 100%;\n}\n.p-datatable-scrollable .p-rowgroup-header {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {\n    display: table-row;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {\n    display: table-cell;\n}\n\n/* Resizable */\n.p-datatable-resizable > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-resizable .p-datatable-thead > tr > th,\n.p-datatable-resizable .p-datatable-tfoot > tr > td,\n.p-datatable-resizable .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n.p-datatable-resizable .p-resizable-column {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-datatable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: .5rem;\n    height: 100%;\n    padding: 0px;\n    cursor:col-resize;\n    border: 1px solid transparent;\n}\n.p-datatable .p-column-header-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-datatable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n.p-datatable .p-row-editor-init,\n.p-datatable .p-row-editor-save,\n.p-datatable .p-row-editor-cancel {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Expand */\n.p-datatable .p-row-toggler {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    z-index: 2;\n}\n\n/* Filter */\n.p-column-filter-row {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 100%;\n}\n.p-column-filter-menu {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    margin-left: auto;\n}\n.p-column-filter-row .p-column-filter-element {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n}\n.p-column-filter-menu-button,\n.p-column-filter-clear-button {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-column-filter-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-column-filter-row-items {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-column-filter-row-item {\n    cursor: pointer;\n}\n.p-column-filter-add-button,\n.p-column-filter-remove-button {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-column-filter-add-button .p-button-label,\n.p-column-filter-remove-button .p-button-label {\n    -webkit-box-flex: 0;\n        -ms-flex-positive: 0;\n            flex-grow: 0;\n}\n.p-column-filter-buttonbar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\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";
+    var css_248z = "\n.p-datatable {\n    position: relative;\n}\n.p-datatable table {\n    border-collapse: collapse;\n    min-width: 100%;\n    table-layout: fixed;\n}\n.p-datatable .p-sortable-column {\n    cursor: pointer;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\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.p-datatable .p-sortable-column .p-sortable-column-badge {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-responsive-scroll > .p-datatable-wrapper > table,\n.p-datatable-auto-layout > .p-datatable-wrapper > table {\n    table-layout: auto;\n}\n.p-datatable-hoverable-rows .p-selectable-row {\n    cursor: pointer;\n}\n\n/* Scrollable */\n.p-datatable-scrollable .p-datatable-wrapper {\n    position: relative;\n    overflow: auto;\n}\n.p-datatable-scrollable .p-datatable-thead,\n.p-datatable-scrollable .p-datatable-tbody,\n.p-datatable-scrollable .p-datatable-tfoot {\n    display: block;\n}\n.p-datatable-scrollable .p-datatable-thead > tr,\n.p-datatable-scrollable .p-datatable-tbody > tr,\n.p-datatable-scrollable .p-datatable-tfoot > tr {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -ms-flex-wrap: nowrap;\n        flex-wrap: nowrap;\n    width: 100%;\n}\n.p-datatable-scrollable .p-datatable-thead > tr > th,\n.p-datatable-scrollable .p-datatable-tbody > tr > td,\n.p-datatable-scrollable .p-datatable-tfoot > tr > td {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 0px;\n            flex: 1 1 0;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-datatable-scrollable .p-datatable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-datatable-tfoot {\n    position: sticky;\n    bottom: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable .p-frozen-column {\n    position: sticky;\n    background: inherit;\n}\n.p-datatable-scrollable th.p-frozen-column {\n    z-index: 1;\n}\n.p-datatable-scrollable-both .p-datatable-thead > tr > th,\n.p-datatable-scrollable-both .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th\n.p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-datatable-flex-scrollable {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n.p-datatable-flex-scrollable .p-datatable-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex: 1;\n            flex: 1;\n    height: 100%;\n}\n.p-datatable-scrollable .p-rowgroup-header {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {\n    display: table;\n    border-collapse: collapse;\n    width: 100%;\n    table-layout: fixed;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {\n    display: table-row;\n}\n.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,\n.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {\n    display: table-cell;\n}\n\n/* Resizable */\n.p-datatable-resizable > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-resizable .p-datatable-thead > tr > th,\n.p-datatable-resizable .p-datatable-tfoot > tr > td,\n.p-datatable-resizable .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n.p-datatable-resizable .p-resizable-column {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-datatable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: .5rem;\n    height: 100%;\n    padding: 0px;\n    cursor:col-resize;\n    border: 1px solid transparent;\n}\n.p-datatable .p-column-header-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-datatable .p-column-resizer-helper {\n    width: 1px;\n    position: absolute;\n    z-index: 10;\n    display: none;\n}\n.p-datatable .p-row-editor-init,\n.p-datatable .p-row-editor-save,\n.p-datatable .p-row-editor-cancel {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    overflow: hidden;\n    position: relative;\n}\n\n/* Expand */\n.p-datatable .p-row-toggler {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: 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/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    z-index: 2;\n}\n\n/* Filter */\n.p-column-filter-row {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    width: 100%;\n}\n.p-column-filter-menu {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    margin-left: auto;\n}\n.p-column-filter-row .p-column-filter-element {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    width: 1%;\n}\n.p-column-filter-menu-button,\n.p-column-filter-clear-button {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    cursor: pointer;\n    text-decoration: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-column-filter-overlay {\n    position: absolute;\n    top: 0;\n    left: 0;\n}\n.p-column-filter-row-items {\n    margin: 0;\n    padding: 0;\n    list-style: none;\n}\n.p-column-filter-row-item {\n    cursor: pointer;\n}\n.p-column-filter-add-button,\n.p-column-filter-remove-button {\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-column-filter-add-button .p-button-label,\n.p-column-filter-remove-button .p-button-label {\n    -webkit-box-flex: 0;\n        -ms-flex-positive: 0;\n            flex-grow: 0;\n}\n.p-column-filter-buttonbar {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: justify;\n        -ms-flex-pack: justify;\n            justify-content: space-between;\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";
     styleInject(css_248z);
 
     script.render = render;