primevue 3.22.4 → 3.24.0

package/datatable/datatable.esm.js

@@ -580,7 +580,7 @@ const _hoisted_5$3 = [
 ];
 const _hoisted_6$3 = ["aria-label"];
 const _hoisted_7$2 = /*#__PURE__*/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"];
@@ -711,7 +711,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                 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]
                               ])
                             : createCommentVNode("", true),
@@ -890,13 +890,6 @@ var script$7 = {
             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();
@@ -905,10 +898,6 @@ var script$7 = {
         if (this.scrollable && this.rowGroupMode === 'subheader') {
             this.updateFrozenRowGroupHeaderStickyPosition();
         }
-
-        if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical')) {
-            this.updateVirtualScrollerPosition();
-        }
     },
     updated() {
         if (this.frozenRow) {
@@ -1190,11 +1179,6 @@ var script$7 = {
 
             this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
         },
-        updateVirtualScrollerPosition() {
-            const tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
-
-            this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
-        },
         getVirtualScrollerProp(option, options) {
             options = options || this.virtualScrollerContentProps;
 
@@ -1251,12 +1235,13 @@ const _hoisted_2$6 = ["onClick"];
 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 = resolveComponent("DTBodyCell");
@@ -1380,20 +1365,24 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   class: "p-rowgroup-footer",
                   role: "row"
                 }, [
-                  (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
-                    data: rowData,
-                    index: $options.getRowIndex(index)
-                  }, null, 8, ["data", "index"]))
+                  createElementVNode("td", {
+                    colspan: $options.columnsLength - 1
+                  }, [
+                    (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
+                      data: rowData,
+                      index: $options.getRowIndex(index)
+                    }, null, 8, ["data", "index"]))
+                  ], 8, _hoisted_6$2)
                 ]))
               : createCommentVNode("", true)
           ], 64))
         }), 128))
-      : (openBlock(), createElementBlock("tr", _hoisted_6$2, [
+      : (openBlock(), createElementBlock("tr", _hoisted_7$1, [
           createElementVNode("td", { colspan: $options.columnsLength }, [
             ($props.templates.empty)
               ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), { key: 0 }))
               : createCommentVNode("", true)
-          ], 8, _hoisted_7$1)
+          ], 8, _hoisted_8$1)
         ]))
   ], 4))
 }
@@ -3259,10 +3248,6 @@ var script = {
             type: Function,
             default: null
         },
-        autoLayout: {
-            type: Boolean,
-            default: false
-        },
         resizableColumns: {
             type: Boolean,
             default: false
@@ -3331,10 +3316,6 @@ var script = {
             type: Boolean,
             default: false
         },
-        scrollDirection: {
-            type: String,
-            default: 'vertical'
-        },
         virtualScrollerOptions: {
             type: Object,
             default: null
@@ -3349,7 +3330,7 @@ var script = {
         },
         responsiveLayout: {
             type: String,
-            default: 'stack'
+            default: 'scroll'
         },
         breakpoint: {
             type: String,
@@ -3975,7 +3956,7 @@ var script = {
 
                 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');
@@ -4226,7 +4207,7 @@ var script = {
 
                 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;
 
@@ -4320,15 +4301,16 @@ var script = {
             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}
                     }
                 `;
@@ -4543,7 +4525,7 @@ var script = {
                 let dropIndex = this.draggedRowIndex > this.droppedRowIndex ? this.droppedRowIndex : this.droppedRowIndex === 0 ? 0 : this.droppedRowIndex - 1;
                 let processedData = [...this.processedData];
 
-                ObjectUtils.reorderArray(processedData, this.draggedRowIndex, dropIndex);
+                ObjectUtils.reorderArray(processedData, this.draggedRowIndex + this.d_first, dropIndex + this.d_first);
 
                 this.$emit('row-reorder', {
                     originalEvent: event,
@@ -4760,14 +4742,15 @@ var script = {
                     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}
                             }
                         `;
@@ -4892,31 +4875,34 @@ var script = {
                 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;
     }
 }
@@ -4967,6 +4953,9 @@ var script = {
         },
         getVirtualScrollerRef() {
             return this.$refs.virtualScroller;
+        },
+        hasSpacerStyle(style) {
+            return ObjectUtils.isNotEmpty(style);
         }
     },
     computed: {
@@ -4975,13 +4964,9 @@ var script = {
                 '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',
@@ -4992,6 +4977,17 @@ var script = {
                 }
             ];
         },
+        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();
 
@@ -5127,7 +5123,7 @@ const _hoisted_2 = {
   class: "p-datatable-header"
 };
 const _hoisted_3 = {
-  key: 4,
+  key: 3,
   class: "p-datatable-footer"
 };
 const _hoisted_4 = {
@@ -5216,16 +5212,19 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_DTVirtualScroller, 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: withCtx((slotProps) => [
           createElementVNode("table", mergeProps({
             ref: "table",
             role: "table",
-            class: [$props.tableClass, 'p-datatable-table'],
+            class: $options.tableStyleClass,
             style: [$props.tableStyle, slotProps.spacerStyle]
           }, $props.tableProps), [
             createVNode(_component_DTTableHeader, {
@@ -5369,6 +5368,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               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))
+              ? (openBlock(), createElementBlock("tbody", {
+                  key: 1,
+                  style: normalizeStyle({ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }),
+                  class: "p-datatable-virtualscroller-spacer"
+                }, null, 4))
+              : createCommentVNode("", true),
             createVNode(_component_DTTableFooter, {
               columnGroup: $options.footerColumnGroup,
               columns: slotProps.columns
@@ -5376,11 +5382,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           ], 16)
         ]),
         _: 1
-      }, 16, ["items", "columns", "style", "disabled"])
+      }, 16, ["items", "columns", "style", "scrollHeight", "disabled"])
     ], 4),
+    (_ctx.$slots.footer)
+      ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "footer")
+        ]))
+      : createCommentVNode("", true),
     ($options.paginatorBottom)
       ? (openBlock(), createBlock(_component_DTPaginator, {
-          key: 3,
+          key: 4,
           rows: $data.d_rows,
           first: $data.d_first,
           totalRecords: $options.totalRecordsLength,
@@ -5412,11 +5423,6 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
-    (_ctx.$slots.footer)
-      ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          renderSlot(_ctx.$slots, "footer")
-        ]))
-      : createCommentVNode("", true),
     createElementVNode("div", _hoisted_4, null, 512),
     ($props.reorderableColumns)
       ? (openBlock(), createElementBlock("span", _hoisted_5, null, 512))
@@ -5454,7 +5460,7 @@ function styleInject(css, ref) {
   }
 }
 
-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;