primevue 3.30.0 → 3.30.2

package/datatable/datatable.esm.js

@@ -9,13 +9,13 @@ import BaseComponent from 'primevue/basecomponent';
 import { useStyle } from 'primevue/usestyle';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import ChevronRightIcon from 'primevue/icons/chevronright';
+import { mergeProps, resolveComponent, openBlock, createElementBlock, createElementVNode, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, withKeys, withModifiers, resolveDirective, toDisplayString, Fragment, withDirectives, createTextVNode, renderList, normalizeProps, guardReactiveProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
 import BarsIcon from 'primevue/icons/bars';
 import CheckIcon from 'primevue/icons/check';
 import PencilIcon from 'primevue/icons/pencil';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, withKeys, withModifiers, resolveDirective, toDisplayString, Fragment, withDirectives, createTextVNode, renderList, normalizeProps, guardReactiveProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import FocusTrap from 'primevue/focustrap';
@@ -55,7 +55,9 @@ var classes = {
       'p-datatable-striped': props.stripedRows,
       'p-datatable-gridlines': props.showGridlines,
       'p-datatable-grouped-header': instance.headerColumnGroup != null,
-      'p-datatable-grouped-footer': instance.footerColumnGroup != null
+      'p-datatable-grouped-footer': instance.footerColumnGroup != null,
+      'p-datatable-sm': props.size === 'small',
+      'p-datatable-lg': props.size === 'large'
     }];
   },
   loadingOverlay: 'p-datatable-loading-overlay p-component-overlay',
@@ -514,6 +516,10 @@ var script$b = {
       type: Boolean,
       "default": false
     },
