primevue 3.8.2 → 3.11.0

package/datatable/datatable.js

@@ -1,10 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus, Dropdown, Button, Ripple) {
+this.primevue.datatable = (function (utils, api, Paginator, VirtualScroller, vue, OverlayEventBus, Dropdown, Button, Ripple) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var Paginator__default = /*#__PURE__*/_interopDefaultLegacy(Paginator);
+    var VirtualScroller__default = /*#__PURE__*/_interopDefaultLegacy(VirtualScroller);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
@@ -26,7 +27,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             onClick(event) {
                 if (!this.$attrs.disabled) {
                     this.focused = true;
-                    this.$emit('change', event);
+                    this.$emit('change', {
+                        originalEvent: event,
+                        checked: !this.checked
+                    });
                 }
             },
             onFocus() {
@@ -40,7 +44,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
     function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createBlock("div", {
-        class: "p-checkbox p-component",
+        class: ['p-checkbox p-component', {'p-checkbox-focused': $data.focused}],
         onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args))),
         onKeydown: _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
       }, [
@@ -57,7 +61,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
           }, null, 2)
         ], 42, ["aria-checked", "tabindex"])
-      ], 32))
+      ], 34))
     }
 
     script$a.render = render$a;
@@ -148,7 +152,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         overlayEventListener: null,
         beforeUnmount() {
             if (this.overlayEventListener) {
-                OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             }
 
@@ -348,7 +352,15 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             hide() {
                 this.overlayVisible = false;
             },
-            onContentClick() {
+            onContentClick(event) {
+                this.selfClick = true;
+
+                OverlayEventBus__default["default"].emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.overlay
+                });
+            },
+            onContentMouseDown() {
                 this.selfClick = true;
             },
             onOverlayEnter(el) {
@@ -362,11 +374,11 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.bindResizeListener();
 
                 this.overlayEventListener = (e) => {
-                    if (this.overlay.contains(e.target)) {
+                    if (!this.isOutsideClicked(e.target)) {
                         this.selfClick = true;
                     }
                 };
-                OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
             },
             onOverlayLeave() {
                 this.onOverlayHide();
@@ -379,19 +391,22 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.unbindResizeListener();
                 this.unbindScrollListener();
                 this.overlay = null;
-                OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             },
             overlayRef(el) {
                 this.overlay = el;
             },
-            isTargetClicked(event) {
-                return this.$refs.icon && (this.$refs.icon === event.target || this.$refs.icon.contains(event.target));
+            isOutsideClicked(target) {
+                return !this.isTargetClicked(target) && this.overlay && !(this.overlay.isSameNode(target) || this.overlay.contains(target));
+            },
+            isTargetClicked(target) {
+                return this.$refs.icon && (this.$refs.icon.isSameNode(target) || this.$refs.icon.contains(target));
             },
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
+                        if (this.overlayVisible && !this.selfClick && this.isOutsideClicked(event.target)) {
                             this.overlayVisible = false;
                         }
                         this.selfClick = false;
@@ -504,8 +519,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             }
         },
         components: {
-            'CFDropdown': Dropdown__default['default'],
-            'CFButton': Button__default['default']
+            'CFDropdown': Dropdown__default["default"],
+            'CFButton': Button__default["default"]
         }
     };
 
@@ -513,7 +528,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       key: 0,
       class: "p-fluid p-column-filter-element"
     };
-    const _hoisted_2$6 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
+    const _hoisted_2$5 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
     const _hoisted_3$4 = /*#__PURE__*/vue.createVNode("span", { class: "pi pi-filter-slash" }, null, -1);
     const _hoisted_4$2 = {
       key: 0,
@@ -556,7 +571,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onClick: _cache[1] || (_cache[1] = $event => ($options.toggleMenu())),
               onKeydown: _cache[2] || (_cache[2] = $event => ($options.onToggleButtonKeyDown($event)))
             }, [
-              _hoisted_2$6
+              _hoisted_2$5
             ], 42, ["aria-expanded"]))
           : vue.createCommentVNode("", true),
         ($props.showClearButton && $props.display === 'row')
@@ -583,7 +598,8 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     ref: $options.overlayRef,
                     class: $options.overlayClass,
                     onKeydown: _cache[12] || (_cache[12] = vue.withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
-                    onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args)))
+                    onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                    onMousedown: _cache[14] || (_cache[14] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
                   }, [
                     (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterHeaderTemplate), {
                       field: $props.field,
@@ -945,7 +961,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
     };
 
     const _hoisted_1$6 = { class: "p-column-header-content" };
-    const _hoisted_2$5 = {
+    const _hoisted_2$4 = {
       key: 1,
       class: "p-column-title"
     };
@@ -989,7 +1005,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               }, null, 8, ["column"]))
             : vue.createCommentVNode("", true),
           ($options.columnProp('header'))
-            ? (vue.openBlock(), vue.createBlock("span", _hoisted_2$5, vue.toDisplayString($options.columnProp('header')), 1))
+            ? (vue.openBlock(), vue.createBlock("span", _hoisted_2$4, vue.toDisplayString($options.columnProp('header')), 1))
             : vue.createCommentVNode("", true),
           ($options.columnProp('sortable'))
             ? (vue.openBlock(), vue.createBlock("span", {
@@ -1124,6 +1140,20 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             },
             getFilterColumnHeaderStyle(column) {
                 return [this.columnProp(column, 'filterHeaderStyle'), this.columnProp(column, 'style')];
+            },
+            getHeaderColumns(row){
+                let cols = [];
+
+                if (row.children && row.children.default) {
+                    row.children.default().forEach(child => {
+                        if (child.children && child.children instanceof Array)
+                            cols = [...cols, ...child.children];
+                        else if (child.type.name === 'Column')
+                            cols.push(child);
+                    });
+
+                    return cols;
+                }
             }
         },
         components: {
@@ -1137,7 +1167,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       class: "p-datatable-thead",
       role: "rowgroup"
     };
-    const _hoisted_2$4 = { role: "row" };
+    const _hoisted_2$3 = { role: "row" };
     const _hoisted_3$2 = {
       key: 0,
       role: "row"
@@ -1151,7 +1181,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       return (vue.openBlock(), vue.createBlock("thead", _hoisted_1$5, [
         (!$props.columnGroup)
           ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 0 }, [
-              vue.createVNode("tr", _hoisted_2$4, [
+              vue.createVNode("tr", _hoisted_2$3, [
                 (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
                   return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
@@ -1256,7 +1286,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 key: i,
                 role: "row"
               }, [
-                (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row.children.default(), (col, j) => {
+                (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.getHeaderColumns(row), (col, j) => {
                   return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||j
                   }, [
@@ -1333,7 +1363,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
     function render$6(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createBlock("div", {
-        class: "p-radiobutton p-component",
+        class: ['p-radiobutton p-component', {'p-radiobutton-focused': $data.focused}],
         onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
         tabindex: "0",
         onFocus: _cache[2] || (_cache[2] = $event => ($options.onFocus($event))),
@@ -1348,7 +1378,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         }, [
           _hoisted_1$4
         ], 10, ["aria-checked"])
-      ], 32))
+      ], 34))
     }
 
     script$6.render = render$6;
@@ -1387,7 +1417,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
     function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       return (vue.openBlock(), vue.createBlock("div", {
-        class: "p-checkbox p-component",
+        class: ['p-checkbox p-component', {'p-checkbox-focused': $data.focused}],
         onClick: _cache[4] || (_cache[4] = (...args) => ($options.onClick && $options.onClick(...args)))
       }, [
         vue.createVNode("div", {
@@ -1404,7 +1434,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
           }, null, 2)
         ], 42, ["aria-checked", "tabindex"])
-      ]))
+      ], 2))
     }
 
     script$5.render = render$5;
@@ -1457,6 +1487,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             responsiveLayout: {
                 type: String,
                 default: 'stack'
+            },
+            virtualScrollerContentProps: {
+                type: Object,
+                default: null
             }
         },
         documentEditListener: null,
@@ -1493,7 +1527,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         },
         beforeUnmount() {
             if (this.overlayEventListener) {
-                OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             }
         },
