primevue 3.22.4 → 3.24.0

package/datatable/datatable.js

@@ -583,7 +583,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     ];
     const _hoisted_6$3 = ["aria-label"];
     const _hoisted_7$2 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
-    const _hoisted_8$1 = [
+    const _hoisted_8$2 = [
       _hoisted_7$2
     ];
     const _hoisted_9$1 = ["aria-label"];
@@ -714,7 +714,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                                     type: "button",
                                     "aria-label": $options.saveButtonAriaLabel,
                                     onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args)))
-                                  }, _hoisted_8$1, 8, _hoisted_6$3)), [
+                                  }, _hoisted_8$2, 8, _hoisted_6$3)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true),
@@ -893,13 +893,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 isARowSelected: false
             };
         },
-        watch: {
-            virtualScrollerContentProps(newValue, oldValue) {
-                if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
-                    this.updateVirtualScrollerPosition();
-                }
-            }
-        },
         mounted() {
             if (this.frozenRow) {
                 this.updateFrozenRowStickyPosition();
@@ -908,10 +901,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             if (this.scrollable && this.rowGroupMode === 'subheader') {
                 this.updateFrozenRowGroupHeaderStickyPosition();
             }
-
-            if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical')) {
-                this.updateVirtualScrollerPosition();
-            }
         },
         updated() {
             if (this.frozenRow) {
@@ -1193,11 +1182,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
 
                 this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
             },
-            updateVirtualScrollerPosition() {
-                const tableHeaderHeight = utils.DomHandler.getOuterHeight(this.$el.previousElementSibling);
-
-                this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
-            },
             getVirtualScrollerProp(option, options) {
                 options = options || this.virtualScrollerContentProps;
 
@@ -1254,12 +1238,13 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
     const _hoisted_3$4 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover"];
     const _hoisted_4$3 = ["id"];
     const _hoisted_5$2 = ["colspan"];
-    const _hoisted_6$2 = {
+    const _hoisted_6$2 = ["colspan"];
+    const _hoisted_7$1 = {
       key: 1,
       class: "p-datatable-emptymessage",
       role: "row"
     };
-    const _hoisted_7$1 = ["colspan"];
+    const _hoisted_8$1 = ["colspan"];
 
     function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DTBodyCell = vue.resolveComponent("DTBodyCell");
@@ -1383,20 +1368,24 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                       class: "p-rowgroup-footer",
                       role: "row"
                     }, [
-                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
-                        data: rowData,
-                        index: $options.getRowIndex(index)
-                      }, null, 8, ["data", "index"]))
+                      vue.createElementVNode("td", {
+                        colspan: $options.columnsLength - 1
+                      }, [
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
+                          data: rowData,
+                          index: $options.getRowIndex(index)
+                        }, null, 8, ["data", "index"]))
+                      ], 8, _hoisted_6$2)
                     ]))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
-          : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_6$2, [
+          : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$1, [
               vue.createElementVNode("td", { colspan: $options.columnsLength }, [
                 ($props.templates.empty)
                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), { key: 0 }))
                   : vue.createCommentVNode("", true)
-              ], 8, _hoisted_7$1)
+              ], 8, _hoisted_8$1)
             ]))
       ], 4))
     }
@@ -3262,10 +3251,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 type: Function,
                 default: null
             },
-            autoLayout: {
-                type: Boolean,
-                default: false
-            },
             resizableColumns: {
                 type: Boolean,
                 default: false
@@ -3334,10 +3319,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 type: Boolean,
                 default: false
             },
