primevue 3.12.4 → 3.13.0

package/datatable/datatable.esm.js

@@ -2,10 +2,11 @@ import { ZIndexUtils, DomHandler, ConnectedOverlayScrollHandler, ObjectUtils, Un
 import { FilterOperator, FilterService, FilterMatchMode } from 'primevue/api';
 import Paginator from 'primevue/paginator';
 import VirtualScroller from 'primevue/virtualscroller';
-import { openBlock, createBlock, withKeys, withModifiers, createVNode, resolveComponent, resolveDynamicComponent, createCommentVNode, Teleport, Transition, withCtx, Fragment, renderList, toDisplayString, resolveDirective, withDirectives, createTextVNode, renderSlot, createSlots, mergeProps } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, withKeys, withModifiers, createElementVNode, resolveComponent, createBlock, resolveDynamicComponent, createCommentVNode, createVNode, withCtx, Transition, Fragment, renderList, toDisplayString, normalizeStyle, resolveDirective, withDirectives, createTextVNode, renderSlot, createSlots, mergeProps } from 'vue';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Dropdown from 'primevue/dropdown';
 import Button from 'primevue/button';
+import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
 
 var script$a = {
@@ -39,25 +40,27 @@ var script$a = {
     }
 };
 
+const _hoisted_1$a = ["aria-checked", "tabindex"];
+
 function render$a(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("div", {
-    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] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(['p-checkbox p-component', {'p-checkbox-focused': $data.focused}]),
+    onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args))),
+    onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
   }, [
-    createVNode("div", {
+    createElementVNode("div", {
       ref: "box",
-      class: ['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
+      class: normalizeClass(['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
       role: "checkbox",
       "aria-checked": $props.checked,
       tabindex: _ctx.$attrs.disabled ? null : '0',
-      onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
-      onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
+      onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
+      onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
     }, [
-      createVNode("span", {
-        class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
+      createElementVNode("span", {
+        class: normalizeClass(['p-checkbox-icon', {'pi pi-check': $props.checked}])
       }, null, 2)
-    ], 42, ["aria-checked", "tabindex"])
+    ], 42, _hoisted_1$a)
   ], 34))
 }
 
@@ -437,7 +440,7 @@ var script$9 = {
         bindResizeListener() {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
-                    if (this.overlayVisible) {
+                    if (this.overlayVisible && !DomHandler.isTouchDevice()) {
                         this.hide();
                     }
                 };
@@ -517,39 +520,51 @@ var script$9 = {
     },
     components: {
         'CFDropdown': Dropdown,
-        'CFButton': Button
+        'CFButton': Button,
+        'Portal': Portal
     }
 };
 
-const _hoisted_1$7 = {
+const _hoisted_1$9 = {
   key: 0,
   class: "p-fluid p-column-filter-element"
 };
-const _hoisted_2$5 = /*#__PURE__*/createVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
-const _hoisted_3$4 = /*#__PURE__*/createVNode("span", { class: "pi pi-filter-slash" }, null, -1);
-const _hoisted_4$2 = {
+const _hoisted_2$7 = ["aria-expanded"];
+const _hoisted_3$6 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-icon pi-filter" }, null, -1);
+const _hoisted_4$4 = [
+  _hoisted_3$6
+];
+const _hoisted_5$3 = /*#__PURE__*/createElementVNode("span", { class: "pi pi-filter-slash" }, null, -1);
+const _hoisted_6$3 = [
+  _hoisted_5$3
+];
+const _hoisted_7$1 = {
   key: 0,
   class: "p-column-filter-row-items"
 };
-const _hoisted_5$1 = /*#__PURE__*/createVNode("li", { class: "p-column-filter-separator" }, null, -1);
-const _hoisted_6$1 = {
+const _hoisted_8 = ["onClick", "onKeydown", "tabindex"];
+const _hoisted_9 = /*#__PURE__*/createElementVNode("li", { class: "p-column-filter-separator" }, null, -1);
+const _hoisted_10 = {
   key: 0,
   class: "p-column-filter-operator"
 };
-const _hoisted_7 = { class: "p-column-filter-constraints" };
-const _hoisted_8 = {
+const _hoisted_11 = { class: "p-column-filter-constraints" };
+const _hoisted_12 = {
   key: 1,
   class: "p-column-filter-add-rule"
 };
-const _hoisted_9 = { class: "p-column-filter-buttonbar" };
+const _hoisted_13 = { class: "p-column-filter-buttonbar" };
 
 function render$9(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_CFDropdown = resolveComponent("CFDropdown");
   const _component_CFButton = resolveComponent("CFButton");
+  const _component_Portal = resolveComponent("Portal");
 
-  return (openBlock(), createBlock("div", { class: $options.containerClass }, [
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass($options.containerClass)
+  }, [
     ($props.display === 'row')
-      ? (openBlock(), createBlock("div", _hoisted_1$7, [
+      ? (openBlock(), createElementBlock("div", _hoisted_1$9, [
           (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
             field: $props.field,
             filterModel: $props.filters[$props.field],
@@ -558,185 +573,184 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
         ]))
       : createCommentVNode("", true),
     ($options.showMenuButton)
-      ? (openBlock(), createBlock("button", {
+      ? (openBlock(), createElementBlock("button", {
           key: 1,
           ref: "icon",
           type: "button",
-          class: ["p-column-filter-menu-button p-link", {'p-column-filter-menu-button-open': $data.overlayVisible, 'p-column-filter-menu-button-active': $options.hasFilter()}],
+          class: normalizeClass(["p-column-filter-menu-button p-link", {'p-column-filter-menu-button-open': $data.overlayVisible, 'p-column-filter-menu-button-active': $options.hasFilter()}]),
           "aria-haspopup": "true",
           "aria-expanded": $data.overlayVisible,
-          onClick: _cache[1] || (_cache[1] = $event => ($options.toggleMenu())),
-          onKeydown: _cache[2] || (_cache[2] = $event => ($options.onToggleButtonKeyDown($event)))
-        }, [
-          _hoisted_2$5
-        ], 42, ["aria-expanded"]))
+          onClick: _cache[0] || (_cache[0] = $event => ($options.toggleMenu())),
+          onKeydown: _cache[1] || (_cache[1] = $event => ($options.onToggleButtonKeyDown($event)))
+        }, _hoisted_4$4, 42, _hoisted_2$7))
       : createCommentVNode("", true),
     ($props.showClearButton && $props.display === 'row')
-      ? (openBlock(), createBlock("button", {
+      ? (openBlock(), createElementBlock("button", {
           key: 2,
-          class: [{'p-hidden-space': !$options.hasRowFilter()}, "p-column-filter-clear-button p-link"],
+          class: normalizeClass([{'p-hidden-space': !$options.hasRowFilter()}, "p-column-filter-clear-button p-link"]),
           type: "button",
-          onClick: _cache[3] || (_cache[3] = $event => ($options.clearFilter()))
-        }, [
-          _hoisted_3$4
-        ], 2))
+          onClick: _cache[2] || (_cache[2] = $event => ($options.clearFilter()))
+        }, _hoisted_6$3, 2))
       : createCommentVNode("", true),
-    (openBlock(), createBlock(Teleport, { to: "body" }, [
-      createVNode(Transition, {
-        name: "p-connected-overlay",
-        onEnter: $options.onOverlayEnter,
-        onLeave: $options.onOverlayLeave,
-        onAfterLeave: $options.onOverlayAfterLeave
-      }, {
-        default: withCtx(() => [
-          ($data.overlayVisible)
-            ? (openBlock(), createBlock("div", {
-                key: 0,
-                ref: $options.overlayRef,
-                class: $options.overlayClass,
-                onKeydown: _cache[12] || (_cache[12] = withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
-                onClick: _cache[13] || (_cache[13] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
-                onMousedown: _cache[14] || (_cache[14] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
-              }, [
-                (openBlock(), createBlock(resolveDynamicComponent($props.filterHeaderTemplate), {
-                  field: $props.field,
-                  filterModel: $props.filters[$props.field],
-                  filterCallback: $options.filterCallback
-                }, null, 8, ["field", "filterModel", "filterCallback"])),
-                ($props.display === 'row')
-                  ? (openBlock(), createBlock("ul", _hoisted_4$2, [
-                      (openBlock(true), createBlock(Fragment, null, renderList($options.matchModes, (matchMode, i) => {
-                        return (openBlock(), createBlock("li", {
-                          class: ["p-column-filter-row-item", {'p-highlight': $options.isRowMatchModeSelected(matchMode.value)}],
-                          key: matchMode.label,
-                          onClick: $event => ($options.onRowMatchModeChange(matchMode.value)),
+    createVNode(_component_Portal, null, {
+      default: withCtx(() => [
+        createVNode(Transition, {
+          name: "p-connected-overlay",
+          onEnter: $options.onOverlayEnter,
+          onLeave: $options.onOverlayLeave,
+          onAfterLeave: $options.onOverlayAfterLeave
+        }, {
+          default: withCtx(() => [
+            ($data.overlayVisible)
+              ? (openBlock(), createElementBlock("div", {
+                  key: 0,
+                  ref: $options.overlayRef,
+                  class: normalizeClass($options.overlayClass),
+                  onKeydown: _cache[11] || (_cache[11] = withKeys((...args) => ($options.onEscape && $options.onEscape(...args)), ["escape"])),
+                  onClick: _cache[12] || (_cache[12] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
+                  onMousedown: _cache[13] || (_cache[13] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
+                }, [
+                  (openBlock(), createBlock(resolveDynamicComponent($props.filterHeaderTemplate), {
+                    field: $props.field,
+                    filterModel: $props.filters[$props.field],
+                    filterCallback: $options.filterCallback
+                  }, null, 8, ["field", "filterModel", "filterCallback"])),
+                  ($props.display === 'row')
+                    ? (openBlock(), createElementBlock("ul", _hoisted_7$1, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList($options.matchModes, (matchMode, i) => {
+                          return (openBlock(), createElementBlock("li", {
+                            class: normalizeClass(["p-column-filter-row-item", {'p-highlight': $options.isRowMatchModeSelected(matchMode.value)}]),
+                            key: matchMode.label,
+                            onClick: $event => ($options.onRowMatchModeChange(matchMode.value)),
+                            onKeydown: [
+                              _cache[3] || (_cache[3] = $event => ($options.onRowMatchModeKeyDown($event))),
+                              withKeys(withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
+                            ],
+                            tabindex: i === 0 ? '0' : null
+                          }, toDisplayString(matchMode.label), 43, _hoisted_8))
+                        }), 128)),
+                        _hoisted_9,
+                        createElementVNode("li", {
+                          class: "p-column-filter-row-item",
+                          onClick: _cache[4] || (_cache[4] = $event => ($options.clearFilter())),
                           onKeydown: [
-                            _cache[4] || (_cache[4] = $event => ($options.onRowMatchModeKeyDown($event))),
-                            withKeys(withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
-                          ],
-                          tabindex: i === 0 ? '0' : null
-                        }, toDisplayString(matchMode.label), 43, ["onClick", "onKeydown", "tabindex"]))
-                      }), 128)),
-                      _hoisted_5$1,
-                      createVNode("li", {
-                        class: "p-column-filter-row-item",
-                        onClick: _cache[5] || (_cache[5] = $event => ($options.clearFilter())),
-                        onKeydown: [
-                          _cache[6] || (_cache[6] = $event => ($options.onRowMatchModeKeyDown($event))),
-                          _cache[7] || (_cache[7] = withKeys($event => (_ctx.onRowClearItemClick()), ["enter"]))
-                        ]
-                      }, toDisplayString($options.noFilterLabel), 33)
-                    ]))
-                  : (openBlock(), createBlock(Fragment, { key: 1 }, [
-                      ($options.isShowOperator)
-                        ? (openBlock(), createBlock("div", _hoisted_6$1, [
-                            createVNode(_component_CFDropdown, {
-                              options: $options.operatorOptions,
-                              modelValue: $options.operator,
-                              "onUpdate:modelValue": _cache[8] || (_cache[8] = $event => ($options.onOperatorChange($event))),
-                              class: "p-column-filter-operator-dropdown",
-                              optionLabel: "label",
-                              optionValue: "value"
-                            }, null, 8, ["options", "modelValue"])
-                          ]))
-                        : createCommentVNode("", true),
-                      createVNode("div", _hoisted_7, [
-                        (openBlock(true), createBlock(Fragment, null, renderList($options.fieldConstraints, (fieldConstraint, i) => {
-                          return (openBlock(), createBlock("div", {
-                            key: i,
-                            class: "p-column-filter-constraint"
-                          }, [
-                            ($options.isShowMatchModes)
-                              ? (openBlock(), createBlock(_component_CFDropdown, {
-                                  key: 0,
-                                  options: $options.matchModes,
-                                  modelValue: fieldConstraint.matchMode,
-                                  optionLabel: "label",
-                                  optionValue: "value",
-                                  "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i)),
-                                  class: "p-column-filter-matchmode-dropdown"
-                                }, null, 8, ["options", "modelValue", "onUpdate:modelValue"]))
-                              : createCommentVNode("", true),
-                            ($props.display === 'menu')
-                              ? (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
-                                  key: 1,
-                                  field: $props.field,
-                                  filterModel: fieldConstraint,
-                                  filterCallback: $options.filterCallback
-                                }, null, 8, ["field", "filterModel", "filterCallback"]))
-                              : createCommentVNode("", true),
-                            createVNode("div", null, [
-                              ($options.showRemoveIcon)
-                                ? (openBlock(), createBlock(_component_CFButton, {
+                            _cache[5] || (_cache[5] = $event => ($options.onRowMatchModeKeyDown($event))),
+                            _cache[6] || (_cache[6] = withKeys($event => (_ctx.onRowClearItemClick()), ["enter"]))
+                          ]
+                        }, toDisplayString($options.noFilterLabel), 33)
+                      ]))
+                    : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                        ($options.isShowOperator)
+                          ? (openBlock(), createElementBlock("div", _hoisted_10, [
+                              createVNode(_component_CFDropdown, {
+                                options: $options.operatorOptions,
+                                modelValue: $options.operator,
+                                "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onOperatorChange($event))),
+                                class: "p-column-filter-operator-dropdown",
+                                optionLabel: "label",
+                                optionValue: "value"
+                              }, null, 8, ["options", "modelValue"])
+                            ]))
+                          : createCommentVNode("", true),
+                        createElementVNode("div", _hoisted_11, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldConstraints, (fieldConstraint, i) => {
+                            return (openBlock(), createElementBlock("div", {
+                              key: i,
+                              class: "p-column-filter-constraint"
+                            }, [
+                              ($options.isShowMatchModes)
+                                ? (openBlock(), createBlock(_component_CFDropdown, {
                                     key: 0,
-                                    type: "button",
-                                    icon: "pi pi-trash",
-                                    class: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
-                                    onClick: $event => ($options.removeConstraint(i)),
-                                    label: $options.removeRuleButtonLabel
-                                  }, null, 8, ["onClick", "label"]))
-                                : createCommentVNode("", true)
-                            ])
-                          ]))
-                        }), 128))
-                      ]),
-                      ($options.isShowAddConstraint)
-                        ? (openBlock(), createBlock("div", _hoisted_8, [
-                            createVNode(_component_CFButton, {
-                              type: "button",
-                              label: $options.addRuleButtonLabel,
-                              icon: "pi pi-plus",
-                              class: "p-column-filter-add-button p-button-text p-button-sm",
-                              onClick: _cache[9] || (_cache[9] = $event => ($options.addConstraint()))
-                            }, null, 8, ["label"])
-                          ]))
-                        : createCommentVNode("", true),
-                      createVNode("div", _hoisted_9, [
-                        (!$props.filterClearTemplate && $props.showClearButton)
-                          ? (openBlock(), createBlock(_component_CFButton, {
-                              key: 0,
-                              type: "button",
-                              class: "p-button-outlined p-button-sm",
-                              onClick: _cache[10] || (_cache[10] = $event => ($options.clearFilter())),
-                              label: $options.clearButtonLabel
-                            }, null, 8, ["label"]))
-                          : (openBlock(), createBlock(resolveDynamicComponent($props.filterClearTemplate), {
-                              key: 1,
-                              field: $props.field,
-                              filterModel: $props.filters[$props.field],
-                              filterCallback: $options.clearFilter
-                            }, null, 8, ["field", "filterModel", "filterCallback"])),
-                        ($props.showApplyButton)
-                          ? (openBlock(), createBlock(Fragment, { key: 2 }, [
-                              (!$props.filterApplyTemplate)
-                                ? (openBlock(), createBlock(_component_CFButton, {
-                                    key: 0,
-                                    type: "button",
-                                    class: "p-button-sm",
-                                    onClick: _cache[11] || (_cache[11] = $event => ($options.applyFilter())),
-                                    label: $options.applyButtonLabel
-                                  }, null, 8, ["label"]))
-                                : (openBlock(), createBlock(resolveDynamicComponent($props.filterApplyTemplate), {
+                                    options: $options.matchModes,
+                                    modelValue: fieldConstraint.matchMode,
+                                    optionLabel: "label",
+                                    optionValue: "value",
+                                    "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i)),
+                                    class: "p-column-filter-matchmode-dropdown"
+                                  }, null, 8, ["options", "modelValue", "onUpdate:modelValue"]))
+                                : createCommentVNode("", true),
+                              ($props.display === 'menu')
+                                ? (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
                                     key: 1,
                                     field: $props.field,
-                                    filterModel: $props.filters[$props.field],
-                                    filterCallback: $options.applyFilter
+                                    filterModel: fieldConstraint,
+                                    filterCallback: $options.filterCallback
                                   }, null, 8, ["field", "filterModel", "filterCallback"]))
-                            ], 64))
-                          : createCommentVNode("", true)
-                      ])
-                    ], 64)),
-                (openBlock(), createBlock(resolveDynamicComponent($props.filterFooterTemplate), {
-                  field: $props.field,
-                  filterModel: $props.filters[$props.field],
-                  filterCallback: $options.filterCallback
-                }, null, 8, ["field", "filterModel", "filterCallback"]))
-              ], 34))
-            : createCommentVNode("", true)
-        ]),
-        _: 1
-      }, 8, ["onEnter", "onLeave", "onAfterLeave"])
-    ]))
+                                : createCommentVNode("", true),
+                              createElementVNode("div", null, [
+                                ($options.showRemoveIcon)
+                                  ? (openBlock(), createBlock(_component_CFButton, {
+                                      key: 0,
+                                      type: "button",
+                                      icon: "pi pi-trash",
+                                      class: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
+                                      onClick: $event => ($options.removeConstraint(i)),
+                                      label: $options.removeRuleButtonLabel
+                                    }, null, 8, ["onClick", "label"]))
+                                  : createCommentVNode("", true)
+                              ])
+                            ]))
+                          }), 128))
+                        ]),
+                        ($options.isShowAddConstraint)
+                          ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                              createVNode(_component_CFButton, {
+                                type: "button",
+                                label: $options.addRuleButtonLabel,
+                                icon: "pi pi-plus",
+                                class: "p-column-filter-add-button p-button-text p-button-sm",
+                                onClick: _cache[8] || (_cache[8] = $event => ($options.addConstraint()))
+                              }, null, 8, ["label"])
+                            ]))
+                          : createCommentVNode("", true),
+                        createElementVNode("div", _hoisted_13, [
+                          (!$props.filterClearTemplate && $props.showClearButton)
+                            ? (openBlock(), createBlock(_component_CFButton, {
+                                key: 0,
+                                type: "button",
+                                class: "p-button-outlined p-button-sm",
+                                onClick: _cache[9] || (_cache[9] = $event => ($options.clearFilter())),
+                                label: $options.clearButtonLabel
+                              }, null, 8, ["label"]))
+                            : (openBlock(), createBlock(resolveDynamicComponent($props.filterClearTemplate), {
+                                key: 1,
+                                field: $props.field,
+                                filterModel: $props.filters[$props.field],
+                                filterCallback: $options.clearFilter
+                              }, null, 8, ["field", "filterModel", "filterCallback"])),
+                          ($props.showApplyButton)
+                            ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+                                (!$props.filterApplyTemplate)
+                                  ? (openBlock(), createBlock(_component_CFButton, {
+                                      key: 0,
+                                      type: "button",
+                                      class: "p-button-sm",
+                                      onClick: _cache[10] || (_cache[10] = $event => ($options.applyFilter())),
+                                      label: $options.applyButtonLabel
+                                    }, null, 8, ["label"]))
+                                  : (openBlock(), createBlock(resolveDynamicComponent($props.filterApplyTemplate), {
+                                      key: 1,
+                                      field: $props.field,
+                                      filterModel: $props.filters[$props.field],
+                                      filterCallback: $options.applyFilter
+                                    }, null, 8, ["field", "filterModel", "filterCallback"]))
+                              ], 64))
+                            : createCommentVNode("", true)
+                        ])
+                      ], 64)),
+                  (openBlock(), createBlock(resolveDynamicComponent($props.filterFooterTemplate), {
+                    field: $props.field,
+                    filterModel: $props.filters[$props.field],
+                    filterCallback: $options.filterCallback
+                  }, null, 8, ["field", "filterModel", "filterCallback"]))
+                ], 34))
+              : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+      ]),
+      _: 1
+    })
   ], 2))
 }
 
@@ -803,6 +817,10 @@ var script$8 = {
         filterColumn: {
             type: Boolean,
             default: false
+        },
+        reorderableColumns: {
+            type: Boolean,
+            default: false
         }
     },
     data() {
@@ -903,7 +921,8 @@ var script$8 = {
                     'p-resizable-column': this.resizableColumns,
                     'p-highlight': this.isColumnSorted(),
                     'p-filter-column': this.filterColumn,
-                    'p-frozen-column': this.columnProp('frozen')
+                    'p-frozen-column': this.columnProp('frozen'),
+                    'p-reorderable-column': this.reorderableColumns
             }];
         },
         containerStyle() {
@@ -957,12 +976,13 @@ var script$8 = {
     }
 };
 
-const _hoisted_1$6 = { class: "p-column-header-content" };
-const _hoisted_2$4 = {
+const _hoisted_1$8 = ["tabindex", "colspan", "rowspan", "aria-sort"];
+const _hoisted_2$6 = { class: "p-column-header-content" };
+const _hoisted_3$5 = {
   key: 1,
   class: "p-column-title"
 };
-const _hoisted_3$3 = {
+const _hoisted_4$3 = {
   key: 3,
   class: "p-sortable-column-badge"
 };
@@ -971,30 +991,30 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
   const _component_DTColumnFilter = resolveComponent("DTColumnFilter");
 
-  return (openBlock(), createBlock("th", {
-    style: $options.containerStyle,
-    class: $options.containerClass,
+  return (openBlock(), createElementBlock("th", {
+    style: normalizeStyle($options.containerStyle),
+    class: normalizeClass($options.containerClass),
     tabindex: $options.columnProp('sortable') ? '0' : null,
     role: "cell",
-    onClick: _cache[9] || (_cache[9] = (...args) => ($options.onClick && $options.onClick(...args))),
-    onKeydown: _cache[10] || (_cache[10] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
-    onMousedown: _cache[11] || (_cache[11] = (...args) => ($options.onMouseDown && $options.onMouseDown(...args))),
-    onDragstart: _cache[12] || (_cache[12] = (...args) => ($options.onDragStart && $options.onDragStart(...args))),
-    onDragover: _cache[13] || (_cache[13] = (...args) => ($options.onDragOver && $options.onDragOver(...args))),
-    onDragleave: _cache[14] || (_cache[14] = (...args) => ($options.onDragLeave && $options.onDragLeave(...args))),
-    onDrop: _cache[15] || (_cache[15] = (...args) => ($options.onDrop && $options.onDrop(...args))),
+    onClick: _cache[8] || (_cache[8] = (...args) => ($options.onClick && $options.onClick(...args))),
+    onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+    onMousedown: _cache[10] || (_cache[10] = (...args) => ($options.onMouseDown && $options.onMouseDown(...args))),
+    onDragstart: _cache[11] || (_cache[11] = (...args) => ($options.onDragStart && $options.onDragStart(...args))),
+    onDragover: _cache[12] || (_cache[12] = (...args) => ($options.onDragOver && $options.onDragOver(...args))),
+    onDragleave: _cache[13] || (_cache[13] = (...args) => ($options.onDragLeave && $options.onDragLeave(...args))),
+    onDrop: _cache[14] || (_cache[14] = (...args) => ($options.onDrop && $options.onDrop(...args))),
     colspan: $options.columnProp('colspan'),
     rowspan: $options.columnProp('rowspan'),
     "aria-sort": $options.ariaSort
   }, [
     ($props.resizableColumns && !$options.columnProp('frozen'))
-      ? (openBlock(), createBlock("span", {
+      ? (openBlock(), createElementBlock("span", {
           key: 0,
           class: "p-column-resizer",
-          onMousedown: _cache[1] || (_cache[1] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
+          onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
         }, null, 32))
       : createCommentVNode("", true),
-    createVNode("div", _hoisted_1$6, [
+    createElementVNode("div", _hoisted_2$6, [
       ($props.column.children && $props.column.children.header)
         ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.header), {
             key: 0,
@@ -1002,16 +1022,16 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["column"]))
         : createCommentVNode("", true),
       ($options.columnProp('header'))
-        ? (openBlock(), createBlock("span", _hoisted_2$4, toDisplayString($options.columnProp('header')), 1))
+        ? (openBlock(), createElementBlock("span", _hoisted_3$5, toDisplayString($options.columnProp('header')), 1))
         : createCommentVNode("", true),
       ($options.columnProp('sortable'))
-        ? (openBlock(), createBlock("span", {
+        ? (openBlock(), createElementBlock("span", {
             key: 2,
-            class: $options.sortableColumnIcon
+            class: normalizeClass($options.sortableColumnIcon)
           }, null, 2))
         : createCommentVNode("", true),
       ($options.isMultiSorted())
-        ? (openBlock(), createBlock("span", _hoisted_3$3, toDisplayString($options.getBadgeValue()), 1))
+        ? (openBlock(), createElementBlock("span", _hoisted_4$3, toDisplayString($options.getBadgeValue()), 1))
         : createCommentVNode("", true),
       ($options.columnProp('selectionMode') ==='multiple' && $props.filterDisplay !== 'row')
         ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
@@ -1035,8 +1055,8 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
             filterApplyTemplate: $props.column.children && $props.column.children.filterapply,
             filters: $props.filters,
             filtersStore: $props.filtersStore,
-            onFilterChange: _cache[2] || (_cache[2] = $event => (_ctx.$emit('filter-change', $event))),
-            onFilterApply: _cache[3] || (_cache[3] = $event => (_ctx.$emit('filter-apply'))),
+            onFilterChange: _cache[1] || (_cache[1] = $event => (_ctx.$emit('filter-change', $event))),
+            onFilterApply: _cache[2] || (_cache[2] = $event => (_ctx.$emit('filter-apply'))),
             filterMenuStyle: $options.columnProp('filterMenuStyle'),
             filterMenuClass: $options.columnProp('filterMenuClass'),
             showOperator: $options.columnProp('showFilterOperator'),
@@ -1046,15 +1066,15 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
             showAddButton: $options.columnProp('showAddButton'),
             matchModeOptions: $options.columnProp('filterMatchModeOptions'),
             maxConstraints: $options.columnProp('maxConstraints'),
-            onOperatorChange: _cache[4] || (_cache[4] = $event => (_ctx.$emit('operator-change',$event))),
-            onMatchmodeChange: _cache[5] || (_cache[5] = $event => (_ctx.$emit('matchmode-change', $event))),
-            onConstraintAdd: _cache[6] || (_cache[6] = $event => (_ctx.$emit('constraint-add', $event))),
-            onConstraintRemove: _cache[7] || (_cache[7] = $event => (_ctx.$emit('constraint-remove', $event))),
-            onApplyClick: _cache[8] || (_cache[8] = $event => (_ctx.$emit('apply-click',$event)))
+            onOperatorChange: _cache[3] || (_cache[3] = $event => (_ctx.$emit('operator-change',$event))),
+            onMatchmodeChange: _cache[4] || (_cache[4] = $event => (_ctx.$emit('matchmode-change', $event))),
+            onConstraintAdd: _cache[5] || (_cache[5] = $event => (_ctx.$emit('constraint-add', $event))),
+            onConstraintRemove: _cache[6] || (_cache[6] = $event => (_ctx.$emit('constraint-remove', $event))),
+            onApplyClick: _cache[7] || (_cache[7] = $event => (_ctx.$emit('apply-click',$event)))
           }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
         : createCommentVNode("", true)
     ])
-  ], 46, ["tabindex", "colspan", "rowspan", "aria-sort"]))
+  ], 46, _hoisted_1$8))
 }
 
 script$8.render = render$8;
@@ -1124,6 +1144,10 @@ var script$7 = {
         filtersStore: {
             type: Object,
             default: null
+        },
+        reorderableColumns: {
+            type: Boolean,
+            default: false
         }
     },
     methods: {
@@ -1177,12 +1201,12 @@ var script$7 = {
     }
 };
 
-const _hoisted_1$5 = {
+const _hoisted_1$7 = {
   class: "p-datatable-thead",
   role: "rowgroup"
 };
-const _hoisted_2$3 = { role: "row" };
-const _hoisted_3$2 = {
+const _hoisted_2$5 = { role: "row" };
+const _hoisted_3$4 = {
   key: 0,
   role: "row"
 };
@@ -1192,67 +1216,68 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
   const _component_DTColumnFilter = resolveComponent("DTColumnFilter");
 
-  return (openBlock(), createBlock("thead", _hoisted_1$5, [
+  return (openBlock(), createElementBlock("thead", _hoisted_1$7, [
     (!$props.columnGroup)
-      ? (openBlock(), createBlock(Fragment, { key: 0 }, [
-          createVNode("tr", _hoisted_2$3, [
-            (openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
-              return (openBlock(), createBlock(Fragment, {
+      ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createElementVNode("tr", _hoisted_2$5, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
+              return (openBlock(), createElementBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
               }, [
                 (!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || ($props.groupRowsBy !== $options.columnProp(col, 'field'))))
                   ? (openBlock(), createBlock(_component_DTHeaderCell, {
                       key: 0,
                       column: col,
-                      onColumnClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('column-click', $event))),
-                      onColumnMousedown: _cache[2] || (_cache[2] = $event => (_ctx.$emit('column-mousedown', $event))),
-                      onColumnDragstart: _cache[3] || (_cache[3] = $event => (_ctx.$emit('column-dragstart', $event))),
-                      onColumnDragover: _cache[4] || (_cache[4] = $event => (_ctx.$emit('column-dragover', $event))),
-                      onColumnDragleave: _cache[5] || (_cache[5] = $event => (_ctx.$emit('column-dragleave', $event))),
-                      onColumnDrop: _cache[6] || (_cache[6] = $event => (_ctx.$emit('column-drop', $event))),
+                      onColumnClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('column-click', $event))),
+                      onColumnMousedown: _cache[1] || (_cache[1] = $event => (_ctx.$emit('column-mousedown', $event))),
+                      onColumnDragstart: _cache[2] || (_cache[2] = $event => (_ctx.$emit('column-dragstart', $event))),
+                      onColumnDragover: _cache[3] || (_cache[3] = $event => (_ctx.$emit('column-dragover', $event))),
+                      onColumnDragleave: _cache[4] || (_cache[4] = $event => (_ctx.$emit('column-dragleave', $event))),
+                      onColumnDrop: _cache[5] || (_cache[5] = $event => (_ctx.$emit('column-drop', $event))),
                       groupRowsBy: $props.groupRowsBy,
                       groupRowSortField: $props.groupRowSortField,
+                      reorderableColumns: $props.reorderableColumns,
                       resizableColumns: $props.resizableColumns,
-                      onColumnResizestart: _cache[7] || (_cache[7] = $event => (_ctx.$emit('column-resizestart', $event))),
+                      onColumnResizestart: _cache[6] || (_cache[6] = $event => (_ctx.$emit('column-resizestart', $event))),
                       sortMode: $props.sortMode,
                       sortField: $props.sortField,
                       sortOrder: $props.sortOrder,
                       multiSortMeta: $props.multiSortMeta,
                       allRowsSelected: $props.allRowsSelected,
                       empty: $props.empty,
-                      onCheckboxChange: _cache[8] || (_cache[8] = $event => (_ctx.$emit('checkbox-change', $event))),
+                      onCheckboxChange: _cache[7] || (_cache[7] = $event => (_ctx.$emit('checkbox-change', $event))),
                       filters: $props.filters,
                       filterDisplay: $props.filterDisplay,
                       filtersStore: $props.filtersStore,
-                      onFilterChange: _cache[9] || (_cache[9] = $event => (_ctx.$emit('filter-change', $event))),
-                      onFilterApply: _cache[10] || (_cache[10] = $event => (_ctx.$emit('filter-apply'))),
-                      onOperatorChange: _cache[11] || (_cache[11] = $event => (_ctx.$emit('operator-change',$event))),
-                      onMatchmodeChange: _cache[12] || (_cache[12] = $event => (_ctx.$emit('matchmode-change', $event))),
-                      onConstraintAdd: _cache[13] || (_cache[13] = $event => (_ctx.$emit('constraint-add', $event))),
-                      onConstraintRemove: _cache[14] || (_cache[14] = $event => (_ctx.$emit('constraint-remove', $event))),
-                      onApplyClick: _cache[15] || (_cache[15] = $event => (_ctx.$emit('apply-click',$event)))
-                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore"]))
+                      onFilterChange: _cache[8] || (_cache[8] = $event => (_ctx.$emit('filter-change', $event))),
+                      onFilterApply: _cache[9] || (_cache[9] = $event => (_ctx.$emit('filter-apply'))),
+                      onOperatorChange: _cache[10] || (_cache[10] = $event => (_ctx.$emit('operator-change',$event))),
+                      onMatchmodeChange: _cache[11] || (_cache[11] = $event => (_ctx.$emit('matchmode-change', $event))),
+                      onConstraintAdd: _cache[12] || (_cache[12] = $event => (_ctx.$emit('constraint-add', $event))),
+                      onConstraintRemove: _cache[13] || (_cache[13] = $event => (_ctx.$emit('constraint-remove', $event))),
+                      onApplyClick: _cache[14] || (_cache[14] = $event => (_ctx.$emit('apply-click',$event)))
+                    }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
           ]),
           ($props.filterDisplay === 'row')
-            ? (openBlock(), createBlock("tr", _hoisted_3$2, [
-                (openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
-                  return (openBlock(), createBlock(Fragment, {
+            ? (openBlock(), createElementBlock("tr", _hoisted_3$4, [
+                (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
+                  return (openBlock(), createElementBlock(Fragment, {
                     key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||i
                   }, [
                     (!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || ($props.groupRowsBy !== $options.columnProp(col, 'field'))))
-                      ? (openBlock(), createBlock("th", {
+                      ? (openBlock(), createElementBlock("th", {
                           key: 0,
-                          style: $options.getFilterColumnHeaderStyle(col),
-                          class: $options.getFilterColumnHeaderClass(col)
+                          style: normalizeStyle($options.getFilterColumnHeaderStyle(col)),
+                          class: normalizeClass($options.getFilterColumnHeaderClass(col))
                         }, [
                           ($options.columnProp(col, 'selectionMode') ==='multiple')
                             ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
                                 key: 0,
                                 checked: $props.allRowsSelected,
-                                onChange: _cache[16] || (_cache[16] = $event => (_ctx.$emit('checkbox-change', $event))),
+                                onChange: _cache[15] || (_cache[15] = $event => (_ctx.$emit('checkbox-change', $event))),
                                 disabled: $props.empty
                               }, null, 8, ["checked", "disabled"]))
                             : createCommentVNode("", true),
@@ -1270,8 +1295,8 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                                 filterApplyTemplate: col.children && col.children.filterapply,
                                 filters: $props.filters,
                                 filtersStore: $props.filtersStore,
-                                onFilterChange: _cache[17] || (_cache[17] = $event => (_ctx.$emit('filter-change', $event))),
-                                onFilterApply: _cache[18] || (_cache[18] = $event => (_ctx.$emit('filter-apply'))),
+                                onFilterChange: _cache[16] || (_cache[16] = $event => (_ctx.$emit('filter-change', $event))),
+                                onFilterApply: _cache[17] || (_cache[17] = $event => (_ctx.$emit('filter-apply'))),
                                 filterMenuStyle: $options.columnProp(col,'filterMenuStyle'),
                                 filterMenuClass: $options.columnProp(col,'filterMenuClass'),
                                 showOperator: $options.columnProp(col,'showFilterOperator'),
@@ -1281,11 +1306,11 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                                 showAddButton: $options.columnProp(col,'showAddButton'),
                                 matchModeOptions: $options.columnProp(col,'filterMatchModeOptions'),
                                 maxConstraints: $options.columnProp(col,'maxConstraints'),
-                                onOperatorChange: _cache[19] || (_cache[19] = $event => (_ctx.$emit('operator-change',$event))),
-                                onMatchmodeChange: _cache[20] || (_cache[20] = $event => (_ctx.$emit('matchmode-change', $event))),
-                                onConstraintAdd: _cache[21] || (_cache[21] = $event => (_ctx.$emit('constraint-add', $event))),
-                                onConstraintRemove: _cache[22] || (_cache[22] = $event => (_ctx.$emit('constraint-remove', $event))),
-                                onApplyClick: _cache[23] || (_cache[23] = $event => (_ctx.$emit('apply-click',$event)))
+                                onOperatorChange: _cache[18] || (_cache[18] = $event => (_ctx.$emit('operator-change',$event))),
+                                onMatchmodeChange: _cache[19] || (_cache[19] = $event => (_ctx.$emit('matchmode-change', $event))),
+                                onConstraintAdd: _cache[20] || (_cache[20] = $event => (_ctx.$emit('constraint-add', $event))),
+                                onConstraintRemove: _cache[21] || (_cache[21] = $event => (_ctx.$emit('constraint-remove', $event))),
+                                onApplyClick: _cache[22] || (_cache[22] = $event => (_ctx.$emit('apply-click',$event)))
                               }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filters", "filtersStore", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
                             : createCommentVNode("", true)
                         ], 6))
@@ -1295,21 +1320,21 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
               ]))
             : createCommentVNode("", true)
         ], 64))
-      : (openBlock(true), createBlock(Fragment, { key: 1 }, renderList($options.getHeaderRows(), (row, i) => {
-          return (openBlock(), createBlock("tr", {
+      : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($options.getHeaderRows(), (row, i) => {
+          return (openBlock(), createElementBlock("tr", {
             key: i,
             role: "row"
           }, [
-            (openBlock(true), createBlock(Fragment, null, renderList($options.getHeaderColumns(row), (col, j) => {
-              return (openBlock(), createBlock(Fragment, {
+            (openBlock(true), createElementBlock(Fragment, null, renderList($options.getHeaderColumns(row), (col, j) => {
+              return (openBlock(), createElementBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey')||$options.columnProp(col, 'field')||j
               }, [
                 (!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || ($props.groupRowsBy !== $options.columnProp(col, 'field'))) && (typeof col.children !== 'string'))
                   ? (openBlock(), createBlock(_component_DTHeaderCell, {
                       key: 0,
                       column: col,
-                      onColumnClick: _cache[24] || (_cache[24] = $event => (_ctx.$emit('column-click', $event))),
-                      onColumnMousedown: _cache[25] || (_cache[25] = $event => (_ctx.$emit('column-mousedown', $event))),
+                      onColumnClick: _cache[23] || (_cache[23] = $event => (_ctx.$emit('column-click', $event))),
+                      onColumnMousedown: _cache[24] || (_cache[24] = $event => (_ctx.$emit('column-mousedown', $event))),
                       groupRowsBy: $props.groupRowsBy,
                       groupRowSortField: $props.groupRowSortField,
                       sortMode: $props.sortMode,
@@ -1318,17 +1343,17 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                       multiSortMeta: $props.multiSortMeta,
                       allRowsSelected: $props.allRowsSelected,
                       empty: $props.empty,
-                      onCheckboxChange: _cache[26] || (_cache[26] = $event => (_ctx.$emit('checkbox-change', $event))),
+                      onCheckboxChange: _cache[25] || (_cache[25] = $event => (_ctx.$emit('checkbox-change', $event))),
                       filters: $props.filters,
                       filterDisplay: $props.filterDisplay,
                       filtersStore: $props.filtersStore,
-                      onFilterChange: _cache[27] || (_cache[27] = $event => (_ctx.$emit('filter-change', $event))),
-                      onFilterApply: _cache[28] || (_cache[28] = $event => (_ctx.$emit('filter-apply'))),
-                      onOperatorChange: _cache[29] || (_cache[29] = $event => (_ctx.$emit('operator-change',$event))),
-                      onMatchmodeChange: _cache[30] || (_cache[30] = $event => (_ctx.$emit('matchmode-change', $event))),
-                      onConstraintAdd: _cache[31] || (_cache[31] = $event => (_ctx.$emit('constraint-add', $event))),
-                      onConstraintRemove: _cache[32] || (_cache[32] = $event => (_ctx.$emit('constraint-remove', $event))),
-                      onApplyClick: _cache[33] || (_cache[33] = $event => (_ctx.$emit('apply-click',$event)))
+                      onFilterChange: _cache[26] || (_cache[26] = $event => (_ctx.$emit('filter-change', $event))),
+                      onFilterApply: _cache[27] || (_cache[27] = $event => (_ctx.$emit('filter-apply'))),
+                      onOperatorChange: _cache[28] || (_cache[28] = $event => (_ctx.$emit('operator-change',$event))),
+                      onMatchmodeChange: _cache[29] || (_cache[29] = $event => (_ctx.$emit('matchmode-change', $event))),
+                      onConstraintAdd: _cache[30] || (_cache[30] = $event => (_ctx.$emit('constraint-add', $event))),
+                      onConstraintRemove: _cache[31] || (_cache[31] = $event => (_ctx.$emit('constraint-remove', $event))),
+                      onApplyClick: _cache[32] || (_cache[32] = $event => (_ctx.$emit('apply-click',$event)))
                     }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore"]))
                   : createCommentVNode("", true)
               ], 64))
@@ -1373,25 +1398,27 @@ var script$6 = {
     }
 };
 
-const _hoisted_1$4 = /*#__PURE__*/createVNode("div", { class: "p-radiobutton-icon" }, null, -1);
+const _hoisted_1$6 = ["aria-checked"];
+const _hoisted_2$4 = /*#__PURE__*/createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
+const _hoisted_3$3 = [
+  _hoisted_2$4
+];
 
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("div", {
-    class: ['p-radiobutton p-component', {'p-radiobutton-focused': $data.focused}],
-    onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(['p-radiobutton p-component', {'p-radiobutton-focused': $data.focused}]),
+    onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
     tabindex: "0",
-    onFocus: _cache[2] || (_cache[2] = $event => ($options.onFocus($event))),
-    onBlur: _cache[3] || (_cache[3] = $event => ($options.onBlur($event))),
-    onKeydown: _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
+    onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
+    onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event))),
+    onKeydown: _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
   }, [
-    createVNode("div", {
+    createElementVNode("div", {
       ref: "box",
-      class: ['p-radiobutton-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
+      class: normalizeClass(['p-radiobutton-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
       role: "radio",
       "aria-checked": $props.checked
-    }, [
-      _hoisted_1$4
-    ], 10, ["aria-checked"])
+    }, _hoisted_3$3, 10, _hoisted_1$6)
   ], 34))
 }
 
@@ -1429,25 +1456,27 @@ var script$5 = {
     }
 };
 
+const _hoisted_1$5 = ["aria-checked", "tabindex"];
+
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("div", {
-    class: ['p-checkbox p-component', {'p-checkbox-focused': $data.focused}],
-    onClick: _cache[4] || (_cache[4] = withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["stop","prevent"]))
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(['p-checkbox p-component', {'p-checkbox-focused': $data.focused}]),
+    onClick: _cache[3] || (_cache[3] = withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["stop","prevent"]))
   }, [
-    createVNode("div", {
+    createElementVNode("div", {
       ref: "box",
-      class: ['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}],
+      class: normalizeClass(['p-checkbox-box p-component', {'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused}]),
       role: "checkbox",
       "aria-checked": $props.checked,
       tabindex: _ctx.$attrs.disabled ? null : '0',
-      onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"])),
-      onFocus: _cache[2] || (_cache[2] = $event => ($options.onFocus($event))),
-      onBlur: _cache[3] || (_cache[3] = $event => ($options.onBlur($event)))
+      onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"])),
+      onFocus: _cache[1] || (_cache[1] = $event => ($options.onFocus($event))),
+      onBlur: _cache[2] || (_cache[2] = $event => ($options.onBlur($event)))
     }, [
-      createVNode("span", {
-        class: ['p-checkbox-icon', {'pi pi-check': $props.checked}]
+      createElementVNode("span", {
+        class: normalizeClass(['p-checkbox-icon', {'pi pi-check': $props.checked}])
       }, null, 2)
-    ], 42, ["aria-checked", "tabindex"])
+    ], 42, _hoisted_1$5)
   ], 2))
 }
 
@@ -1818,13 +1847,22 @@ var script$4 = {
     }
 };
 
-const _hoisted_1$3 = {
+const _hoisted_1$4 = {
   key: 0,
   class: "p-column-title"
 };
-const _hoisted_2$2 = /*#__PURE__*/createVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
-const _hoisted_3$1 = /*#__PURE__*/createVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
-const _hoisted_4$1 = /*#__PURE__*/createVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
+const _hoisted_2$3 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-init-icon pi pi-fw pi-pencil" }, null, -1);
+const _hoisted_3$2 = [
+  _hoisted_2$3
+];
+const _hoisted_4$2 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-save-icon pi pi-fw pi-check" }, null, -1);
+const _hoisted_5$2 = [
+  _hoisted_4$2
+];
+const _hoisted_6$2 = /*#__PURE__*/createElementVNode("span", { class: "p-row-editor-cancel-icon pi pi-fw pi-times" }, null, -1);
+const _hoisted_7 = [
+  _hoisted_6$2
+];
 
 function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTRadioButton = resolveComponent("DTRadioButton");
@@ -1832,10 +1870,10 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return ($options.loading)
-    ? (openBlock(), createBlock("td", {
+    ? (openBlock(), createElementBlock("td", {
         key: 0,
-        style: $options.containerStyle,
-        class: $options.containerClass
+        style: normalizeStyle($options.containerStyle),
+        class: normalizeClass($options.containerClass)
       }, [
         (openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
           data: $props.rowData,
@@ -1846,16 +1884,16 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
           loadingOptions: $options.loadingOptions
         }, null, 8, ["data", "column", "field", "index", "frozenRow", "loadingOptions"]))
       ], 6))
-    : (openBlock(), createBlock("td", {
+    : (openBlock(), createElementBlock("td", {
         key: 1,
-        style: $options.containerStyle,
-        class: $options.containerClass,
-        onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClick && $options.onClick(...args))),
-        onKeydown: _cache[8] || (_cache[8] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
+        style: normalizeStyle($options.containerStyle),
+        class: normalizeClass($options.containerClass),
+        onClick: _cache[6] || (_cache[6] = (...args) => ($options.onClick && $options.onClick(...args))),
+        onKeydown: _cache[7] || (_cache[7] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
         role: "cell"
       }, [
         ($props.responsiveLayout === 'stack')
-          ? (openBlock(), createBlock("span", _hoisted_1$3, toDisplayString($options.columnProp('header')), 1))
+          ? (openBlock(), createElementBlock("span", _hoisted_1$4, toDisplayString($options.columnProp('header')), 1))
           : createCommentVNode("", true),
         ($props.column.children && $props.column.children.body && !$data.d_editing)
           ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), {
@@ -1888,79 +1926,75 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                   frozenRow: $props.frozenRow
                 }, null, 8, ["data", "column", "field", "index", "frozenRow"]))
               : ($options.columnProp('selectionMode'))
-                ? (openBlock(), createBlock(Fragment, { key: 4 }, [
+                ? (openBlock(), createElementBlock(Fragment, { key: 4 }, [
                     ($options.columnProp('selectionMode') === 'single')
                       ? (openBlock(), createBlock(_component_DTRadioButton, {
                           key: 0,
                           value: $props.rowData,
                           checked: $props.selected,
-                          onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex)))
+                          onChange: _cache[0] || (_cache[0] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex)))
                         }, null, 8, ["value", "checked"]))
                       : ($options.columnProp('selectionMode') ==='multiple')
                         ? (openBlock(), createBlock(_component_DTCheckbox, {
                             key: 1,
                             value: $props.rowData,
                             checked: $props.selected,
-                            onChange: _cache[2] || (_cache[2] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex)))
+                            onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex)))
                           }, null, 8, ["value", "checked"]))
                         : createCommentVNode("", true)
                   ], 64))
                 : ($options.columnProp('rowReorder'))
-                  ? (openBlock(), createBlock("i", {
+                  ? (openBlock(), createElementBlock("i", {
                       key: 5,
-                      class: ['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')]
+                      class: normalizeClass(['p-datatable-reorderablerow-handle', ($options.columnProp('rowReorderIcon') || 'pi pi-bars')])
                     }, null, 2))
                   : ($options.columnProp('expander'))
-                    ? withDirectives((openBlock(), createBlock("button", {
+                    ? withDirectives((openBlock(), createElementBlock("button", {
                         key: 6,
                         class: "p-row-toggler p-link",
-                        onClick: _cache[3] || (_cache[3] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
+                        onClick: _cache[2] || (_cache[2] = (...args) => ($options.toggleRow && $options.toggleRow(...args))),
                         type: "button"
                       }, [
-                        createVNode("span", { class: $props.rowTogglerIcon }, null, 2)
-                      ], 512)), [
+                        createElementVNode("span", {
+                          class: normalizeClass($props.rowTogglerIcon)
+                        }, null, 2)
+                      ])), [
                         [_directive_ripple]
                       ])
                     : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
-                      ? (openBlock(), createBlock(Fragment, { key: 7 }, [
+                      ? (openBlock(), createElementBlock(Fragment, { key: 7 }, [
                           (!$data.d_editing)
-                            ? withDirectives((openBlock(), createBlock("button", {
+                            ? withDirectives((openBlock(), createElementBlock("button", {
                                 key: 0,
                                 class: "p-row-editor-init p-link",
-                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
+                                onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args))),
                                 type: "button"
-                              }, [
-                                _hoisted_2$2
-                              ], 512)), [
+                              }, _hoisted_3$2)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
                           ($data.d_editing)
-                            ? withDirectives((openBlock(), createBlock("button", {
+                            ? withDirectives((openBlock(), createElementBlock("button", {
                                 key: 1,
                                 class: "p-row-editor-save p-link",
-                                onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
+                                onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args))),
                                 type: "button"
-                              }, [
-                                _hoisted_3$1
-                              ], 512)), [
+                              }, _hoisted_5$2)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
                           ($data.d_editing)
-                            ? withDirectives((openBlock(), createBlock("button", {
+                            ? withDirectives((openBlock(), createElementBlock("button", {
                                 key: 2,
                                 class: "p-row-editor-cancel p-link",
-                                onClick: _cache[6] || (_cache[6] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
+                                onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args))),
                                 type: "button"
-                              }, [
-                                _hoisted_4$1
-                              ], 512)), [
+                              }, _hoisted_7)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true)
                         ], 64))
-                      : (openBlock(), createBlock(Fragment, { key: 8 }, [
+                      : (openBlock(), createElementBlock(Fragment, { key: 8 }, [
                           createTextVNode(toDisplayString($options.resolveFieldData()), 1)
                         ], 64))
       ], 38))
@@ -2075,10 +2109,6 @@ var script$3 = {
             type: Object,
             default: null
         },
-        loading: {
-            type: Boolean,
-            default: false
-        },
         templates: {
             type: null,
             default: null
@@ -2449,76 +2479,81 @@ var script$3 = {
     }
 };
 
-const _hoisted_1$2 = {
+const _hoisted_1$3 = ["colspan"];
+const _hoisted_2$2 = ["onClick"];
+const _hoisted_3$1 = ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"];
+const _hoisted_4$1 = ["colspan"];
+const _hoisted_5$1 = {
   key: 1,
   class: "p-datatable-emptymessage",
   role: "row"
 };
+const _hoisted_6$1 = ["colspan"];
 
 function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTBodyCell = resolveComponent("DTBodyCell");
 
-  return (openBlock(), createBlock("tbody", {
+  return (openBlock(), createElementBlock("tbody", {
     ref: $options.bodyRef,
     class: "p-datatable-tbody",
     role: "rowgroup",
-    style: $options.bodyStyle
+    style: normalizeStyle($options.bodyStyle)
   }, [
     (!$props.empty)
-      ? (openBlock(true), createBlock(Fragment, { key: 0 }, renderList($props.value, (rowData, index) => {
-          return (openBlock(), createBlock(Fragment, {
+      ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($props.value, (rowData, index) => {
+          return (openBlock(), createElementBlock(Fragment, {
             key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader'
           }, [
             ($props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)))
-              ? (openBlock(), createBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", {
                   key: 0,
                   class: "p-rowgroup-header",
-                  style: $options.rowGroupHeaderStyle,
+                  style: normalizeStyle($options.rowGroupHeaderStyle),
                   role: "row"
                 }, [
-                  createVNode("td", {
+                  createElementVNode("td", {
                     colspan: $options.columnsLength - 1
                   }, [
                     ($props.expandableRowGroups)
-                      ? (openBlock(), createBlock("button", {
+                      ? (openBlock(), createElementBlock("button", {
                           key: 0,
                           class: "p-row-toggler p-link",
                           onClick: $event => ($options.onRowGroupToggle($event, rowData)),
                           type: "button"
                         }, [
-                          createVNode("span", {
-                            class: $options.rowGroupTogglerIcon(rowData)
+                          createElementVNode("span", {
+                            class: normalizeClass($options.rowGroupTogglerIcon(rowData))
                           }, null, 2)
-                        ], 8, ["onClick"]))
+                        ], 8, _hoisted_2$2))
                       : createCommentVNode("", true),
                     (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
                       data: rowData,
                       index: $options.getRowIndex(index)
                     }, null, 8, ["data", "index"]))
-                  ], 8, ["colspan"])
+                  ], 8, _hoisted_1$3)
                 ], 4))
               : createCommentVNode("", true),
             ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData): true)
-              ? (openBlock(), createBlock("tr", {
-                  class: $options.getRowClass(rowData),
-                  style: $props.rowStyle,
+              ? (openBlock(), createElementBlock("tr", {
+                  class: normalizeClass($options.getRowClass(rowData)),
+                  style: normalizeStyle($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))),
+                  onTouchend: _cache[9] || (_cache[9] = $event => ($options.onRowTouchEnd($event))),
                   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))),
+                  onMousedown: _cache[10] || (_cache[10] = $event => ($options.onRowMouseDown($event))),
                   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))),
+                  onDragleave: _cache[11] || (_cache[11] = $event => ($options.onRowDragLeave($event))),
+                  onDragend: _cache[12] || (_cache[12] = $event => ($options.onRowDragEnd($event))),
+                  onDrop: _cache[13] || (_cache[13] = $event => ($options.onRowDrop($event))),
                   role: "row"
                 }, [
-                  (openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
-                    return (openBlock(), createBlock(Fragment, {
+                  (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
+                    return (openBlock(), createElementBlock(Fragment, {
                       key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||i
                     }, [
                       ($options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)))
@@ -2535,15 +2570,15 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                             editMode: $props.editMode,
                             editing: $props.editMode === 'row' && $options.isRowEditing(rowData),
                             responsiveLayout: $props.responsiveLayout,
-                            onRadioChange: _cache[1] || (_cache[1] = $event => ($options.onRadioChange($event))),
-                            onCheckboxChange: _cache[2] || (_cache[2] = $event => ($options.onCheckboxChange($event))),
-                            onRowToggle: _cache[3] || (_cache[3] = $event => ($options.onRowToggle($event))),
-                            onCellEditInit: _cache[4] || (_cache[4] = $event => ($options.onCellEditInit($event))),
-                            onCellEditComplete: _cache[5] || (_cache[5] = $event => ($options.onCellEditComplete($event))),
-                            onCellEditCancel: _cache[6] || (_cache[6] = $event => ($options.onCellEditCancel($event))),
-                            onRowEditInit: _cache[7] || (_cache[7] = $event => ($options.onRowEditInit($event))),
-                            onRowEditSave: _cache[8] || (_cache[8] = $event => ($options.onRowEditSave($event))),
-                            onRowEditCancel: _cache[9] || (_cache[9] = $event => ($options.onRowEditCancel($event))),
+                            onRadioChange: _cache[0] || (_cache[0] = $event => ($options.onRadioChange($event))),
+                            onCheckboxChange: _cache[1] || (_cache[1] = $event => ($options.onCheckboxChange($event))),
+                            onRowToggle: _cache[2] || (_cache[2] = $event => ($options.onRowToggle($event))),
+                            onCellEditInit: _cache[3] || (_cache[3] = $event => ($options.onCellEditInit($event))),
+                            onCellEditComplete: _cache[4] || (_cache[4] = $event => ($options.onCellEditComplete($event))),
+                            onCellEditCancel: _cache[5] || (_cache[5] = $event => ($options.onCellEditCancel($event))),
+                            onRowEditInit: _cache[6] || (_cache[6] = $event => ($options.onRowEditInit($event))),
+                            onRowEditSave: _cache[7] || (_cache[7] = $event => ($options.onRowEditSave($event))),
+                            onRowEditCancel: _cache[8] || (_cache[8] = $event => ($options.onRowEditCancel($event))),
                             editingMeta: $props.editingMeta,
                             onEditingMetaChange: $options.onEditingMetaChange,
                             virtualScrollerContentProps: $props.virtualScrollerContentProps
@@ -2551,24 +2586,24 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
                         : createCommentVNode("", true)
                     ], 64))
                   }), 128))
-                ], 46, ["onClick", "onDblclick", "onContextmenu", "onKeydown", "tabindex", "onDragstart", "onDragover"]))
+                ], 46, _hoisted_3$1))
               : createCommentVNode("", true),
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
-              ? (openBlock(), createBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", {
                   class: "p-datatable-row-expansion",
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
                   role: "row"
                 }, [
-                  createVNode("td", { colspan: $options.columnsLength }, [
+                  createElementVNode("td", { colspan: $options.columnsLength }, [
                     (openBlock(), createBlock(resolveDynamicComponent($props.templates['expansion']), {
                       data: rowData,
                       index: $options.getRowIndex(index)
                     }, null, 8, ["data", "index"]))
-                  ], 8, ["colspan"])
+                  ], 8, _hoisted_4$1)
                 ]))
               : createCommentVNode("", true),
             ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
-              ? (openBlock(), createBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", {
                   class: "p-rowgroup-footer",
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subfooter',
                   role: "row"
@@ -2581,15 +2616,12 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
               : createCommentVNode("", true)
           ], 64))
         }), 128))
-      : (openBlock(), createBlock("tr", _hoisted_1$2, [
-          createVNode("td", { colspan: $options.columnsLength }, [
-            ($props.templates.empty && !$props.loading)
+      : (openBlock(), createElementBlock("tr", _hoisted_5$1, [
+          createElementVNode("td", { colspan: $options.columnsLength }, [
+            ($props.templates.empty)
               ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), { key: 0 }))
-              : createCommentVNode("", true),
-            ($props.templates.loading && $props.loading)
-              ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.loading), { key: 1 }))
               : createCommentVNode("", true)
-          ], 8, ["colspan"])
+          ], 8, _hoisted_6$1)
         ]))
   ], 4))
 }
@@ -2660,10 +2692,12 @@ var script$2 = {
     }
 };
 
+const _hoisted_1$2 = ["colspan", "rowspan"];
+
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createBlock("td", {
-    style: $options.containerStyle,
-    class: $options.containerClass,
+  return (openBlock(), createElementBlock("td", {
+    style: normalizeStyle($options.containerStyle),
+    class: normalizeClass($options.containerClass),
     role: "cell",
     colspan: $options.columnProp('colspan'),
     rowspan: $options.columnProp('rowspan')
@@ -2675,7 +2709,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["column"]))
       : createCommentVNode("", true),
     createTextVNode(" " + toDisplayString($options.columnProp('footer')), 1)
-  ], 14, ["colspan", "rowspan"]))
+  ], 14, _hoisted_1$2))
 }
 
 script$2.render = render$2;
@@ -2766,11 +2800,11 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTFooterCell = resolveComponent("DTFooterCell");
 
   return ($options.hasFooter)
-    ? (openBlock(), createBlock("tfoot", _hoisted_1$1, [
+    ? (openBlock(), createElementBlock("tfoot", _hoisted_1$1, [
         (!$props.columnGroup)
-          ? (openBlock(), createBlock("tr", _hoisted_2$1, [
-              (openBlock(true), createBlock(Fragment, null, renderList($props.columns, (col, i) => {
-                return (openBlock(), createBlock(Fragment, {
+          ? (openBlock(), createElementBlock("tr", _hoisted_2$1, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
+                return (openBlock(), createElementBlock(Fragment, {
                   key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||i
                 }, [
                   (!$options.columnProp(col,'hidden'))
@@ -2782,13 +2816,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                 ], 64))
               }), 128))
             ]))
-          : (openBlock(true), createBlock(Fragment, { key: 1 }, renderList($options.getFooterRows(), (row, i) => {
-              return (openBlock(), createBlock("tr", {
+          : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($options.getFooterRows(), (row, i) => {
+              return (openBlock(), createElementBlock("tr", {
                 key: i,
                 role: "row"
               }, [
-                (openBlock(true), createBlock(Fragment, null, renderList($options.getFooterColumns(row), (col, j) => {
-                  return (openBlock(), createBlock(Fragment, {
+                (openBlock(true), createElementBlock(Fragment, null, renderList($options.getFooterColumns(row), (col, j) => {
+                  return (openBlock(), createElementBlock(Fragment, {
                     key: $options.columnProp(col,'columnKey')||$options.columnProp(col,'field')||j
                   }, [
                     (!$options.columnProp(col,'hidden'))
@@ -2820,7 +2854,7 @@ var script = {
             default: null
         },
         dataKey: {
-            type: String,
+            type: [String, Function],
             default: null
         },
         rows: {
@@ -3977,7 +4011,7 @@ var script = {
                 let dragIndex = DomHandler.index(this.draggedColumn);
                 let dropIndex = DomHandler.index(this.findParentHeader(event.target));
                 let allowDrop = (dragIndex !== dropIndex);
-                if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dragIndex - dropIndex === 1 && this.dropPosition === 1))) {
+                if (allowDrop && ((dropIndex - dragIndex === 1 && this.dropPosition === -1) || (dropIndex - dragIndex === -1 && this.dropPosition === 1))) {
                     allowDrop = false;
                 }
 
@@ -4529,7 +4563,7 @@ var script = {
                 let orderedColumns = [];
                 for (let columnKey of this.d_columnOrder) {
                     let column = this.findColumnByKey(cols, columnKey);
-                    if (column) {
+                    if (column && !this.columnProp(column, 'hidden')) {
                         orderedColumns.push(column);
                     }
                 }
@@ -4676,18 +4710,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTTableFooter = resolveComponent("DTTableFooter");
   const _component_DTVirtualScroller = resolveComponent("DTVirtualScroller");
 
-  return (openBlock(), createBlock("div", {
-    class: $options.containerClass,
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass($options.containerClass),
     "data-scrollselectors": ".p-datatable-wrapper"
   }, [
     renderSlot(_ctx.$slots, "default"),
     ($props.loading)
-      ? (openBlock(), createBlock("div", _hoisted_1, [
-          createVNode("i", { class: $options.loadingIconClass }, null, 2)
+      ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          (_ctx.$slots.loading)
+            ? renderSlot(_ctx.$slots, "loading", { key: 0 })
+            : (openBlock(), createElementBlock("i", {
+                key: 1,
+                class: normalizeClass($options.loadingIconClass)
+              }, null, 2))
         ]))
       : createCommentVNode("", true),
     (_ctx.$slots.header)
-      ? (openBlock(), createBlock("div", _hoisted_2, [
+      ? (openBlock(), createElementBlock("div", _hoisted_2, [
           renderSlot(_ctx.$slots, "header")
         ]))
       : createCommentVNode("", true),
@@ -4702,7 +4741,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           rowsPerPageOptions: $props.rowsPerPageOptions,
           currentPageReportTemplate: $props.currentPageReportTemplate,
           class: "p-paginator-top",
-          onPage: _cache[1] || (_cache[1] = $event => ($options.onPage($event))),
+          onPage: _cache[0] || (_cache[0] = $event => ($options.onPage($event))),
           alwaysShow: $props.alwaysShowPaginator
         }, createSlots({ _: 2 }, [
           (_ctx.$slots.paginatorstart)
@@ -4723,9 +4762,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             : undefined
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
-    createVNode("div", {
+    createElementVNode("div", {
       class: "p-datatable-wrapper",
-      style: { maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' }
+      style: normalizeStyle({ maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' })
     }, [
       createVNode(_component_DTVirtualScroller, mergeProps($props.virtualScrollerOptions, {
         items: $options.processedData,
@@ -4736,11 +4775,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         showSpacer: false
       }), {
         content: withCtx((slotProps) => [
-          createVNode("table", {
+          createElementVNode("table", {
             ref: "table",
             role: "table",
-            class: [$props.tableClass, 'p-datatable-table'],
-            style: [$props.tableStyle, slotProps.spacerStyle]
+            class: normalizeClass([$props.tableClass, 'p-datatable-table']),
+            style: normalizeStyle([$props.tableStyle, slotProps.spacerStyle])
           }, [
             createVNode(_component_DTTableHeader, {
               columnGroup: $options.headerColumnGroup,
@@ -4748,6 +4787,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               rowGroupMode: $props.rowGroupMode,
               groupRowsBy: $props.groupRowsBy,
               groupRowSortField: $options.groupRowSortField,
+              reorderableColumns: $props.reorderableColumns,
               resizableColumns: $props.resizableColumns,
               allRowsSelected: $options.allRowsSelected,
               empty: $options.empty,
@@ -4758,17 +4798,17 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               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))),
+              onColumnClick: _cache[1] || (_cache[1] = $event => ($options.onColumnHeaderClick($event))),
+              onColumnMousedown: _cache[2] || (_cache[2] = $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"]),
+              onColumnDragstart: _cache[3] || (_cache[3] = $event => ($options.onColumnHeaderDragStart($event))),
+              onColumnDragover: _cache[4] || (_cache[4] = $event => ($options.onColumnHeaderDragOver($event))),
+              onColumnDragleave: _cache[5] || (_cache[5] = $event => ($options.onColumnHeaderDragLeave($event))),
+              onColumnDrop: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDrop($event))),
+              onColumnResizestart: _cache[7] || (_cache[7] = $event => ($options.onColumnResizeStart($event))),
+              onCheckboxChange: _cache[8] || (_cache[8] = $event => ($options.toggleRowsWithCheckbox($event)))
+            }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "onFilterChange", "onFilterApply"]),
             ($props.frozenValue)
               ? (openBlock(), createBlock(_component_DTTableBody, {
                   key: 0,
@@ -4798,37 +4838,36 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                   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))),
+                  onRowClick: _cache[9] || (_cache[9] = $event => ($options.onRowClick($event))),
+                  onRowDblclick: _cache[10] || (_cache[10] = $event => ($options.onRowDblClick($event))),
+                  onRowRightclick: _cache[11] || (_cache[11] = $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[12] || (_cache[12] = $event => ($options.onRowDragStart($event))),
+                  onRowDragover: _cache[13] || (_cache[13] = $event => ($options.onRowDragOver($event))),
+                  onRowDragleave: _cache[14] || (_cache[14] = $event => ($options.onRowDragLeave($event))),
+                  onRowDragend: _cache[15] || (_cache[15] = $event => ($options.onRowDragEnd($event))),
+                  onRowDrop: _cache[16] || (_cache[16] = $event => ($options.onRowDrop($event))),
+                  onRowToggle: _cache[17] || (_cache[17] = $event => ($options.toggleRow($event))),
+                  onRadioChange: _cache[18] || (_cache[18] = $event => ($options.toggleRowWithRadio($event))),
+                  onCheckboxChange: _cache[19] || (_cache[19] = $event => ($options.toggleRowWithCheckbox($event))),
+                  onCellEditInit: _cache[20] || (_cache[20] = $event => ($options.onCellEditInit($event))),
+                  onCellEditComplete: _cache[21] || (_cache[21] = $event => ($options.onCellEditComplete($event))),
+                  onCellEditCancel: _cache[22] || (_cache[22] = $event => ($options.onCellEditCancel($event))),
+                  onRowEditInit: _cache[23] || (_cache[23] = $event => ($options.onRowEditInit($event))),
+                  onRowEditSave: _cache[24] || (_cache[24] = $event => ($options.onRowEditSave($event))),
+                  onRowEditCancel: _cache[25] || (_cache[25] = $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"]))
+                }, 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", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]))
               : createCommentVNode("", true),
             createVNode(_component_DTTableBody, {
               value: $options.dataToRender(slotProps.rows),
-              class: slotProps.styleClass,
+              class: normalizeClass(slotProps.styleClass),
               columns: slotProps.columns,
               empty: $options.empty,
               dataKey: $props.dataKey,
@@ -4853,34 +4892,33 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               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))),
+              onRowClick: _cache[26] || (_cache[26] = $event => ($options.onRowClick($event))),
+              onRowDblclick: _cache[27] || (_cache[27] = $event => ($options.onRowDblClick($event))),
+              onRowRightclick: _cache[28] || (_cache[28] = $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))),
+              onRowDragstart: _cache[29] || (_cache[29] = $event => ($options.onRowDragStart($event))),
+              onRowDragover: _cache[30] || (_cache[30] = $event => ($options.onRowDragOver($event))),
+              onRowDragleave: _cache[31] || (_cache[31] = $event => ($options.onRowDragLeave($event))),
+              onRowDragend: _cache[32] || (_cache[32] = $event => ($options.onRowDragEnd($event))),
+              onRowDrop: _cache[33] || (_cache[33] = $event => ($options.onRowDrop($event))),
+              onRowToggle: _cache[34] || (_cache[34] = $event => ($options.toggleRow($event))),
+              onRadioChange: _cache[35] || (_cache[35] = $event => ($options.toggleRowWithRadio($event))),
+              onCheckboxChange: _cache[36] || (_cache[36] = $event => ($options.toggleRowWithCheckbox($event))),
+              onCellEditInit: _cache[37] || (_cache[37] = $event => ($options.onCellEditInit($event))),
+              onCellEditComplete: _cache[38] || (_cache[38] = $event => ($options.onCellEditComplete($event))),
+              onCellEditCancel: _cache[39] || (_cache[39] = $event => ($options.onCellEditCancel($event))),
+              onRowEditInit: _cache[40] || (_cache[40] = $event => ($options.onRowEditInit($event))),
+              onRowEditSave: _cache[41] || (_cache[41] = $event => ($options.onRowEditSave($event))),
+              onRowEditCancel: _cache[42] || (_cache[42] = $event => ($options.onRowEditCancel($event))),
               editingMeta: $data.d_editingMeta,
               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"]),
+            }, null, 8, ["value", "class", "columns", "empty", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "virtualScrollerContentProps", "isVirtualScrollerDisabled"]),
             createVNode(_component_DTTableFooter, {
               columnGroup: $options.footerColumnGroup,
               columns: slotProps.columns
@@ -4901,7 +4939,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           rowsPerPageOptions: $props.rowsPerPageOptions,
           currentPageReportTemplate: $props.currentPageReportTemplate,
           class: "p-paginator-bottom",
-          onPage: _cache[44] || (_cache[44] = $event => ($options.onPage($event))),
+          onPage: _cache[43] || (_cache[43] = $event => ($options.onPage($event))),
           alwaysShow: $props.alwaysShowPaginator
         }, createSlots({ _: 2 }, [
           (_ctx.$slots.paginatorstart)
@@ -4923,16 +4961,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
         ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
       : createCommentVNode("", true),
     (_ctx.$slots.footer)
-      ? (openBlock(), createBlock("div", _hoisted_3, [
+      ? (openBlock(), createElementBlock("div", _hoisted_3, [
           renderSlot(_ctx.$slots, "footer")
         ]))
       : createCommentVNode("", true),
-    createVNode("div", _hoisted_4, null, 512),
+    createElementVNode("div", _hoisted_4, null, 512),
     ($props.reorderableColumns)
-      ? (openBlock(), createBlock("span", _hoisted_5, null, 512))
+      ? (openBlock(), createElementBlock("span", _hoisted_5, null, 512))
       : createCommentVNode("", true),
     ($props.reorderableColumns)
-      ? (openBlock(), createBlock("span", _hoisted_6, null, 512))
+      ? (openBlock(), createElementBlock("span", _hoisted_6, null, 512))
       : createCommentVNode("", true)
   ], 2))
 }
@@ -4964,9 +5002,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "\n.p-datatable {\n    position: relative;\n}\n.p-datatable table {\n    border-collapse: collapse;\n    min-width: 100%;\n    table-layout: fixed;\n}\n.p-datatable .p-sortable-column {\n    cursor: pointer;\n    -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";
+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.p-datatable-scrollable .p-virtualscroller > .p-datatable-table {\n    display: inline-block; /* For Safari */\n}\n\n/* Resizable */\n.p-datatable-resizable > .p-datatable-wrapper {\n    overflow-x: auto;\n}\n.p-datatable-resizable .p-datatable-thead > tr > th,\n.p-datatable-resizable .p-datatable-tfoot > tr > td,\n.p-datatable-resizable .p-datatable-tbody > tr > td {\n    overflow: hidden;\n    white-space: nowrap;\n}\n.p-datatable-resizable .p-resizable-column:not(.p-frozen-column) {\n    background-clip: padding-box;\n    position: relative;\n}\n.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {\n    display: none;\n}\n.p-datatable .p-column-resizer {\n    display: block;\n    position: absolute !important;\n    top: 0;\n    right: 0;\n    margin: 0;\n    width: .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.p-reorderable-column,\n.p-datatable-reorderablerow-handle {\n    cursor: move;\n}\n\n/* Loader */\n.p-datatable .p-datatable-loading-overlay {\n    position: absolute;\n    display: -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;
 
-export default script;
+export { script as default };