@@ -1541,7 +1575,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             switchCellToViewMode() {
                 this.d_editing = false;
                 this.unbindDocumentEditListener();
-                OverlayEventBus__default['default'].off('overlay-click', this.overlayEventListener);
+                OverlayEventBus__default["default"].off('overlay-click', this.overlayEventListener);
                 this.overlayEventListener = null;
             },
             onClick(event) {
@@ -1558,7 +1592,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                                 this.selfClick = true;
                             }
                         };
-                        OverlayEventBus__default['default'].on('overlay-click', this.overlayEventListener);
+                        OverlayEventBus__default["default"].on('overlay-click', this.overlayEventListener);
                     }
                 }
             },
@@ -1710,6 +1744,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                         this.styleObject.left = left + 'px';
                     }
                 }
+            },
+            getVirtualScrollerProp(option) {
+                return this.virtualScrollerContentProps ? this.virtualScrollerContentProps[option] : null;
             }
         },
         computed: {
@@ -1732,6 +1769,21 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 let columnStyle = this.columnProp('style');
 
                 return this.columnProp('frozen') ? [columnStyle, bodyStyle, this.styleObject]: [columnStyle, bodyStyle];
+            },
+            loading() {
+                return this.getVirtualScrollerProp('loading');
+            },
+            loadingOptions() {
+                const getLoaderOptions = this.getVirtualScrollerProp('getLoaderOptions');
+                return getLoaderOptions && getLoaderOptions(this.rowIndex, {
+                    cellIndex: this.index,
+                    cellFirst: this.index === 0,
+                    cellLast: this.index === (this.getVirtualScrollerProp('columns').length - 1),
+                    cellEven: this.index % 2 === 0,
+                    cellOdd: this.index % 2 !== 0,
+                    column: this.column,
+                    field: this.field
+                });
             }
         },
         components: {
@@ -1739,7 +1791,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             'DTCheckbox': script$5
         },
         directives: {
-            'ripple': Ripple__default['default']
+            'ripple': Ripple__default["default"]
         }
     };
 
@@ -1747,7 +1799,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       key: 0,
       class: "p-column-title"
     };
-    const _hoisted_2$3 = /*#__PURE__*/vue.createVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
+    const _hoisted_2$2 = /*#__PURE__*/vue.createVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
     const _hoisted_3$1 = /*#__PURE__*/vue.createVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
     const _hoisted_4$1 = /*#__PURE__*/vue.createVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
 
@@ -1756,111 +1808,136 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       const _component_DTCheckbox = vue.resolveComponent("DTCheckbox");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createBlock("td", {
-        style: $options.containerStyle,
-        class: $options.containerClass,
-        onClick: _cache[5] || (_cache[5] = (...args) => ($options.onClick && $options.onClick(...args))),
-        onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
-        role: "cell"
-      }, [
-        ($props.responsiveLayout === 'stack')
-          ? (vue.openBlock(), vue.createBlock("span", _hoisted_1$3, vue.toDisplayString($options.columnProp('header')), 1))
-          : vue.createCommentVNode("", true),
-        ($props.column.children && $props.column.children.body && !$data.d_editing)
-          ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
-              key: 1,
+      return ($options.loading)
+        ? (vue.openBlock(), vue.createBlock("td", {
+            key: 0,
+            style: $options.containerStyle,
+            class: $options.containerClass
+          }, [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
               data: $props.rowData,
               column: $props.column,
               field: $options.field,
               index: $props.rowIndex,
-              frozenRow: $props.frozenRow
-            }, 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: $options.editingRowData,
-                column: $props.column,
-                field: $options.field,
-                index: $props.rowIndex,
-                frozenRow: $props.frozenRow
-              }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
-            : ($options.columnProp('selectionMode'))
-              ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 3 }, [
-                  ($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"]))
-                    : ($options.columnProp('selectionMode') ==='multiple')
-                      ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
-                          key: 1,
-                          value: $props.rowData,
-                          checked: $props.selected,
-                          onChange: $options.toggleRowWithCheckbox
-                        }, null, 8, ["value", "checked", "onChange"]))
-                      : vue.createCommentVNode("", true)
-                ], 64))
-              : ($options.columnProp('rowReorder'))
-                ? (vue.openBlock(), vue.createBlock("i", {
-                    key: 4,
-                    class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
-                  }, null, 2))
-                : ($options.columnProp('expander'))
-                  ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                      key: 5,
-                      class: "p-row-toggler p-link",
-                      onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
-                      type: "button"
-                    }, [
-                      vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
-                    ], 512)), [
-                      [_directive_ripple]
-                    ])
-                  : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
-                    ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 6 }, [
-                        (!$data.d_editing)
-                          ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+              frozenRow: $props.frozenRow,
+              loadingOptions: $options.loadingOptions
+            }, null, 8, ["data", "column", "field", "index", "frozenRow", "loadingOptions"]))
+          ], 6))
+        : (vue.openBlock(), vue.createBlock("td", {
+            key: 1,
+            style: $options.containerStyle,
+            class: $options.containerClass,
+            onClick: _cache[5] || (_cache[5] = (...args) => ($options.onClick && $options.onClick(...args))),
+            onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+            role: "cell"
+          }, [
+            ($props.responsiveLayout === 'stack')
+              ? (vue.openBlock(), vue.createBlock("span", _hoisted_1$3, vue.toDisplayString($options.columnProp('header')), 1))
+              : vue.createCommentVNode("", true),
+            ($props.column.children && $props.column.children.body && !$data.d_editing)
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
+                  key: 1,
+                  data: $props.rowData,
+                  column: $props.column,
+                  field: $options.field,
+                  index: $props.rowIndex,
+                  frozenRow: $props.frozenRow
+                }, 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: $options.editingRowData,
+                    column: $props.column,
+                    field: $options.field,
+                    index: $props.rowIndex,
+                    frozenRow: $props.frozenRow
+                  }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+                : ($props.column.children && $props.column.children.body && !$props.column.children.editor && $data.d_editing)
+                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
+                      key: 3,
+                      data: $options.editingRowData,
+                      column: $props.column,
+                      field: $options.field,
+                      index: $props.rowIndex,
+                      frozenRow: $props.frozenRow
+                    }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
+                  : ($options.columnProp('selectionMode'))
+                    ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 4 }, [
+                        ($options.columnProp('selectionMode') === 'single')
+                          ? (vue.openBlock(), vue.createBlock(_component_DTRadioButton, {
                               key: 0,
-                              class: "p-row-editor-init p-link",
-                              onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
-                              type: "button"
-                            }, [
-                              _hoisted_2$3
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true),
-                        ($data.d_editing)
-                          ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                              key: 1,
-                              class: "p-row-editor-save p-link",
-                              onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
-                              type: "button"
-                            }, [
-                              _hoisted_3$1
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true),
-                        ($data.d_editing)
-                          ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
-                              key: 2,
-                              class: "p-row-editor-cancel p-link",
-                              onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
-                              type: "button"
-                            }, [
-                              _hoisted_4$1
-                            ], 512)), [
-                              [_directive_ripple]
-                            ])
-                          : vue.createCommentVNode("", true)
-                      ], 64))
-                    : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 7 }, [
-                        vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
+                              value: $props.rowData,
+                              checked: $props.selected,
+                              onChange: $options.toggleRowWithRadio
+                            }, null, 8, ["value", "checked", "onChange"]))
+                          : ($options.columnProp('selectionMode') ==='multiple')
+                            ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
+                                key: 1,
+                                value: $props.rowData,
+                                checked: $props.selected,
+                                onChange: $options.toggleRowWithCheckbox
+                              }, null, 8, ["value", "checked", "onChange"]))
+                            : vue.createCommentVNode("", true)
                       ], 64))