-            scrollDirection: {
-                type: String,
-                default: 'vertical'
-            },
             virtualScrollerOptions: {
                 type: Object,
                 default: null
@@ -3352,7 +3333,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             },
             responsiveLayout: {
                 type: String,
-                default: 'stack'
+                default: 'scroll'
             },
             breakpoint: {
                 type: String,
@@ -3978,7 +3959,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
 
                     if (firstSelectedRow) {
                         firstSelectedRow.tabIndex = '0';
-                        focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
+                        focusedItem && focusedItem !== firstSelectedRow && (focusedItem.tabIndex = '-1');
                     } else {
                         rows[0].tabIndex = '0';
                         focusedItem !== rows[0] && (rows[rowIndex].tabIndex = '-1');
@@ -4229,7 +4210,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
 
                     if (i === 0) csv += '\n';
 
-                    if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
+                    if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'exportFooter')) {
                         if (footerInitiated) csv += this.csvSeparator;
                         else footerInitiated = true;
 
@@ -4323,15 +4304,16 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 this.createStyleElement();
 
                 let innerHTML = '';
+                let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
                 widths.forEach((width, index) => {
                     let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-                    let style = this.scrollable ? `flex: 1 1 ${colWidth}px !important` : `width: ${colWidth}px !important`;
+                    let style = `width: ${colWidth}px !important; max-width: ${colWidth}px !important`;
 
                     innerHTML += `
-                    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                    .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                    ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                    ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                    ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                         ${style}
                     }
                 `;
@@ -4546,7 +4528,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     let dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1;
                     let processedData = [...this.processedData];
 
-                    utils.ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex);
+                    utils.ObjectUtils.reorderArray(processedData, this.draggedRowIndex + this.d_first, dropIndex + this.d_first);
 
                     this.$emit('row-reorder', {
                         originalEvent: event,
@@ -4763,14 +4745,15 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                         this.createStyleElement();
 
                         let innerHTML = '';
+                        let selector = `.p-datatable[${this.attributeSelector}] > .p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
                         widths.forEach((width, index) => {
-                            let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
+                            let style = `width: ${width}px !important; max-width: ${width}px !important`;
 
                             innerHTML += `
-                            .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
-                            .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
-                            .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
+                            ${selector} > .p-datatable-thead > tr > th:nth-child(${index + 1}),
+                            ${selector} > .p-datatable-tbody > tr > td:nth-child(${index + 1}),
+                            ${selector} > .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
                                 ${style}
                             }
                         `;
@@ -4895,31 +4878,34 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     this.responsiveStyleElement.type = 'text/css';
                     document.head.appendChild(this.responsiveStyleElement);
 
+                    let tableSelector = `.p-datatable-wrapper ${this.virtualScrollerDisabled ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+                    let selector = `.p-datatable[${this.attributeSelector}] > ${tableSelector}`;
+                    let gridLinesSelector = `.p-datatable[${this.attributeSelector}].p-datatable-gridlines > ${tableSelector}`;
                     let innerHTML = `
 @media screen and (max-width: ${this.breakpoint}) {
-    .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th,
-    .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td {
+    ${selector} > .p-datatable-thead > tr > th,
+    ${selector} > .p-datatable-tfoot > tr > td {
         display: none !important;
     }
 
-    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td {
+    ${selector} > .p-datatable-tbody > tr > td {
         display: flex;
         width: 100% !important;
         align-items: center;
         justify-content: space-between;
     }
 
-    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:not(:last-child) {
+    ${selector} > .p-datatable-tbody > tr > td:not(:last-child) {
         border: 0 none;
     }
 
-    .p-datatable[${this.attributeSelector}].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {
+    ${gridLinesSelector} > .p-datatable-tbody > tr > td:last-child {
         border-top: 0;
         border-right: 0;
         border-left: 0;
     }
 
-    .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td > .p-column-title {
+    ${selector} > .p-datatable-tbody > tr > td > .p-column-title {
         display: block;
     }
 }
@@ -4970,6 +4956,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
             },
             getVirtualScrollerRef() {
                 return this.$refs.virtualScroller;
+            },
+            hasSpacerStyle(style) {
+                return utils.ObjectUtils.isNotEmpty(style);
             }
         },
         computed: {
@@ -4978,13 +4967,9 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     'p-datatable p-component',
                     {
                         'p-datatable-hoverable-rows': this.rowHover || this.selectionMode,
-                        'p-datatable-auto-layout': this.autoLayout,
                         'p-datatable-resizable': this.resizableColumns,
                         'p-datatable-resizable-fit': this.resizableColumns && this.columnResizeMode === 'fit',
                         'p-datatable-scrollable': this.scrollable,
-                        'p-datatable-scrollable-vertical': this.scrollable && this.scrollDirection === 'vertical',
-                        'p-datatable-scrollable-horizontal': this.scrollable && this.scrollDirection === 'horizontal',
-                        'p-datatable-scrollable-both': this.scrollable && this.scrollDirection === 'both',
                         'p-datatable-flex-scrollable': this.scrollable && this.scrollHeight === 'flex',
                         'p-datatable-responsive-stack': this.responsiveLayout === 'stack',
                         'p-datatable-responsive-scroll': this.responsiveLayout === 'scroll',
@@ -4995,6 +4980,17 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                     }
                 ];
             },
+            tableStyleClass() {
+                return [
+                    'p-datatable-table',
+                    {
+                        'p-datatable-scrollable-table': this.scrollable,
+                        'p-datatable-resizable-table': this.resizableColumns,
+                        'p-datatable-resizable-table-fit': this.resizableColumns && this.columnResizeMode === 'fit'
+                    },
+                    this.tableClass
+                ];
+            },
             columns() {
                 let children = this.getChildren();
 
@@ -5130,7 +5126,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
       class: "p-datatable-header"
     };
     const _hoisted_3 = {
-      key: 4,
+      key: 3,
       class: "p-datatable-footer"
     };
     const _hoisted_4 = {
@@ -5219,16 +5215,19 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
           vue.createVNode(_component_DTVirtualScroller, vue.mergeProps({ ref: "virtualScroller" }, $props.virtualScrollerOptions, {
             items: $options.processedData,
             columns: $options.columns,
-            style: { height: $props.scrollHeight },
+            style: { height: $props.scrollHeight !== 'flex' ? $props.scrollHeight : undefined },
+            scrollHeight: $props.scrollHeight !== 'flex' ? undefined : '100%',
             disabled: $options.virtualScrollerDisabled,
             loaderDisabled: "",
+            inline: "",
+            autoSize: "",
             showSpacer: false
           }), {
             content: vue.withCtx((slotProps) => [
               vue.createElementVNode("table", vue.mergeProps({
                 ref: "table",
                 role: "table",
-                class: [$props.tableClass, 'p-datatable-table'],
+                class: $options.tableStyleClass,
                 style: [$props.tableStyle, slotProps.spacerStyle]
               }, $props.tableProps), [
                 vue.createVNode(_component_DTTableHeader, {
@@ -5372,6 +5371,13 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                   editingMeta: $data.d_editingMeta,
                   onEditingMetaChange: $options.onEditingMetaChange
                 }, null, 8, ["value", "class", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
+                ($options.hasSpacerStyle(slotProps.spacerStyle))
+                  ? (vue.openBlock(), vue.createElementBlock("tbody", {
+                      key: 1,
+                      style: vue.normalizeStyle({ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }),
+                      class: "p-datatable-virtualscroller-spacer"
+                    }, null, 4))
+                  : vue.createCommentVNode("", true),
                 vue.createVNode(_component_DTTableFooter, {
                   columnGroup: $options.footerColumnGroup,
                   columns: slotProps.columns
@@ -5379,11 +5385,16 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
               ], 16)
             ]),
             _: 1
-          }, 16, ["items", "columns", "style", "disabled"])
+          }, 16, ["items", "columns", "style", "scrollHeight", "disabled"])
         ], 4),
+        (_ctx.$slots.footer)
+          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+              vue.renderSlot(_ctx.$slots, "footer")
+            ]))
+          : vue.createCommentVNode("", true),
         ($options.paginatorBottom)
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
-              key: 3,
+              key: 4,
               rows: $data.d_rows,
               first: $data.d_first,
               totalRecords: $options.totalRecordsLength,
@@ -5415,11 +5426,6 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
                 : undefined
             ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
           : vue.createCommentVNode("", true),
-        (_ctx.$slots.footer)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-              vue.renderSlot(_ctx.$slots, "footer")
-            ]))
-          : vue.createCommentVNode("", true),
         vue.createElementVNode("div", _hoisted_4, null, 512),
         ($props.reorderableColumns)
           ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, null, 512))
@@ -5457,7 +5463,7 @@ this.primevue.datatable = (function (api, Paginator, utils, VirtualScroller, Ove
       }
     }
 
-    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    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: inline-flex;\n    align-items: 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: flex;\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: flex;\n    flex: 1 1 0;\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 .p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,\n.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {\n    flex: 1 0 auto;\n}\n.p-datatable-flex-scrollable {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n.p-datatable-flex-scrollable .p-datatable-wrapper {\n    display: flex;\n    flex-direction: column;\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.p-datatable-scrollable .p-virtualscroller > .p-datatable-table {\n    display: inline-block; /* For Safari */\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:not(.p-frozen-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: 0.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: flex;\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: 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.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.p-column-filter-menu {\n    display: inline-flex;\n    margin-left: auto;\n}\n.p-column-filter-row .p-column-filter-element {\n    flex: 1 1 auto;\n    width: 1%;\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.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    justify-content: center;\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.p-column-filter-buttonbar {\n    display: flex;\n    align-items: center;\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\n/* VirtualScroller */\n.p-datatable .p-virtualscroller-loading {\n    transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    left: 0;\n}\n";
+    var css_248z = "\n.p-datatable {\n    position: relative;\n}\n.p-datatable > .p-datatable-wrapper {\n    overflow: auto;\n}\n.p-datatable-table {\n    border-spacing: 0px;\n    width: 100%;\n}\n.p-datatable .p-sortable-column {\n    cursor: pointer;\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: inline-flex;\n    align-items: center;\n    justify-content: center;\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}\n.p-datatable-scrollable-table > .p-datatable-thead {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n}\n.p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n    position: sticky;\n    z-index: 1;\n}\n.p-datatable-scrollable-table > .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-flex-scrollable {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n}\n.p-datatable-flex-scrollable > .p-datatable-wrapper {\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    height: 100%;\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.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.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.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: 0.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: flex;\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: 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.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.p-column-filter-menu {\n    display: inline-flex;\n    margin-left: auto;\n}\n.p-column-filter-row .p-column-filter-element {\n    flex: 1 1 auto;\n    width: 1%;\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.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    justify-content: center;\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.p-column-filter-buttonbar {\n    display: flex;\n    align-items: center;\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\n/* VirtualScroller */\n.p-datatable-virtualscroller-spacer {\n    display: flex;\n}\n.p-datatable .p-virtualscroller .p-virtualscroller-loading {\n    transform: none !important;\n    min-height: 0;\n    position: sticky;\n    top: 0;\n    left: 0;\n}\n";
     styleInject(css_248z);
 
     script.render = render;