+    size: {
+      type: String,
+      "default": null
+    },
     tableStyle: {
       type: null,
       "default": null
@@ -568,7 +574,7 @@ var script$a = {
   },
   methods: {
     getColumnPT: function getColumnPT(key) {
-      return this.ptmo(this.getColumnProp(), key, {
+      var columnMetaData = {
         props: this.column.props,
         parent: {
           props: this.$props,
@@ -580,7 +586,10 @@ var script$a = {
           focused: this.focused,
           disabled: this.$attrs.disabled
         }
-      });
+      };
+      return mergeProps(this.ptm("column.".concat(key), {
+        column: columnMetaData
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
@@ -687,7 +696,7 @@ var script$9 = {
   },
   methods: {
     getColumnPT: function getColumnPT(key) {
-      return this.ptmo(this.getColumnProp(), key, {
+      var columnMetaData = {
         props: this.column.props,
         parent: {
           props: this.$props,
@@ -699,7 +708,10 @@ var script$9 = {
           focused: this.focused,
           disabled: this.$attrs.disabled
         }
-      });
+      };
+      return mergeProps(this.ptm("column.".concat(key), {
+        column: columnMetaData
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
@@ -761,12 +773,6 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$9.render = render$9;
 
-function _typeof$e(obj) { "@babel/helpers - typeof"; return _typeof$e = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$e(obj); }
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$e(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$e(obj, key, value) { key = _toPropertyKey$e(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$e(arg) { var key = _toPrimitive$e(arg, "string"); return _typeof$e(key) === "symbol" ? key : String(key); }
-function _toPrimitive$e(input, hint) { if (_typeof$e(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$e(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var script$8 = {
   name: 'BodyCell',
   hostName: 'DataTable',
@@ -888,6 +894,7 @@ var script$8 = {
       return ObjectUtils.getVNodeProp(this.column, prop);
     },
     getColumnPT: function getColumnPT(key) {
+      var _this$$parentInstance, _this$$parentInstance2;
       var columnMetaData = {
         props: this.column.props,
         parent: {
@@ -895,12 +902,14 @@ var script$8 = {
           state: this.$data
         },
         context: {
-          index: this.index
+          index: this.index,
+          size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size,
+          showGridlines: (_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.showGridlines
         }
       };
-      return _objectSpread$e(_objectSpread$e({}, this.ptm("column.".concat(key), {
+      return mergeProps(this.ptm("column.".concat(key), {
         column: columnMetaData
-      })), this.ptmo(this.getColumnProp(), key, columnMetaData));
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
@@ -1228,12 +1237,12 @@ var script$8 = {
   }
 };
 
-function _typeof$d(obj) { "@babel/helpers - typeof"; return _typeof$d = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$d(obj); }
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty$d(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$d(obj, key, value) { key = _toPropertyKey$d(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$d(arg) { var key = _toPrimitive$d(arg, "string"); return _typeof$d(key) === "symbol" ? key : String(key); }
-function _toPrimitive$d(input, hint) { if (_typeof$d(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$d(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$9(obj) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$9(obj); }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty$9(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$9(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$9(arg) { var key = _toPrimitive$9(arg, "string"); return _typeof$9(key) === "symbol" ? key : String(key); }
+function _toPrimitive$9(input, hint) { if (_typeof$9(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$9(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _hoisted_1$5 = ["data-p-selection-column", "data-p-editable-column", "data-p-cell-editing", "data-p-frozen-column"];
 var _hoisted_2$2 = ["aria-expanded", "aria-controls", "aria-label"];
 var _hoisted_3$2 = ["aria-label"];
@@ -1251,7 +1260,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
     style: $options.containerStyle,
     "class": $options.containerClass,
     role: "cell"
-  }, _objectSpread$d(_objectSpread$d({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
     data: $props.rowData,
     column: $props.column,
     field: $options.field,
@@ -1269,7 +1278,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       return $options.onKeyDown && $options.onKeyDown.apply($options, arguments);
     }),
     role: "cell"
-  }, _objectSpread$d(_objectSpread$d({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell')), {
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell')), {
     "data-p-selection-column": $options.columnProp('selectionMode') != null,
     "data-p-editable-column": $options.isEditable(),
     "data-p-cell-editing": $data.d_editing,
@@ -1333,14 +1342,13 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, [$props.column.children && $props.column.children.rowreordericon ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowreordericon), {
     key: 0,
     "class": normalizeClass(_ctx.cx('rowReorderIcon'))
-  }, null, 8, ["class"])) : $options.columnProp('rowReorderIcon') ? (openBlock(), createElementBlock("i", {
+  }, null, 8, ["class"])) : $options.columnProp('rowReorderIcon') ? (openBlock(), createElementBlock("i", mergeProps({
     key: 1,
-    "class": normalizeClass([_ctx.cx('rowReorderIcon'), $options.columnProp('rowReorderIcon')])
-  }, null, 2)) : (openBlock(), createBlock(_component_BarsIcon, {
+    "class": [_ctx.cx('rowReorderIcon'), $options.columnProp('rowReorderIcon')]
+  }, $options.getColumnPT('rowReorderIcon')), null, 16)) : (openBlock(), createBlock(_component_BarsIcon, mergeProps({
     key: 2,
-    "class": normalizeClass(_ctx.cx('rowReorderIcon')),
-    "data-pc-section": "rowreordericon"
-  }, null, 8, ["class"]))], 64)) : $options.columnProp('expander') ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
+    "class": _ctx.cx('rowReorderIcon')
+  }, $options.getColumnPT('rowReorderIcon')), null, 16, ["class"]))], 64)) : $options.columnProp('expander') ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
     key: 6,
     "class": _ctx.cx('rowToggler'),
     type: "button",
@@ -1564,18 +1572,32 @@ var script$7 = {
     columnProp: function columnProp(col, prop) {
       return ObjectUtils.getVNodeProp(col, prop);
     },
-    getColumnPT: function getColumnPT(column, key) {
-      return this.ptmo(this.getColumnProp(column), key, {
-        props: column.props,
+    getColumnPT: function getColumnPT(currentColumn, key) {
+      var columnMetaData = {
+        props: currentColumn.props,
         parent: {
           props: this.$props,
           state: this.$data
         }
-      });
+      };
+      return mergeProps(this.ptm("column.".concat(key), {
+        column: columnMetaData
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(currentColumn), key, columnMetaData));
     },
     getColumnProp: function getColumnProp(column) {
       return column.props && column.props.pt ? column.props.pt : undefined; //@todo
     },
+    getBodyRowPTOptions: function getBodyRowPTOptions(key, rowdata, index) {
+      var _this$$parentInstance, _this$$parentInstance2, _this$$parentInstance3;
+      return this.ptm(key, {
+        context: {
+          index: index,
+          selectable: ((_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.rowHover) || ((_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.selectionMode),
+          selected: this.isSelected(rowdata),
+          stripedRows: ((_this$$parentInstance3 = this.$parentInstance) === null || _this$$parentInstance3 === void 0 || (_this$$parentInstance3 = _this$$parentInstance3.$parentInstance) === null || _this$$parentInstance3 === void 0 ? void 0 : _this$$parentInstance3.stripedRows) || false
+        }
+      });
+    },
     shouldRenderRowGroupHeader: function shouldRenderRowGroupHeader(value, rowData, i) {
       var currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
       var prevRowData = value[i - 1];
@@ -1865,6 +1887,14 @@ var script$7 = {
     },
     nameAttributeSelector: function nameAttributeSelector() {
       return UniqueComponentId();
+    },
+    ptmTBodyOptions: function ptmTBodyOptions() {
+      var _this$$parentInstance4;
+      return {
+        context: {
+          scrollable: (_this$$parentInstance4 = this.$parentInstance) === null || _this$$parentInstance4 === void 0 || (_this$$parentInstance4 = _this$$parentInstance4.$parentInstance) === null || _this$$parentInstance4 === void 0 ? void 0 : _this$$parentInstance4.scrollable
+        }
+      };
     }
   },
   components: {
@@ -1874,12 +1904,12 @@ var script$7 = {
   }
 };
 
-function _typeof$c(obj) { "@babel/helpers - typeof"; return _typeof$c = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$c(obj); }
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$c(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$c(obj, key, value) { key = _toPropertyKey$c(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$c(arg) { var key = _toPrimitive$c(arg, "string"); return _typeof$c(key) === "symbol" ? key : String(key); }
-function _toPrimitive$c(input, hint) { if (_typeof$c(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$c(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$8(obj) { "@babel/helpers - typeof"; return _typeof$8 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$8(obj); }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$8(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$8(obj, key, value) { key = _toPropertyKey$8(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$8(arg) { var key = _toPrimitive$8(arg, "string"); return _typeof$8(key) === "symbol" ? key : String(key); }
+function _toPrimitive$8(input, hint) { if (_typeof$8(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$8(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _hoisted_1$4 = ["colspan"];
 var _hoisted_2$1 = ["onClick"];
 var _hoisted_3$1 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover", "data-p-selectable-row", "data-p-highlight", "data-p-highlight-contextmenu"];
@@ -1896,7 +1926,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('tbody'),
     role: "rowgroup",
     style: $options.bodyStyle
-  }, _ctx.ptm('tbody')), [!$props.empty ? (openBlock(true), createElementBlock(Fragment, {
+  }, _ctx.ptm('tbody', $options.ptmTBodyOptions)), [!$props.empty ? (openBlock(true), createElementBlock(Fragment, {
     key: 0
   }, renderList($props.value, function (rowData, index) {
     return openBlock(), createElementBlock(Fragment, null, [$props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)) ? (openBlock(), createElementBlock("tr", mergeProps({
@@ -1906,14 +1936,16 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       role: "row"
     }, _ctx.ptm('rowGroupHeader')), [createElementVNode("td", mergeProps({
       colspan: $options.columnsLength - 1
-    }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$props.expandableRowGroups ? (openBlock(), createElementBlock("button", mergeProps({
+    }, _objectSpread$8(_objectSpread$8({}, _ctx.ptm('column.root')), _ctx.ptm('column.bodyCell')), {
+      "data-pc-section": "bodycell"
+    }), [$props.expandableRowGroups ? (openBlock(), createElementBlock("button", mergeProps({
       key: 0,
       "class": _ctx.cx('rowGroupToggler'),
       onClick: function onClick($event) {
         return $options.onRowGroupToggle($event, rowData);
       },
       type: "button"
-    }, $options.getColumnPT('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
+    }, _ctx.ptm('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
       key: 0,
       expanded: $options.isRowGroupExpanded(rowData)
     }, null, 8, ["expanded"])) : (openBlock(), createElementBlock(Fragment, {
@@ -1921,16 +1953,16 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     }, [$options.isRowGroupExpanded(rowData) && $props.expandedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
       key: 0,
       "class": [_ctx.cx('rowGroupTogglerIcon'), $props.expandedRowIcon]
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
       key: 1,
       "class": _ctx.cx('rowGroupTogglerIcon')
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon ? (openBlock(), createElementBlock("span", mergeProps({
       key: 2,
       "class": [_ctx.cx('rowGroupTogglerIcon'), $props.collapsedRowIcon]
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
       key: 3,
       "class": _ctx.cx('rowGroupTogglerIcon')
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16, _hoisted_2$1)) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : createCommentVNode("", true)], 64))], 16, _hoisted_2$1)) : createCommentVNode("", true), (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
       data: rowData,
       index: $options.getRowIndex(index)
     }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData) : true) ? (openBlock(), createElementBlock("tr", mergeProps({
@@ -1973,7 +2005,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       onDrop: _cache[13] || (_cache[13] = function ($event) {
         return $options.onRowDrop($event);
       })
-    }, _ctx.ptm('bodyRow'), {
+    }, $options.getBodyRowPTOptions('bodyRow', rowData, index), {
       "data-p-selectable-row": $props.selectionMode ? true : false,
       "data-p-highlight": $props.selection && $options.isSelected(rowData),
       "data-p-highlight-contextmenu": $props.contextMenuSelection && $options.isSelectedWithContextMenu(rowData)
@@ -2035,7 +2067,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       role: "row"
     }, _ctx.ptm('rowExpansion')), [createElementVNode("td", mergeProps({
       colspan: $options.columnsLength
-    }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['expansion']), {
+    }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['expansion']), {
       data: rowData,
       index: $options.getRowIndex(index)
     }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16, _hoisted_4)) : createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)) ? (openBlock(), createElementBlock("tr", mergeProps({
@@ -2044,7 +2076,9 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       role: "row"
     }, _ctx.ptm('rowGroupFooter')), [createElementVNode("td", mergeProps({
       colspan: $options.columnsLength - 1
-    }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
+    }, _objectSpread$8(_objectSpread$8({}, _ctx.ptm('column.root')), _ctx.ptm('column.footerCell')), {
+      "data-pc-section": "footercell"
+    }), [(openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
       data: rowData,
       index: $options.getRowIndex(index)
     }, null, 8, ["data", "index"]))], 16, _hoisted_6)], 16)) : createCommentVNode("", true)], 64);
@@ -2054,19 +2088,13 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     role: "row"
   }, _ctx.ptm('emptyMessage')), [createElementVNode("td", mergeProps({
     colspan: $options.columnsLength
-  }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$props.templates.empty ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), {
+  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$props.templates.empty ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), {
     key: 0
   })) : createCommentVNode("", true)], 16, _hoisted_7)], 16))], 16);
 }
 
 script$7.render = render$7;
 
-function _typeof$b(obj) { "@babel/helpers - typeof"; return _typeof$b = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$b(obj); }
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty$b(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$b(obj, key, value) { key = _toPropertyKey$b(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$b(arg) { var key = _toPrimitive$b(arg, "string"); return _typeof$b(key) === "symbol" ? key : String(key); }
-function _toPrimitive$b(input, hint) { if (_typeof$b(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$b(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var script$6 = {
   name: 'FooterCell',
   hostName: 'DataTable',
@@ -2101,6 +2129,7 @@ var script$6 = {
       return ObjectUtils.getVNodeProp(this.column, prop);
     },
     getColumnPT: function getColumnPT(key) {
+      var _this$$parentInstance, _this$$parentInstance2;
       var columnMetaData = {
         props: this.column.props,
         parent: {
@@ -2108,12 +2137,14 @@ var script$6 = {
           state: this.$data
         },
         context: {
-          index: this.index
+          index: this.index,
+          size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size,
+          showGridlines: ((_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.showGridlines) || false
         }
       };
-      return _objectSpread$b(_objectSpread$b({}, this.ptm("column.".concat(key), {
+      return mergeProps(this.ptm("column.".concat(key), {
         column: columnMetaData
-      })), this.ptmo(this.getColumnProp(), key, columnMetaData));
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
@@ -2151,12 +2182,12 @@ var script$6 = {
   }
 };
 
-function _typeof$a(obj) { "@babel/helpers - typeof"; return _typeof$a = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$a(obj); }
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty$a(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$a(obj, key, value) { key = _toPropertyKey$a(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$a(arg) { var key = _toPrimitive$a(arg, "string"); return _typeof$a(key) === "symbol" ? key : String(key); }
-function _toPrimitive$a(input, hint) { if (_typeof$a(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$a(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$7(obj) { "@babel/helpers - typeof"; return _typeof$7 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$7(obj); }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$7(obj, key, value) { key = _toPropertyKey$7(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$7(arg) { var key = _toPrimitive$7(arg, "string"); return _typeof$7(key) === "symbol" ? key : String(key); }
+function _toPrimitive$7(input, hint) { if (_typeof$7(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$7(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _hoisted_1$3 = ["colspan", "rowspan"];
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("td", mergeProps({
@@ -2165,7 +2196,7 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     role: "cell",
     colspan: $options.columnProp('colspan'),
     rowspan: $options.columnProp('rowspan')
-  }, _objectSpread$a(_objectSpread$a({}, $options.getColumnPT('root')), $options.getColumnPT('footerCell'))), [$props.column.children && $props.column.children.footer ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.footer), {
+  }, _objectSpread$7(_objectSpread$7({}, $options.getColumnPT('root')), $options.getColumnPT('footerCell'))), [$props.column.children && $props.column.children.footer ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.footer), {
     key: 0,
     column: $props.column
   }, null, 8, ["column"])) : createCommentVNode("", true), createTextVNode(" " + toDisplayString($options.columnProp('footer')), 1)], 16, _hoisted_1$3);
@@ -2173,7 +2204,6 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$6.render = render$6;
 
-function _typeof$9(obj) { "@babel/helpers - typeof"; return _typeof$9 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$9(obj); }
 function _toConsumableArray$2(arr) { return _arrayWithoutHoles$2(arr) || _iterableToArray$2(arr) || _unsupportedIterableToArray$2(arr) || _nonIterableSpread$2(); }
 function _nonIterableSpread$2() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray$2(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -2181,11 +2211,6 @@ function _arrayWithoutHoles$2(arr) { if (Array.isArray(arr)) return _arrayLikeTo
 function _createForOfIteratorHelper$2(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$2(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$2(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$2(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$2(o, minLen); }
 function _arrayLikeToArray$2(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty$9(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$9(obj, key, value) { key = _toPropertyKey$9(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$9(arg) { var key = _toPrimitive$9(arg, "string"); return _typeof$9(key) === "symbol" ? key : String(key); }
-function _toPrimitive$9(input, hint) { if (_typeof$9(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$9(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var script$5 = {
   name: 'TableFooter',
   hostName: 'DataTable',
@@ -2212,12 +2237,13 @@ var script$5 = {
           state: this.$data
         },
         context: {
-          type: 'header'
+          type: 'footer',
+          scrollable: this.ptmTFootOptions.context.scrollable
         }
       };
-      return _objectSpread$9(_objectSpread$9({}, this.ptm("columnGroup.".concat(key), {
+      return mergeProps(this.ptm("columnGroup.".concat(key), {
         columnGroup: columnGroupMetaData
-      })), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
+      }), this.ptm("columnGroup.".concat(key), columnGroupMetaData), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
     },
     getColumnGroupProps: function getColumnGroupProps() {
       return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
@@ -2233,9 +2259,9 @@ var script$5 = {
           index: index
         }
       };
-      return _objectSpread$9(_objectSpread$9({}, this.ptm("row.".concat(key), {
+      return mergeProps(this.ptm("row.".concat(key), {
         row: rowMetaData
-      })), this.ptmo(this.getRowProp(row), key, rowMetaData));
+      }), this.ptm("row.".concat(key), rowMetaData), this.ptmo(this.getRowProp(row), key, rowMetaData));
     },
     getRowProp: function getRowProp(row) {
       return row.props && row.props.pt ? row.props.pt : undefined; //@todo
@@ -2296,6 +2322,14 @@ var script$5 = {
         }
       }
       return hasFooter;
+    },
+    ptmTFootOptions: function ptmTFootOptions() {
+      var _this$$parentInstance;
+      return {
+        context: {
+          scrollable: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.scrollable
+        }
+      };
     }
   },
   components: {
@@ -2303,12 +2337,12 @@ var script$5 = {
   }
 };
 
-function _typeof$8(obj) { "@babel/helpers - typeof"; return _typeof$8 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$8(obj); }
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty$8(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$8(obj, key, value) { key = _toPropertyKey$8(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$8(arg) { var key = _toPrimitive$8(arg, "string"); return _typeof$8(key) === "symbol" ? key : String(key); }
-function _toPrimitive$8(input, hint) { if (_typeof$8(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$8(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$6(obj) { "@babel/helpers - typeof"; return _typeof$6 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$6(obj); }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$6(obj, key, value) { key = _toPropertyKey$6(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$6(arg) { var key = _toPrimitive$6(arg, "string"); return _typeof$6(key) === "symbol" ? key : String(key); }
+function _toPrimitive$6(input, hint) { if (_typeof$6(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$6(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTFooterCell = resolveComponent("DTFooterCell");
   return $options.hasFooter ? (openBlock(), createElementBlock("tfoot", mergeProps({
@@ -2316,7 +2350,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('tfoot'),
     style: _ctx.sx('tfoot'),
     role: "rowgroup"
-  }, $props.columnGroup ? _objectSpread$8(_objectSpread$8({}, _ctx.ptm('tfoot')), $options.getColumnGroupPT('root')) : _ctx.ptm('tfoot'), {
+  }, $props.columnGroup ? _objectSpread$6(_objectSpread$6({}, _ctx.ptm('tfoot', $options.ptmTFootOptions)), $options.getColumnGroupPT('root')) : _ctx.ptm('tfoot', $options.ptmTFootOptions), {
     "data-pc-section": "tfoot"
   }), [!$props.columnGroup ? (openBlock(), createElementBlock("tr", mergeProps({
     key: 0,
@@ -2335,7 +2369,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     return openBlock(), createElementBlock("tr", mergeProps({
       key: i,
       role: "row"
-    }, _objectSpread$8(_objectSpread$8({}, _ctx.ptm('footerRow')), $options.getRowPT(row, 'root', i))), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.getFooterColumns(row), function (col, j) {
+    }, _objectSpread$6(_objectSpread$6({}, _ctx.ptm('footerRow')), $options.getRowPT(row, 'root', i))), [(openBlock(true), createElementBlock(Fragment, null, renderList($options.getFooterColumns(row), function (col, j) {
       return openBlock(), createElementBlock(Fragment, {
         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
       }, [!$options.columnProp(col, 'hidden') ? (openBlock(), createBlock(_component_DTFooterCell, {
@@ -2350,12 +2384,12 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$5.render = render$5;
 
-function _typeof$7(obj) { "@babel/helpers - typeof"; return _typeof$7 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$7(obj); }
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty$7(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$7(obj, key, value) { key = _toPropertyKey$7(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$7(arg) { var key = _toPrimitive$7(arg, "string"); return _typeof$7(key) === "symbol" ? key : String(key); }
-function _toPrimitive$7(input, hint) { if (_typeof$7(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$7(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$5(obj) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$5(obj); }
+function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$5(obj, key, value) { key = _toPropertyKey$5(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$5(arg) { var key = _toPrimitive$5(arg, "string"); return _typeof$5(key) === "symbol" ? key : String(key); }
+function _toPrimitive$5(input, hint) { if (_typeof$5(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$5(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var script$4 = {
   name: 'ColumnFilter',
   hostName: 'DataTable',
@@ -2500,20 +2534,30 @@ var script$4 = {
     }
   },
   methods: {
-    getColumnPT: function getColumnPT(key) {
-      return this.ptmo(this.getColumnProp(), key, {
+    getColumnPT: function getColumnPT(key, params) {
+      var columnMetaData = _objectSpread$5({
         props: this.column.props,
         parent: {
           props: this.$props,
           state: this.$data
         }
-      });
+      }, params);
+      return mergeProps(this.ptm("column.".concat(key), {
+        column: columnMetaData
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
     },
+    ptmFilterRowItemOptions: function ptmFilterRowItemOptions(matchMode) {
+      return {
+        context: {
+          highlighted: matchMode && this.isRowMatchModeSelected(matchMode.value)
+        }
+      };
+    },
     clearFilter: function clearFilter() {
-      var _filters = _objectSpread$7({}, this.filters);
+      var _filters = _objectSpread$5({}, this.filters);
       if (_filters[this.field].operator) {
         _filters[this.field].constraints.splice(1);
         _filters[this.field].operator = this.defaultOperator;
@@ -2572,7 +2616,7 @@ var script$4 = {
       }
     },
     onRowMatchModeChange: function onRowMatchModeChange(matchMode) {
-      var _filters = _objectSpread$7({}, this.filters);
+      var _filters = _objectSpread$5({}, this.filters);
       _filters[this.field].matchMode = matchMode;
       this.$emit('matchmode-change', {
         field: this.field,
@@ -2609,7 +2653,7 @@ var script$4 = {
       return this.filters[this.field].matchMode === matchMode;
     },
     onOperatorChange: function onOperatorChange(value) {
-      var _filters = _objectSpread$7({}, this.filters);
+      var _filters = _objectSpread$5({}, this.filters);
       _filters[this.field].operator = value;
       this.$emit('filter-change', _filters);
       this.$emit('operator-change', {
@@ -2621,7 +2665,7 @@ var script$4 = {
       }
     },
     onMenuMatchModeChange: function onMenuMatchModeChange(value, index) {
-      var _filters = _objectSpread$7({}, this.filters);
+      var _filters = _objectSpread$5({}, this.filters);
       _filters[this.field].constraints[index].matchMode = value;
       this.$emit('matchmode-change', {
         field: this.field,
@@ -2633,7 +2677,7 @@ var script$4 = {
       }
     },
     addConstraint: function addConstraint() {
-      var _filters = _objectSpread$7({}, this.filters);
+      var _filters = _objectSpread$5({}, this.filters);
       var newConstraint = {
         value: null,
         matchMode: this.defaultMatchMode
@@ -2649,7 +2693,7 @@ var script$4 = {
       }
     },
     removeConstraint: function removeConstraint(index) {
-      var _filters = _objectSpread$7({}, this.filters);
+      var _filters = _objectSpread$5({}, this.filters);
       var removedConstraint = _filters[this.field].constraints.splice(index, 1);
       this.$emit('constraint-remove', {
         field: this.field,
@@ -2849,6 +2893,21 @@ var script$4 = {
     },
     filterConstraintAriaLabel: function filterConstraintAriaLabel() {
       return this.$primevue.config.locale ? this.$primevue.config.locale.filterConstraint : undefined;
+    },
+    ptmHeaderFilterClearParams: function ptmHeaderFilterClearParams() {
+      return {
+        context: {
+          hidden: this.hasRowFilter()
+        }
+      };
+    },
+    ptmFilterMenuParams: function ptmFilterMenuParams() {
+      return {
+        context: {
+          overlayVisible: this.overlayVisible,
+          active: this.hasFilter()
+        }
+      };
     }
   },
   components: {
@@ -2865,12 +2924,12 @@ var script$4 = {
   }
 };
 
-function _typeof$6(obj) { "@babel/helpers - typeof"; return _typeof$6 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$6(obj); }
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$6(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$6(obj, key, value) { key = _toPropertyKey$6(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$6(arg) { var key = _toPrimitive$6(arg, "string"); return _typeof$6(key) === "symbol" ? key : String(key); }
-function _toPrimitive$6(input, hint) { if (_typeof$6(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$6(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$4(obj) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$4(obj); }
+function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$4(obj, key, value) { key = _toPropertyKey$4(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$4(arg) { var key = _toPrimitive$4(arg, "string"); return _typeof$4(key) === "symbol" ? key : String(key); }
+function _toPrimitive$4(input, hint) { if (_typeof$4(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$4(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _hoisted_1$2 = ["aria-label", "aria-expanded", "aria-controls"];
 var _hoisted_2 = ["id", "aria-modal"];
 var _hoisted_3 = ["onClick", "onKeydown", "tabindex"];
@@ -2884,7 +2943,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, $options.getColumnPT('columnFilter')), [$props.display === 'row' ? (openBlock(), createElementBlock("div", mergeProps({
     key: 0,
     "class": _ctx.cx('filterInput')
-  }, _objectSpread$6(_objectSpread$6({}, $props.filterInputProps), $options.getColumnPT('filterInput'))), [(openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
+  }, _objectSpread$4(_objectSpread$4({}, $props.filterInputProps), $options.getColumnPT('filterInput'))), [(openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
     field: $props.field,
     filterModel: $props.filters[$props.field],
     filterCallback: $options.filterCallback
@@ -2903,14 +2962,14 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[1] || (_cache[1] = function ($event) {
       return $options.onToggleButtonKeyDown($event);
     })
-  }, $options.getColumnPT('filterMenuButton')), [(openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon')))], 16, _hoisted_1$2)) : createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (openBlock(), createElementBlock("button", mergeProps({
+  }, $options.getColumnPT('filterMenuButton', $options.ptmFilterMenuParams)), [(openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), normalizeProps(guardReactiveProps($options.getColumnPT('filterMenuIcon'))), null, 16))], 16, _hoisted_1$2)) : createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (openBlock(), createElementBlock("button", mergeProps({
     key: 2,
     "class": _ctx.cx('headerFilterClearButton'),
     type: "button",
     onClick: _cache[2] || (_cache[2] = function ($event) {
       return $options.clearFilter();
     })
-  }, $options.getColumnPT('headerFilterClearButton')), [(openBlock(), createBlock(resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), normalizeProps(guardReactiveProps($options.getColumnPT('filterClearIcon'))), null, 16))], 16)) : createCommentVNode("", true), createVNode(_component_Portal, null, {
+  }, $options.getColumnPT('headerFilterClearButton', $options.ptmHeaderFilterClearParams)), [(openBlock(), createBlock(resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), normalizeProps(guardReactiveProps($options.getColumnPT('filterClearIcon'))), null, 16))], 16)) : createCommentVNode("", true), createVNode(_component_Portal, null, {
     "default": withCtx(function () {
       return [createVNode(Transition, {
         name: "p-connected-overlay",
@@ -2957,7 +3016,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                 return $options.onRowMatchModeChange(matchMode.value);
               }, ["prevent"]), ["enter"])],
               tabindex: i === 0 ? '0' : null
-            }, $options.getColumnPT('filterRowItem')), toDisplayString(matchMode.label), 17, _hoisted_3);
+            }, $options.getColumnPT('filterRowItem', $options.ptmFilterRowItemOptions(matchMode))), toDisplayString(matchMode.label), 17, _hoisted_3);
           }), 128)), createElementVNode("li", mergeProps({
             "class": _ctx.cx('filterSeparator')
           }, $options.getColumnPT('filterSeparator')), null, 16), createElementVNode("li", mergeProps({
@@ -3022,6 +3081,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               },
               label: $options.removeRuleButtonLabel,
               unstyled: _ctx.unstyled,
+              text: "",
+              severity: "danger",
+              size: "small",
               pt: $options.getColumnPT('filterRemoveButton'),
               "data-pc-section": "filterremovebutton"
             }, {
@@ -3044,6 +3106,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               return $options.addConstraint();
             }),
             unstyled: _ctx.unstyled,
+            text: "",
+            severity: "info",
+            size: "small",
             pt: $options.getColumnPT('filterAddRuleButton'),
             "data-pc-section": "filteraddrulebutton"
           }, {
@@ -3062,6 +3127,8 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
             label: $options.clearButtonLabel,
             onClick: $options.clearFilter,
             unstyled: _ctx.unstyled,
+            size: "small",
+            outlined: "",
             pt: $options.getColumnPT('filterClearButton'),
             "data-pc-section": "filterclearbutton"
           }, null, 8, ["class", "label", "onClick", "unstyled", "pt"])) : (openBlock(), createBlock(resolveDynamicComponent($props.filterClearTemplate), {
@@ -3080,6 +3147,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
               return $options.applyFilter();
             }),
             unstyled: _ctx.unstyled,
+            size: "small",
             pt: $options.getColumnPT('filterApplyButton'),
             "data-pc-section": "filterapplybutton"
           }, null, 8, ["class", "label", "unstyled", "pt"])) : (openBlock(), createBlock(resolveDynamicComponent($props.filterApplyTemplate), {
@@ -3125,7 +3193,7 @@ var script$3 = {
   },
   methods: {
     getColumnPT: function getColumnPT(key) {
-      return this.ptmo(this.getColumnProp(), key, {
+      var columnMetaData = {
         props: this.column.props,
         parent: {
           props: this.$props,
@@ -3136,7 +3204,10 @@ var script$3 = {
           focused: this.focused,
           disabled: this.disabled
         }
-      });
+      };
+      return mergeProps(this.ptm("column.".concat(key), {
+        column: columnMetaData
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
@@ -3210,12 +3281,6 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$3.render = render$3;
 
-function _typeof$5(obj) { "@babel/helpers - typeof"; return _typeof$5 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$5(obj); }
-function ownKeys$5(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$5(Object(source), !0).forEach(function (key) { _defineProperty$5(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$5(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$5(obj, key, value) { key = _toPropertyKey$5(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$5(arg) { var key = _toPrimitive$5(arg, "string"); return _typeof$5(key) === "symbol" ? key : String(key); }
-function _toPrimitive$5(input, hint) { if (_typeof$5(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$5(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var script$2 = {
   name: 'HeaderCell',
   hostName: 'DataTable',
@@ -3315,6 +3380,7 @@ var script$2 = {
       return ObjectUtils.getVNodeProp(this.column, prop);
     },
     getColumnPT: function getColumnPT(key) {
+      var _this$$parentInstance, _this$$parentInstance2;
       var columnMetaData = {
         props: this.column.props,
         parent: {
@@ -3322,12 +3388,16 @@ var script$2 = {
           state: this.$data
         },
         context: {
-          index: this.index
+          index: this.index,
+          sorted: this.isColumnSorted(),
+          resizable: this.resizableColumns,
+          size: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.size,
+          showGridlines: ((_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.showGridlines) || false
         }
       };
-      return _objectSpread$5(_objectSpread$5({}, this.ptm("column.".concat(key), {
+      return mergeProps(this.ptm("column.".concat(key), {
         column: columnMetaData
-      })), this.ptmo(this.getColumnProp(), key, columnMetaData));
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(), key, columnMetaData));
     },
     getColumnProp: function getColumnProp() {
       return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
@@ -3468,12 +3538,12 @@ var script$2 = {
   }
 };
 
-function _typeof$4(obj) { "@babel/helpers - typeof"; return _typeof$4 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$4(obj); }
-function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$4(obj, key, value) { key = _toPropertyKey$4(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$4(arg) { var key = _toPrimitive$4(arg, "string"); return _typeof$4(key) === "symbol" ? key : String(key); }
-function _toPrimitive$4(input, hint) { if (_typeof$4(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$4(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof$3(obj) { "@babel/helpers - typeof"; return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$3(obj); }
+function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty$3(obj, key, value) { key = _toPropertyKey$3(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey$3(arg) { var key = _toPrimitive$3(arg, "string"); return _typeof$3(key) === "symbol" ? key : String(key); }
+function _toPrimitive$3(input, hint) { if (_typeof$3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var _hoisted_1 = ["tabindex", "colspan", "rowspan", "aria-sort", "data-p-sortable-column", "data-p-resizable-column", "data-p-highlight", "data-p-filter-column", "data-p-frozen-column", "data-p-reorderable-column"];
 function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
@@ -3507,7 +3577,7 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     onDrop: _cache[14] || (_cache[14] = function () {
       return $options.onDrop && $options.onDrop.apply($options, arguments);
     })
-  }, _objectSpread$4(_objectSpread$4({}, $options.getColumnPT('root')), $options.getColumnPT('headerCell')), {
+  }, _objectSpread$3(_objectSpread$3({}, $options.getColumnPT('root')), $options.getColumnPT('headerCell')), {
     "data-p-sortable-column": $options.columnProp('sortable'),
     "data-p-resizable-column": $props.resizableColumns,
     "data-p-highlight": $options.isColumnSorted(),
@@ -3530,12 +3600,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('headerTitle')
   }, $options.getColumnPT('headerTitle')), toDisplayString($options.columnProp('header')), 17)) : createCommentVNode("", true), $options.columnProp('sortable') ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({
     key: 2
-  }, $options.getColumnPT('sort'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.sorticon || $options.sortableColumnIcon), {
+  }, $options.getColumnPT('sort'))), [(openBlock(), createBlock(resolveDynamicComponent($props.column.children && $props.column.children.sorticon || $options.sortableColumnIcon), mergeProps({
     sorted: $options.sortState.sorted,
     sortOrder: $options.sortState.sortOrder,
     "data-pc-section": "sorticon",
-    "class": normalizeClass(_ctx.cx('sortIcon'))
-  }, null, 8, ["sorted", "sortOrder", "class"]))], 16)) : createCommentVNode("", true), $options.isMultiSorted() ? (openBlock(), createElementBlock("span", mergeProps({
+    "class": _ctx.cx('sortIcon')
+  }, $options.getColumnPT('sorticon')), null, 16, ["sorted", "sortOrder", "class"]))], 16)) : createCommentVNode("", true), $options.isMultiSorted() ? (openBlock(), createElementBlock("span", mergeProps({
     key: 3,
     "class": _ctx.cx('sortBadge')
   }, $options.getColumnPT('sortBadge')), toDisplayString($options.getBadgeValue()), 17)) : createCommentVNode("", true), $options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row' ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
@@ -3602,7 +3672,6 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
 
 script$2.render = render$2;
 
-function _typeof$3(obj) { "@babel/helpers - typeof"; return _typeof$3 = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof$3(obj); }
 function _toConsumableArray$1(arr) { return _arrayWithoutHoles$1(arr) || _iterableToArray$1(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread$1(); }
 function _nonIterableSpread$1() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray$1(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -3610,11 +3679,6 @@ function _arrayWithoutHoles$1(arr) { if (Array.isArray(arr)) return _arrayLikeTo
 function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
 function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty$3(obj, key, value) { key = _toPropertyKey$3(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey$3(arg) { var key = _toPrimitive$3(arg, "string"); return _typeof$3(key) === "symbol" ? key : String(key); }
-function _toPrimitive$3(input, hint) { if (_typeof$3(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof$3(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 var script$1 = {
   name: 'TableHeader',
   hostName: 'DataTable',
@@ -3699,6 +3763,7 @@ var script$1 = {
       return ObjectUtils.getVNodeProp(col, prop);
     },
     getColumnGroupPT: function getColumnGroupPT(key) {
+      var _this$$parentInstance;
       var columnGroupMetaData = {
         props: this.getColumnGroupProps(),
         parent: {
@@ -3706,12 +3771,13 @@ var script$1 = {
           state: this.$data
         },
         context: {
-          type: 'header'
+          type: 'header',
+          scrollable: (_this$$parentInstance = this.$parentInstance) === null || _this$$parentInstance === void 0 || (_this$$parentInstance = _this$$parentInstance.$parentInstance) === null || _this$$parentInstance === void 0 ? void 0 : _this$$parentInstance.scrollable
         }
       };
-      return _objectSpread$3(_objectSpread$3({}, this.ptm("columnGroup.".concat(key), {
+      return mergeProps(this.ptm("columnGroup.".concat(key), {
         columnGroup: columnGroupMetaData
-      })), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
+      }), this.ptm("columnGroup.".concat(key), columnGroupMetaData), this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData));
     },
     getColumnGroupProps: function getColumnGroupProps() {
       return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
@@ -3727,9 +3793,9 @@ var script$1 = {
           index: index
         }
       };
-      return _objectSpread$3(_objectSpread$3({}, this.ptm("row.".concat(key), {
+      return mergeProps(this.ptm("row.".concat(key), {
         row: rowMetaData
-      })), this.ptmo(this.getRowProp(row), key, rowMetaData));
+      }), this.ptm("row.".concat(key), rowMetaData), this.ptmo(this.getRowProp(row), key, rowMetaData));
     },
     getRowProp: function getRowProp(row) {
       return row.props && row.props.pt ? row.props.pt : undefined; //@todo
@@ -3745,9 +3811,9 @@ var script$1 = {
           index: index
         }
       };
-      return _objectSpread$3(_objectSpread$3({}, this.ptm("column.".concat(key), {
+      return mergeProps(this.ptm("column.".concat(key), {
         column: columnMetaData
-      })), this.ptmo(this.getColumnProp(column), key, columnMetaData));
+      }), this.ptm("column.".concat(key), columnMetaData), this.ptmo(this.getColumnProp(column), key, columnMetaData));
     },
     getColumnProp: function getColumnProp(column) {
       return column.props && column.props.pt ? column.props.pt : undefined; //@todo
@@ -3793,6 +3859,16 @@ var script$1 = {
       }
     }
   },
+  computed: {
+    ptmTHeadOptions: function ptmTHeadOptions() {
+      var _this$$parentInstance2;
+      return {
+        context: {
+          scrollable: (_this$$parentInstance2 = this.$parentInstance) === null || _this$$parentInstance2 === void 0 || (_this$$parentInstance2 = _this$$parentInstance2.$parentInstance) === null || _this$$parentInstance2 === void 0 ? void 0 : _this$$parentInstance2.scrollable
+        }
+      };
+    }
+  },
   components: {
     DTHeaderCell: script$2,
     DTHeaderCheckbox: script$3,
@@ -3814,7 +3890,7 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('thead'),
     style: _ctx.sx('thead'),
     role: "rowgroup"
-  }, $props.columnGroup ? _objectSpread$2(_objectSpread$2({}, _ctx.ptm('thead')), $options.getColumnGroupPT('root')) : _ctx.ptm('thead'), {
+  }, $props.columnGroup ? _objectSpread$2(_objectSpread$2({}, _ctx.ptm('thead', $options.ptmTHeadOptions)), $options.getColumnGroupPT('root')) : _ctx.ptm('thead', $options.ptmTHeadOptions), {
     "data-pc-section": "thead"
   }), [!$props.columnGroup ? (openBlock(), createElementBlock(Fragment, {
     key: 0