-      ], 38))
+                    : ($options.columnProp('rowReorder'))
+                      ? (vue.openBlock(), vue.createBlock("i", {
+                          key: 5,
+                          class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
+                        }, null, 2))
+                      : ($options.columnProp('expander'))
+                        ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                            key: 6,
+                            class: "p-row-toggler p-link",
+                            onClick: _cache[1] || (_cache[1] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
+                            type: "button"
+                          }, [
+                            vue.createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
+                          ], 512)), [
+                            [_directive_ripple]
+                          ])
+                        : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
+                          ? (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 7 }, [
+                              (!$data.d_editing)
+                                ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                                    key: 0,
+                                    class: "p-row-editor-init p-link",
+                                    onClick: _cache[2] || (_cache[2] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
+                                    type: "button"
+                                  }, [
+                                    _hoisted_2$2
+                                  ], 512)), [
+                                    [_directive_ripple]
+                                  ])
+                                : vue.createCommentVNode("", true),
+                              ($data.d_editing)
+                                ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                                    key: 1,
+                                    class: "p-row-editor-save p-link",
+                                    onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
+                                    type: "button"
+                                  }, [
+                                    _hoisted_3$1
+                                  ], 512)), [
+                                    [_directive_ripple]
+                                  ])
+                                : vue.createCommentVNode("", true),
+                              ($data.d_editing)
+                                ? vue.withDirectives((vue.openBlock(), vue.createBlock("button", {
+                                    key: 2,
+                                    class: "p-row-editor-cancel p-link",
+                                    onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
+                                    type: "button"
+                                  }, [
+                                    _hoisted_4$1
+                                  ], 512)), [
+                                    [_directive_ripple]
+                                  ])
+                                : vue.createCommentVNode("", true)
+                            ], 64))
+                          : (vue.openBlock(), vue.createBlock(vue.Fragment, { key: 8 }, [
+                              vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
+                            ], 64))
+          ], 38))
     }
 
     script$4.render = render$4;
@@ -1948,6 +2025,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            rowStyle: {
+                type: null,
+                default: null
+            },
             editMode: {
                 type: String,
                 default: null
@@ -1983,6 +2064,21 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             responsiveLayout: {
                 type: String,
                 default: 'stack'
+            },
+            virtualScrollerContentProps: {
+                type: Object,
+                default: null
+            },
+            isVirtualScrollerDisabled: {
+                type: Boolean,
+                default: false
+            }
+        },
+        watch: {
+            virtualScrollerContentProps(newValue, oldValue) {
+                if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
+                    this.updateVirtualScrollerPosition();
+                }
             }
         },
         mounted() {
@@ -1993,6 +2089,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             if (this.scrollable && this.rowGroupMode === 'subheader') {
                 this.updateFrozenRowGroupHeaderStickyPosition();
             }
+
+            if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical')) {
+                this.updateVirtualScrollerPosition();
+            }
         },
         updated() {
             if (this.frozenRow) {
@@ -2026,6 +2126,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             getRowKey(rowData, index) {
                 return this.dataKey ? utils.ObjectUtils.resolveFieldData(rowData, this.dataKey): index;
             },
+            getRowIndex(index) {
+                const getItemOptions = this.getVirtualScrollerProp('getItemOptions');
+                return getItemOptions ? getItemOptions(index).index : index;
+            },
             getRowClass(rowData) {
                 let rowStyleClass = [];
                 if (this.selectionMode) {
@@ -2278,6 +2382,19 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
             updateFrozenRowGroupHeaderStickyPosition() {
                 let tableHeaderHeight = utils.DomHandler.getOuterHeight(this.$el.previousElementSibling);
                 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;
+                return options ? options[option] : null;
+            },
+            bodyRef(el) {
+                // For VirtualScroller
+                const contentRef = this.getVirtualScrollerProp('contentRef');
+                contentRef && contentRef(el);
             }
         },
         computed: {
@@ -2290,6 +2407,9 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 }
 
                 return null;
+            },
+            bodyStyle() {
+                return this.getVirtualScrollerProp('contentStyle');
             }
         },
         components: {
@@ -2298,10 +2418,6 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
     };
 
     const _hoisted_1$2 = {
-      class: "p-datatable-tbody",
-      role: "rowgroup"
-    };
-    const _hoisted_2$2 = {
       key: 1,
       class: "p-datatable-emptymessage",
       role: "row"
@@ -2310,13 +2426,18 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DTBodyCell = vue.resolveComponent("DTBodyCell");
 
-      return (vue.openBlock(), vue.createBlock("tbody", _hoisted_1$2, [
+      return (vue.openBlock(), vue.createBlock("tbody", {
+        ref: $options.bodyRef,
+        class: "p-datatable-tbody",
+        role: "rowgroup",
+        style: $options.bodyStyle
+      }, [
         (!$props.empty)
           ? (vue.openBlock(true), vue.createBlock(vue.Fragment, { key: 0 }, vue.renderList($props.value, (rowData, index) => {
               return (vue.openBlock(), vue.createBlock(vue.Fragment, {
-                key: $options.getRowKey(rowData, index) + '_subheader'
+                key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader'
               }, [
-                ($props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, index))
+                ($props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)))
                   ? (vue.openBlock(), vue.createBlock("tr", {
                       key: 0,
                       class: "p-rowgroup-header",
@@ -2340,7 +2461,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                           : vue.createCommentVNode("", true),
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
                           data: rowData,
-                          index: index
+                          index: $options.getRowIndex(index)
                         }, null, 8, ["data", "index"]))
                       ], 8, ["colspan"])
                     ], 4))
@@ -2348,16 +2469,17 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData): true)
                   ? (vue.openBlock(), vue.createBlock("tr", {
                       class: $options.getRowClass(rowData),
-                      key: $options.getRowKey(rowData, index),
-                      onClick: $event => ($options.onRowClick($event, rowData, index)),
-                      onDblclick: $event => ($options.onRowDblClick($event, rowData, index)),
-                      onContextmenu: $event => ($options.onRowRightClick($event, rowData, index)),
+                      style: $props.rowStyle,
+                      key: $options.getRowKey(rowData, $options.getRowIndex(index)),
+                      onClick: $event => ($options.onRowClick($event, rowData, $options.getRowIndex(index))),
+                      onDblclick: $event => ($options.onRowDblClick($event, rowData, $options.getRowIndex(index))),
+                      onContextmenu: $event => ($options.onRowRightClick($event, rowData, $options.getRowIndex(index))),
                       onTouchend: _cache[10] || (_cache[10] = $event => ($options.onRowTouchEnd($event))),
-                      onKeydown: $event => ($options.onRowKeyDown($event, rowData, index)),
+                      onKeydown: $event => ($options.onRowKeyDown($event, rowData, $options.getRowIndex(index))),
                       tabindex: $props.selectionMode || $props.contextMenu ? '0' : null,
                       onMousedown: _cache[11] || (_cache[11] = $event => ($options.onRowMouseDown($event))),
-                      onDragstart: $event => ($options.onRowDragStart($event, index)),
-                      onDragover: $event => ($options.onRowDragOver($event,index)),
+                      onDragstart: $event => ($options.onRowDragStart($event, $options.getRowIndex(index))),
+                      onDragover: $event => ($options.onRowDragOver($event, $options.getRowIndex(index))),
                       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))),
@@ -2367,17 +2489,17 @@ 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.shouldRenderBodyCell($props.value, col, index))
+                          ($options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)))
                             ? (vue.openBlock(), vue.createBlock(_component_DTBodyCell, {
                                 key: 0,
                                 rowData: rowData,
                                 column: col,
-                                rowIndex: index,
+                                rowIndex: $options.getRowIndex(index),
                                 index: i,
                                 selected: $options.isSelected(rowData),
                                 rowTogglerIcon: $options.columnProp(col,'expander') ? $options.rowTogglerIcon(rowData): null,
                                 frozenRow: $props.frozenRow,
-                                rowspan: $props.rowGroupMode === 'rowspan' ? $options.calculateRowGroupSize($props.value, col, index) : null,
+                                rowspan: $props.rowGroupMode === 'rowspan' ? $options.calculateRowGroupSize($props.value, col, $options.getRowIndex(index)) : null,
                                 editMode: $props.editMode,
                                 editing: $props.editMode === 'row' && $options.isRowEditing(rowData),
                                 responsiveLayout: $props.responsiveLayout,
@@ -2391,42 +2513,43 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                                 onRowEditSave: _cache[8] || (_cache[8] = $event => ($options.onRowEditSave($event))),
                                 onRowEditCancel: _cache[9] || (_cache[9] = $event => ($options.onRowEditCancel($event))),
                                 editingMeta: $props.editingMeta,
-                                onEditingMetaChange: $options.onEditingMetaChange
-                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout", "editingMeta", "onEditingMetaChange"]))
+                                onEditingMetaChange: $options.onEditingMetaChange,
+                                virtualScrollerContentProps: $props.virtualScrollerContentProps
+                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "rowTogglerIcon", "frozenRow", "rowspan", "editMode", "editing", "responsiveLayout", "editingMeta", "onEditingMetaChange", "virtualScrollerContentProps"]))
                             : vue.createCommentVNode("", true)
                         ], 64))
                       }), 128))
-                    ], 42, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
+                    ], 46, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
                   : vue.createCommentVNode("", true),
                 ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
                   ? (vue.openBlock(), vue.createBlock("tr", {
                       class: "p-datatable-row-expansion",
-                      key: $options.getRowKey(rowData, index) + '_expansion',
+                      key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
                       role: "row"
                     }, [
                       vue.createVNode("td", { colspan: $options.columnsLength }, [
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['expansion']), {
                           data: rowData,
-                          index: index
+                          index: $options.getRowIndex(index)
                         }, null, 8, ["data", "index"]))
                       ], 8, ["colspan"])
                     ]))
                   : vue.createCommentVNode("", true),
-                ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, index))
+                ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
                   ? (vue.openBlock(), vue.createBlock("tr", {
                       class: "p-rowgroup-footer",
-                      key: $options.getRowKey(rowData, index) + '_subfooter',
+                      key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subfooter',
                       role: "row"
                     }, [
                       (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
                         data: rowData,
-                        index: index
+                        index: $options.getRowIndex(index)
                       }, null, 8, ["data", "index"]))
                     ]))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 128))
-          : (vue.openBlock(), vue.createBlock("tr", _hoisted_2$2, [
+          : (vue.openBlock(), vue.createBlock("tr", _hoisted_1$2, [
               vue.createVNode("td", { colspan: $options.columnsLength }, [
                 ($props.templates.empty && !$props.loading)
                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), { key: 0 }))
@@ -2436,7 +2559,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   : vue.createCommentVNode("", true)
               ], 8, ["colspan"])
             ]))
-      ]))
+      ], 4))
     }
 
     script$3.render = render$3;
@@ -2540,6 +2663,20 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
         methods: {
             columnProp(col, prop) {
                 return utils.ObjectUtils.getVNodeProp(col, prop);
+            },
+            getFooterColumns(row){
+                let cols = [];
+
+                if (row.children && row.children.default) {
+                    row.children.default().forEach(child => {
+                        if (child.children && child.children instanceof Array)
+                            cols = [...cols, ...child.children];
+                        else if (child.type.name === 'Column')
+                            cols.push(child);
+                    });
+
+                    return cols;
+                }
             }
         },
         computed: {
@@ -2601,7 +2738,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     key: i,
                     role: "row"
                   }, [
-                    (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(row.children.default(), (col, j) => {
+                    (vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList($options.getFooterColumns(row), (col, j) => {
                       return (vue.openBlock(), vue.createBlock(vue.Fragment, {
                         key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||j
                       }, [
@@ -2624,7 +2761,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
     var script = {
         name: 'DataTable',
         emits: ['value-change', 'update:first', 'update:rows', 'page', 'update:sortField', 'update:sortOrder', 'update:multiSortMeta', 'sort', 'filter', 'row-click', 'row-dblclick',
-            'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all',
+            'update:selection', 'row-select', 'row-unselect', 'update:contextMenuSelection', 'row-contextmenu', 'row-unselect-all', 'row-select-all', 'select-all-change',
             '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'],
@@ -2753,6 +2890,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: Object,
                 default: null
             },
+            selectAll: {
+                type: Boolean,
+                default: null
+            },
             rowHover: {
                 type: Boolean,
                 default: false
@@ -2833,6 +2974,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: null,
                 default: null
             },
+            rowStyle: {
+                type: null,
+                default: null
+            },
             scrollable: {
                 type: Boolean,
                 default: false
@@ -2841,6 +2986,10 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 type: String,
                 default: "vertical"
             },
+            virtualScrollerOptions: {
+                type: Object,
+                default: null
+            },
             scrollHeight: {
                 type: String,
                 default: null
@@ -3235,7 +3384,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                 if (this.selectionMode) {
                     const rowData = e.data;
-                    const rowIndex = e.index;
+                    const rowIndex = this.d_first + e.index;
 
                     if (this.isMultipleSelectionMode() && event.shiftKey && this.anchorRowIndex != null) {
                         utils.DomHandler.clearSelection();
@@ -3413,15 +3562,24 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 }
             },
             toggleRowsWithCheckbox(event) {
-                const processedData = this.processedData;
-                const checked = this.allRowsSelected;
-                const _selection = checked ? [] : (this.frozenValue ? [...this.frozenValue, ...processedData]: processedData);
-                this.$emit('update:selection', _selection);
+                if (this.selectAll !== null) {
+                    this.$emit('select-all-change', event);
+                }
+                else {
+                    const { originalEvent, checked } = event;
+                    let _selection = [];
 
-                if (checked)
-                    this.$emit('row-unselect-all', {originalEvent: event});
-                else
-                    this.$emit('row-select-all', {originalEvent: event, data: _selection});
+                    if (checked) {
+                        _selection = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
+                        this.$emit('row-select-all', {originalEvent, data: _selection});
+                    }
+                    else {
+                        this.$emit('row-unselect-all', {originalEvent});
+                    }
+
+                    this.$emit('update:selection', _selection);
+
+                }
             },
             isSingleSelectionMode() {
                 return this.selectionMode === 'single';
@@ -3527,14 +3685,17 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                 this.$emit('update:selection', _selection);
             },
-            exportCSV(options) {
-                let data = this.processedData;
+            exportCSV(options, data) {
                 let csv = '\ufeff';
 
-                if (options && options.selectionOnly)
-                    data = this.selection || [];
-                else if (this.frozenValue)
-                    data = data ? [...this.frozenValue, ...data] : this.frozenValue;
+                if (!data) {
+                    data = this.processedData;
+
+                    if (options && options.selectionOnly)
+                        data = this.selection || [];
+                    else if (this.frozenValue)
+                        data = data ? [...this.frozenValue, ...data] : this.frozenValue;
+                }
 
                 //headers
                 let headerInitiated = false;
@@ -3585,28 +3746,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     });
                 }
 
-                let blob = new Blob([csv], {
-                    type: 'text/csv;charset=utf-8;'
-                });
-
-                if (window.navigator.msSaveOrOpenBlob) {
-                    navigator.msSaveOrOpenBlob(blob, this.exportFilename + '.csv');
-                }
-                else {
-                    let link = document.createElement("a");
-                    link.style.display = 'none';
-                    document.body.appendChild(link);
-                    if (link.download !== undefined) {
-                        link.setAttribute('href', URL.createObjectURL(blob));
-                        link.setAttribute('download', this.exportFilename + '.csv');
-                        link.click();
-                    }
-                    else {
-                        csv = 'data:text/csv;charset=utf-8,' + csv;
-                        window.open(encodeURI(csv));
-                    }
-                    document.body.removeChild(link);
-                }
+                utils.DomHandler.exportCSV(csv, this.exportFilename);
             },
             resetPage() {
                 this.d_first = 0;
@@ -3641,15 +3781,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                         let nextColumnWidth = nextColumn.offsetWidth - delta;
 
                         if (newColumnWidth > 15 && nextColumnWidth > 15) {
-                            if (!this.scrollable) {
-                                this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                                if(nextColumn) {
-                                    nextColumn.style.width = nextColumnWidth + 'px';
-                                }
-                            }
-                            else {
-                                this.resizeTableCells(newColumnWidth, nextColumnWidth);
-                            }
+                            this.resizeTableCells(newColumnWidth, nextColumnWidth);
                         }
                     }
                     else if (this.columnResizeMode === 'expand') {
@@ -3657,10 +3789,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                         this.$refs.table.style.width = tableWidth;
                         this.$refs.table.style.minWidth = tableWidth;
 
-                        if (!this.scrollable)
-                            this.resizeColumnElement.style.width = newColumnWidth + 'px';
-                        else
-                            this.resizeTableCells(newColumnWidth);
+                        this.resizeTableCells(newColumnWidth);
                     }
 
                     this.$emit('column-resize-end', {
@@ -3689,18 +3818,18 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 this.createStyleElement();
 
                 let innerHTML = '';
-                widths.forEach((width,index) => {
+                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`;
                     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;
+                    .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}) {
+                        ${style}
                     }
                 `;
                 });
+            
                 this.styleElement.innerHTML = innerHTML;
             },
             bindColumnResizeEvents() {
@@ -3730,7 +3859,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                 if (this.documentColumnResizeEndListener) {
                     document.removeEventListener('document', this.documentColumnResizeEndListener);
-                     this.documentColumnResizeEndListener = null;
+                    this.documentColumnResizeEndListener = null;
                 }
             },
             onColumnHeaderMouseDown(e) {
@@ -4123,27 +4252,23 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                         this.$el.style.width = this.tableWidthState;
                     }
 
-                    this.createStyleElement();
+                    if (utils.ObjectUtils.isNotEmpty(widths)) {
+                        this.createStyleElement();
 
-                    if (this.scrollable && widths && widths.length > 0) {
                         let innerHTML = '';
-                        widths.forEach((width,index) => {
+                        widths.forEach((width, index) => {
+                            let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
                             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;
+                            .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}) {
+                                ${style}
                             }
                         `;
                         });
 
                         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) {
@@ -4290,6 +4415,31 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                     document.head.removeChild(this.styleElement);
                     this.styleElement = null;
                 }
+            },
+            recursiveGetChildren(children, results) {
+                if (!results) {
+                    results = [];
+                }
+                if (children && children.length) {
+                    children.forEach((child) => {
+                        if (child.children instanceof Array) {
+                            results.concat(this.recursiveGetChildren(child.children, results));
+                        } else if (child.type.name == 'Column') {
+                            results.push(child);
+                        }
+                    });
+                }
+                return results;
+            },
+            dataToRender(data) {
+                const _data = data || this.processedData;
+
+                if (_data && this.paginator) {
+                    const first = this.lazy ? 0 : this.d_first;
+                    return _data.slice(first, first + this.d_rows);
+                }
+
+                return _data;
             }
         },
         computed: {
@@ -4315,19 +4465,13 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 ];
             },
             columns() {
-                let cols = [];
                 let children = this.getChildren();
 
                 if (!children) {
                     return;
                 }
 
-                children.forEach(child => {
-                    if (child.children && child.children instanceof Array)
-                        cols = [...cols, ...child.children];
-                    else if (child.type.name === 'Column')
-                        cols.push(child);
-                });
+                const cols = this.recursiveGetChildren(children, []);
 
                 if (this.reorderableColumns && this.d_columnOrder) {
                     let orderedColumns = [];
@@ -4390,17 +4534,6 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
 
                 return data;
             },
-            dataToRender() {
-                const data = this.processedData;
-
-                if (data && this.paginator) {
-                    const first = this.lazy ? 0 : this.d_first;
-                    return data.slice(first, first + this.d_rows);
-                }
-                else {
-                    return data;
-                }
-            },
             totalRecordsLength() {
                 if (this.lazy) {
                     return this.totalRecords;
@@ -4427,22 +4560,30 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                 return ['p-datatable-loading-icon pi-spin', this.loadingIcon];
             },
             allRowsSelected() {
-                const val = this.frozenValue ? [...this.frozenValue, ...this.processedData]: this.processedData;
-                const length = this.lazy ? this.totalRecords : (val ? val.length : 0);
-                return (val && length > 0 && this.selection && this.selection.length > 0 && this.selection.length === length);
+                if (this.selectAll !== null) {
+                    return this.selectAll;
+                }
+                else {
+                    const val = this.frozenValue ? [...this.frozenValue, ...this.processedData] : this.processedData;
+                    return val && this.selection && Array.isArray(this.selection) && val.every(v => this.selection.some(s => this.equals(s, v)));
+                }
             },
             attributeSelector() {
                 return utils.UniqueComponentId();
             },
             groupRowSortField() {
                 return this.sortMode === 'single' ? this.sortField : (this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null);
+            },
+            virtualScrollerDisabled() {
+                return utils.ObjectUtils.isEmpty(this.virtualScrollerOptions) || !this.scrollable;
             }
         },
         components: {
-            'DTPaginator': Paginator__default['default'],
+            'DTPaginator': Paginator__default["default"],
             'DTTableHeader': script$7,
             'DTTableBody': script$3,
             'DTTableFooter': script$1,
+            'DTVirtualScroller': VirtualScroller__default["default"]
         }
     };
 
@@ -4481,6 +4622,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
       const _component_DTTableHeader = vue.resolveComponent("DTTableHeader");
       const _component_DTTableBody = vue.resolveComponent("DTTableBody");
       const _component_DTTableFooter = vue.resolveComponent("DTTableFooter");
+      const _component_DTVirtualScroller = vue.resolveComponent("DTVirtualScroller");
 
       return (vue.openBlock(), vue.createBlock("div", {
         class: $options.containerClass,
@@ -4511,19 +4653,19 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
-              (_ctx.$slots.paginatorLeft)
+              (_ctx.$slots.paginatorstart)
                 ? {
-                    name: "left",
+                    name: "start",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorLeft")
+                      vue.renderSlot(_ctx.$slots, "paginatorstart")
                     ])
                   }
                 : undefined,
-              (_ctx.$slots.paginatorRight)
+              (_ctx.$slots.paginatorend)
                 ? {
-                    name: "right",
+                    name: "end",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorRight")
+                      vue.renderSlot(_ctx.$slots, "paginatorend")
                     ])
                   }
                 : undefined
@@ -4531,48 +4673,112 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
           : vue.createCommentVNode("", true),
         vue.createVNode("div", {
           class: "p-datatable-wrapper",
-          style: {maxHeight: $props.scrollHeight}
+          style: { maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' }
         }, [
-          vue.createVNode("table", {
-            ref: "table",
-            role: "table",
-            class: [$props.tableClass, 'p-datatable-table'],
-            style: $props.tableStyle
-          }, [
-            vue.createVNode(_component_DTTableHeader, {
-              columnGroup: $options.headerColumnGroup,
-              columns: $options.columns,
-              rowGroupMode: $props.rowGroupMode,
-              groupRowsBy: $props.groupRowsBy,
-              groupRowSortField: $options.groupRowSortField,
-              resizableColumns: $props.resizableColumns,
-              allRowsSelected: $options.allRowsSelected,
-              empty: $options.empty,
-              sortMode: $props.sortMode,
-              sortField: $data.d_sortField,
-              sortOrder: $data.d_sortOrder,
-              multiSortMeta: $data.d_multiSortMeta,
-              filters: $data.d_filters,
-              filtersStore: $props.filters,
-              filterDisplay: $props.filterDisplay,
-              onColumnClick: _cache[2] || (_cache[2] = $event => ($options.onColumnHeaderClick($event))),
-              onColumnMousedown: _cache[3] || (_cache[3] = $event => ($options.onColumnHeaderMouseDown($event))),
-              onFilterChange: $options.onFilterChange,
-              onFilterApply: $options.onFilterApply,
-              onColumnDragstart: _cache[4] || (_cache[4] = $event => ($options.onColumnHeaderDragStart($event))),
-              onColumnDragover: _cache[5] || (_cache[5] = $event => ($options.onColumnHeaderDragOver($event))),
-              onColumnDragleave: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDragLeave($event))),
-              onColumnDrop: _cache[7] || (_cache[7] = $event => ($options.onColumnHeaderDrop($event))),
-              onColumnResizestart: _cache[8] || (_cache[8] = $event => ($options.onColumnResizeStart($event))),
-              onCheckboxChange: _cache[9] || (_cache[9] = $event => ($options.toggleRowsWithCheckbox($event)))
-            }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "onFilterChange", "onFilterApply"]),
-            ($props.frozenValue)
-              ? (vue.openBlock(), vue.createBlock(_component_DTTableBody, {
-                  key: 0,
-                  value: $props.frozenValue,
-                  frozenRow: true,
-                  class: "p-datatable-frozen-tbody",
-                  columns: $options.columns,
+          vue.createVNode(_component_DTVirtualScroller, vue.mergeProps($props.virtualScrollerOptions, {
+            items: $options.processedData,
+            columns: $options.columns,
+            style: { height: $props.scrollHeight },
+            disabled: $options.virtualScrollerDisabled,
+            loaderDisabled: "",
+            showSpacer: false
+          }), {
+            content: vue.withCtx((slotProps) => [
+              vue.createVNode("table", {
+                ref: "table",
+                role: "table",
+                class: [$props.tableClass, 'p-datatable-table'],
+                style: [$props.tableStyle, slotProps.spacerStyle]
+              }, [
+                vue.createVNode(_component_DTTableHeader, {
+                  columnGroup: $options.headerColumnGroup,
+                  columns: slotProps.columns,
+                  rowGroupMode: $props.rowGroupMode,
+                  groupRowsBy: $props.groupRowsBy,
+                  groupRowSortField: $options.groupRowSortField,
+                  resizableColumns: $props.resizableColumns,
+                  allRowsSelected: $options.allRowsSelected,
+                  empty: $options.empty,
+                  sortMode: $props.sortMode,
+                  sortField: $data.d_sortField,
+                  sortOrder: $data.d_sortOrder,
+                  multiSortMeta: $data.d_multiSortMeta,
+                  filters: $data.d_filters,
+                  filtersStore: $props.filters,
+                  filterDisplay: $props.filterDisplay,
+                  onColumnClick: _cache[2] || (_cache[2] = $event => ($options.onColumnHeaderClick($event))),
+                  onColumnMousedown: _cache[3] || (_cache[3] = $event => ($options.onColumnHeaderMouseDown($event))),
+                  onFilterChange: $options.onFilterChange,
+                  onFilterApply: $options.onFilterApply,
+                  onColumnDragstart: _cache[4] || (_cache[4] = $event => ($options.onColumnHeaderDragStart($event))),
+                  onColumnDragover: _cache[5] || (_cache[5] = $event => ($options.onColumnHeaderDragOver($event))),
+                  onColumnDragleave: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDragLeave($event))),
+                  onColumnDrop: _cache[7] || (_cache[7] = $event => ($options.onColumnHeaderDrop($event))),
+                  onColumnResizestart: _cache[8] || (_cache[8] = $event => ($options.onColumnResizeStart($event))),
+                  onCheckboxChange: _cache[9] || (_cache[9] = $event => ($options.toggleRowsWithCheckbox($event)))
+                }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "onFilterChange", "onFilterApply"]),
+                ($props.frozenValue)
+                  ? (vue.openBlock(), vue.createBlock(_component_DTTableBody, {
+                      key: 0,
+                      value: $props.frozenValue,
+                      frozenRow: true,
+                      class: "p-datatable-frozen-tbody",
+                      columns: slotProps.columns,
+                      dataKey: $props.dataKey,
+                      selection: $props.selection,
+                      selectionKeys: $data.d_selectionKeys,
+                      selectionMode: $props.selectionMode,
+                      contextMenu: $props.contextMenu,
+                      contextMenuSelection: $props.contextMenuSelection,
+                      rowGroupMode: $props.rowGroupMode,
+                      groupRowsBy: $props.groupRowsBy,
+                      expandableRowGroups: $props.expandableRowGroups,
+                      rowClass: $props.rowClass,
+                      rowStyle: $props.rowStyle,
+                      editMode: $props.editMode,
+                      compareSelectionBy: $props.compareSelectionBy,
+                      scrollable: $props.scrollable,
+                      expandedRowIcon: $props.expandedRowIcon,
+                      collapsedRowIcon: $props.collapsedRowIcon,
+                      expandedRows: $props.expandedRows,
+                      expandedRowKeys: $data.d_expandedRowKeys,
+                      expandedRowGroups: $props.expandedRowGroups,
+                      editingRows: $props.editingRows,
+                      editingRowKeys: $data.d_editingRowKeys,
+                      templates: _ctx.$slots,
+                      loading: $props.loading,
+                      responsiveLayout: $props.responsiveLayout,
+                      onRowgroupToggle: $options.toggleRowGroup,
+                      onRowClick: _cache[10] || (_cache[10] = $event => ($options.onRowClick($event))),
+                      onRowDblclick: _cache[11] || (_cache[11] = $event => ($options.onRowDblClick($event))),
+                      onRowRightclick: _cache[12] || (_cache[12] = $event => ($options.onRowRightClick($event))),
+                      onRowTouchend: $options.onRowTouchEnd,
+                      onRowKeydown: $options.onRowKeyDown,
+                      onRowMousedown: $options.onRowMouseDown,
+                      onRowDragstart: _cache[13] || (_cache[13] = $event => ($options.onRowDragStart($event))),
+                      onRowDragover: _cache[14] || (_cache[14] = $event => ($options.onRowDragOver($event))),
+                      onRowDragleave: _cache[15] || (_cache[15] = $event => ($options.onRowDragLeave($event))),
+                      onRowDragend: _cache[16] || (_cache[16] = $event => ($options.onRowDragEnd($event))),
+                      onRowDrop: _cache[17] || (_cache[17] = $event => ($options.onRowDrop($event))),
+                      onRowToggle: _cache[18] || (_cache[18] = $event => ($options.toggleRow($event))),
+                      onRadioChange: _cache[19] || (_cache[19] = $event => ($options.toggleRowWithRadio($event))),
+                      onCheckboxChange: _cache[20] || (_cache[20] = $event => ($options.toggleRowWithCheckbox($event))),
+                      onCellEditInit: _cache[21] || (_cache[21] = $event => ($options.onCellEditInit($event))),
+                      onCellEditComplete: _cache[22] || (_cache[22] = $event => ($options.onCellEditComplete($event))),
+                      onCellEditCancel: _cache[23] || (_cache[23] = $event => ($options.onCellEditCancel($event))),
+                      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))),
+                      editingMeta: $data.d_editingMeta,
+                      onEditingMetaChange: $options.onEditingMetaChange,
+                      isVirtualScrollerDisabled: true
+                    }, null, 8, ["value", "columns", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "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(slotProps.rows),
+                  class: slotProps.styleClass,
+                  columns: slotProps.columns,
+                  empty: $options.empty,
                   dataKey: $props.dataKey,
                   selection: $props.selection,
                   selectionKeys: $data.d_selectionKeys,
@@ -4583,6 +4789,7 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   groupRowsBy: $props.groupRowsBy,
                   expandableRowGroups: $props.expandableRowGroups,
                   rowClass: $props.rowClass,
+                  rowStyle: $props.rowStyle,
                   editMode: $props.editMode,
                   compareSelectionBy: $props.compareSelectionBy,
                   scrollable: $props.scrollable,
@@ -4597,86 +4804,39 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
                   loading: $props.loading,
                   responsiveLayout: $props.responsiveLayout,
                   onRowgroupToggle: $options.toggleRowGroup,
-                  onRowClick: _cache[10] || (_cache[10] = $event => ($options.onRowClick($event))),
-                  onRowDblclick: _cache[11] || (_cache[11] = $event => ($options.onRowDblClick($event))),
-                  onRowRightclick: _cache[12] || (_cache[12] = $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[13] || (_cache[13] = $event => ($options.onRowDragStart($event))),
-                  onRowDragover: _cache[14] || (_cache[14] = $event => ($options.onRowDragOver($event))),
-                  onRowDragleave: _cache[15] || (_cache[15] = $event => ($options.onRowDragLeave($event))),
-                  onRowDragend: _cache[16] || (_cache[16] = $event => ($options.onRowDragEnd($event))),
-                  onRowDrop: _cache[17] || (_cache[17] = $event => ($options.onRowDrop($event))),
-                  onRowToggle: _cache[18] || (_cache[18] = $event => ($options.toggleRow($event))),
-                  onRadioChange: _cache[19] || (_cache[19] = $event => ($options.toggleRowWithRadio($event))),
-                  onCheckboxChange: _cache[20] || (_cache[20] = $event => ($options.toggleRowWithCheckbox($event))),
-                  onCellEditInit: _cache[21] || (_cache[21] = $event => ($options.onCellEditInit($event))),
-                  onCellEditComplete: _cache[22] || (_cache[22] = $event => ($options.onCellEditComplete($event))),
-                  onCellEditCancel: _cache[23] || (_cache[23] = $event => ($options.onCellEditCancel($event))),
-                  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))),
+                  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", "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,
-              columns: $options.columns,
-              empty: $options.empty,
-              dataKey: $props.dataKey,
-              selection: $props.selection,
-              selectionKeys: $data.d_selectionKeys,
-              selectionMode: $props.selectionMode,
-              contextMenu: $props.contextMenu,
-              contextMenuSelection: $props.contextMenuSelection,
-              rowGroupMode: $props.rowGroupMode,
-              groupRowsBy: $props.groupRowsBy,
-              expandableRowGroups: $props.expandableRowGroups,
-              rowClass: $props.rowClass,
-              editMode: $props.editMode,
-              compareSelectionBy: $props.compareSelectionBy,
-              scrollable: $props.scrollable,
-              expandedRowIcon: $props.expandedRowIcon,
-              collapsedRowIcon: $props.collapsedRowIcon,
-              expandedRows: $props.expandedRows,
-              expandedRowKeys: $data.d_expandedRowKeys,
-              expandedRowGroups: $props.expandedRowGroups,
-              editingRows: $props.editingRows,
-              editingRowKeys: $data.d_editingRowKeys,
-              templates: _ctx.$slots,
-              loading: $props.loading,
-              responsiveLayout: $props.responsiveLayout,
-              onRowgroupToggle: $options.toggleRowGroup,
-              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[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
-            }, null, 8, ["columnGroup", "columns"])
-          ], 6)
+                  onEditingMetaChange: $options.onEditingMetaChange,
+                  virtualScrollerContentProps: slotProps,
+                  isVirtualScrollerDisabled: $options.virtualScrollerDisabled
+                }, 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", "loading", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "virtualScrollerContentProps", "isVirtualScrollerDisabled"]),
+                vue.createVNode(_component_DTTableFooter, {
+                  columnGroup: $options.footerColumnGroup,
+                  columns: slotProps.columns
+                }, null, 8, ["columnGroup", "columns"])
+              ], 6)
+            ]),
+            _: 1
+          }, 16, ["items", "columns", "style", "disabled"])
         ], 4),
         ($options.paginatorBottom)
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
@@ -4692,19 +4852,19 @@ this.primevue.datatable = (function (utils, api, Paginator, vue, OverlayEventBus
               onPage: _cache[44] || (_cache[44] = $event => ($options.onPage($event))),
               alwaysShow: $props.alwaysShowPaginator
             }, vue.createSlots({ _: 2 }, [
-              (_ctx.$slots.paginatorLeft)
+              (_ctx.$slots.paginatorstart)
                 ? {
-                    name: "left",
+                    name: "start",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorLeft")
+                      vue.renderSlot(_ctx.$slots, "paginatorstart")
                     ])
                   }
                 : undefined,
-              (_ctx.$slots.paginatorRight)
+              (_ctx.$slots.paginatorend)
                 ? {
-                    name: "right",
+                    name: "end",
                     fn: vue.withCtx(() => [
-                      vue.renderSlot(_ctx.$slots, "paginatorRight")
+                      vue.renderSlot(_ctx.$slots, "paginatorend")
                     ])
                   }
                 : undefined
@@ -4752,11 +4912,11 @@ 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    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";
+    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: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: .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\n/* VirtualScroller */\n.p-datatable .p-virtualscroller-loading {\n    -webkit-transform: none !important;\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;
 
     return script;
 
-}(primevue.utils, primevue.api, primevue.paginator, Vue, primevue.overlayeventbus, primevue.dropdown, primevue.button, primevue.ripple));
+})(primevue.utils, primevue.api, primevue.paginator, primevue.virtualscroller, Vue, primevue.overlayeventbus, primevue.dropdown, primevue.button, primevue.ripple);