primevue 3.30.0 → 3.30.2

package/datatable/datatable.cjs.js

@@ -11,13 +11,13 @@ var BaseComponent = require('primevue/basecomponent');
 var usestyle = require('primevue/usestyle');
 var ChevronDownIcon = require('primevue/icons/chevrondown');
 var ChevronRightIcon = require('primevue/icons/chevronright');
+var vue = require('vue');
 var BarsIcon = require('primevue/icons/bars');
 var CheckIcon = require('primevue/icons/check');
 var PencilIcon = require('primevue/icons/pencil');
 var TimesIcon = require('primevue/icons/times');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Ripple = require('primevue/ripple');
-var vue = require('vue');
 var Button = require('primevue/button');
 var Dropdown = require('primevue/dropdown');
 var FocusTrap = require('primevue/focustrap');
@@ -85,7 +85,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',
@@ -544,6 +546,10 @@ var script$b = {
       type: Boolean,
       "default": false
     },
+    size: {
+      type: String,
+      "default": null
+    },
     tableStyle: {
       type: null,
       "default": null
@@ -598,7 +604,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,
@@ -610,7 +616,10 @@ var script$a = {
           focused: this.focused,
           disabled: this.$attrs.disabled
         }
-      });
+      };
+      return vue.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:
@@ -717,7 +726,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,
@@ -729,7 +738,10 @@ var script$9 = {
           focused: this.focused,
           disabled: this.$attrs.disabled
         }
-      });
+      };
+      return vue.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:
@@ -791,12 +803,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',
@@ -918,6 +924,7 @@ var script$8 = {
       return utils.ObjectUtils.getVNodeProp(this.column, prop);
     },
     getColumnPT: function getColumnPT(key) {
+      var _this$$parentInstance, _this$$parentInstance2;
       var columnMetaData = {
         props: this.column.props,
         parent: {
@@ -925,12 +932,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 vue.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;
@@ -1258,12 +1267,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"];
@@ -1281,7 +1290,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'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
+  }, _objectSpread$9(_objectSpread$9({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
     data: $props.rowData,
     column: $props.column,
     field: $options.field,
@@ -1299,7 +1308,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,
@@ -1363,14 +1372,13 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   }, [$props.column.children && $props.column.children.rowreordericon ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowreordericon), {
     key: 0,
     "class": vue.normalizeClass(_ctx.cx('rowReorderIcon'))
-  }, null, 8, ["class"])) : $options.columnProp('rowReorderIcon') ? (vue.openBlock(), vue.createElementBlock("i", {
+  }, null, 8, ["class"])) : $options.columnProp('rowReorderIcon') ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
     key: 1,
-    "class": vue.normalizeClass([_ctx.cx('rowReorderIcon'), $options.columnProp('rowReorderIcon')])
-  }, null, 2)) : (vue.openBlock(), vue.createBlock(_component_BarsIcon, {
+    "class": [_ctx.cx('rowReorderIcon'), $options.columnProp('rowReorderIcon')]
+  }, $options.getColumnPT('rowReorderIcon')), null, 16)) : (vue.openBlock(), vue.createBlock(_component_BarsIcon, vue.mergeProps({
     key: 2,
-    "class": vue.normalizeClass(_ctx.cx('rowReorderIcon')),
-    "data-pc-section": "rowreordericon"
-  }, null, 8, ["class"]))], 64)) : $options.columnProp('expander') ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+    "class": _ctx.cx('rowReorderIcon')
+  }, $options.getColumnPT('rowReorderIcon')), null, 16, ["class"]))], 64)) : $options.columnProp('expander') ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
     key: 6,
     "class": _ctx.cx('rowToggler'),
     type: "button",
@@ -1594,18 +1602,32 @@ var script$7 = {
     columnProp: function columnProp(col, prop) {
       return utils.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 vue.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 = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
       var prevRowData = value[i - 1];
@@ -1895,6 +1917,14 @@ var script$7 = {
     },
     nameAttributeSelector: function nameAttributeSelector() {
       return utils.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: {
@@ -1904,12 +1934,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"];
@@ -1926,7 +1956,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('tbody'),
     role: "rowgroup",
     style: $options.bodyStyle
-  }, _ctx.ptm('tbody')), [!$props.empty ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
+  }, _ctx.ptm('tbody', $options.ptmTBodyOptions)), [!$props.empty ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
     key: 0
   }, vue.renderList($props.value, function (rowData, index) {
     return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [$props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
@@ -1936,14 +1966,16 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       role: "row"
     }, _ctx.ptm('rowGroupHeader')), [vue.createElementVNode("td", vue.mergeProps({
       colspan: $options.columnsLength - 1
-    }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$props.expandableRowGroups ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+    }, _objectSpread$8(_objectSpread$8({}, _ctx.ptm('column.root')), _ctx.ptm('column.bodyCell')), {
+      "data-pc-section": "bodycell"
+    }), [$props.expandableRowGroups ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
       key: 0,
       "class": _ctx.cx('rowGroupToggler'),
       onClick: function onClick($event) {
         return $options.onRowGroupToggle($event, rowData);
       },
       type: "button"
-    }, $options.getColumnPT('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
+    }, _ctx.ptm('rowGroupToggler')), [$props.templates['rowgrouptogglericon'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
       key: 0,
       expanded: $options.isRowGroupExpanded(rowData)
     }, null, 8, ["expanded"])) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
@@ -1951,16 +1983,16 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     }, [$options.isRowGroupExpanded(rowData) && $props.expandedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
       key: 0,
       "class": [_ctx.cx('rowGroupTogglerIcon'), $props.expandedRowIcon]
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : $options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
       key: 1,
       "class": _ctx.cx('rowGroupTogglerIcon')
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : !$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
       key: 2,
       "class": [_ctx.cx('rowGroupTogglerIcon'), $props.collapsedRowIcon]
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16)) : !$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
       key: 3,
       "class": _ctx.cx('rowGroupTogglerIcon')
-    }, $options.getColumnPT('rowGroupTogglerIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 64))], 16, _hoisted_2$1)) : vue.createCommentVNode("", true), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
+    }, _ctx.ptm('rowGroupTogglerIcon')), null, 16, ["class"])) : vue.createCommentVNode("", true)], 64))], 16, _hoisted_2$1)) : vue.createCommentVNode("", true), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupheader']), {
       data: rowData,
       index: $options.getRowIndex(index)
     }, null, 8, ["data", "index"]))], 16, _hoisted_1$4)], 16)) : vue.createCommentVNode("", true), ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData) : true) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
@@ -2003,7 +2035,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)
@@ -2065,7 +2097,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       role: "row"
     }, _ctx.ptm('rowExpansion')), [vue.createElementVNode("td", vue.mergeProps({
       colspan: $options.columnsLength
-    }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['expansion']), {
+    }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['expansion']), {
       data: rowData,
       index: $options.getRowIndex(index)
     }, null, 8, ["data", "index"]))], 16, _hoisted_5)], 16, _hoisted_4)) : vue.createCommentVNode("", true), $props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)) ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
@@ -2074,7 +2106,9 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       role: "row"
     }, _ctx.ptm('rowGroupFooter')), [vue.createElementVNode("td", vue.mergeProps({
       colspan: $options.columnsLength - 1
-    }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
+    }, _objectSpread$8(_objectSpread$8({}, _ctx.ptm('column.root')), _ctx.ptm('column.footerCell')), {
+      "data-pc-section": "footercell"
+    }), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
       data: rowData,
       index: $options.getRowIndex(index)
     }, null, 8, ["data", "index"]))], 16, _hoisted_6)], 16)) : vue.createCommentVNode("", true)], 64);
@@ -2084,19 +2118,13 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
     role: "row"
   }, _ctx.ptm('emptyMessage')), [vue.createElementVNode("td", vue.mergeProps({
     colspan: $options.columnsLength
-  }, _objectSpread$c(_objectSpread$c({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$props.templates.empty ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), {
+  }, _objectSpread$8(_objectSpread$8({}, $options.getColumnPT('root')), $options.getColumnPT('bodyCell'))), [$props.templates.empty ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), {
     key: 0
   })) : vue.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',
@@ -2131,6 +2159,7 @@ var script$6 = {
       return utils.ObjectUtils.getVNodeProp(this.column, prop);
     },
     getColumnPT: function getColumnPT(key) {
+      var _this$$parentInstance, _this$$parentInstance2;
       var columnMetaData = {
         props: this.column.props,
         parent: {
@@ -2138,12 +2167,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 vue.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;
@@ -2181,12 +2212,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 vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
@@ -2195,7 +2226,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 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.footer), {
+  }, _objectSpread$7(_objectSpread$7({}, $options.getColumnPT('root')), $options.getColumnPT('footerCell'))), [$props.column.children && $props.column.children.footer ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.footer), {
     key: 0,
     column: $props.column
   }, null, 8, ["column"])) : vue.createCommentVNode("", true), vue.createTextVNode(" " + vue.toDisplayString($options.columnProp('footer')), 1)], 16, _hoisted_1$3);
@@ -2203,7 +2234,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); }
@@ -2211,11 +2241,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',
@@ -2242,12 +2267,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 vue.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
@@ -2263,9 +2289,9 @@ var script$5 = {
           index: index
         }
       };
-      return _objectSpread$9(_objectSpread$9({}, this.ptm("row.".concat(key), {
+      return vue.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
@@ -2326,6 +2352,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: {
@@ -2333,12 +2367,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 = vue.resolveComponent("DTFooterCell");
   return $options.hasFooter ? (vue.openBlock(), vue.createElementBlock("tfoot", vue.mergeProps({
@@ -2346,7 +2380,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 ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
     key: 0,
@@ -2365,7 +2399,7 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     return vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
       key: i,
       role: "row"
-    }, _objectSpread$8(_objectSpread$8({}, _ctx.ptm('footerRow')), $options.getRowPT(row, 'root', i))), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.getFooterColumns(row), function (col, j) {
+    }, _objectSpread$6(_objectSpread$6({}, _ctx.ptm('footerRow')), $options.getRowPT(row, 'root', i))), [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.getFooterColumns(row), function (col, j) {
       return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
       }, [!$options.columnProp(col, 'hidden') ? (vue.openBlock(), vue.createBlock(_component_DTFooterCell, {
@@ -2380,12 +2414,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',
@@ -2530,20 +2564,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 vue.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;
@@ -2602,7 +2646,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,
@@ -2639,7 +2683,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', {
@@ -2651,7 +2695,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,
@@ -2663,7 +2707,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
@@ -2679,7 +2723,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,
@@ -2879,6 +2923,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: {
@@ -2895,12 +2954,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"];
@@ -2914,7 +2973,7 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, $options.getColumnPT('columnFilter')), [$props.display === 'row' ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     key: 0,
     "class": _ctx.cx('filterInput')
-  }, _objectSpread$6(_objectSpread$6({}, $props.filterInputProps), $options.getColumnPT('filterInput'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
+  }, _objectSpread$4(_objectSpread$4({}, $props.filterInputProps), $options.getColumnPT('filterInput'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
     field: $props.field,
     filterModel: $props.filters[$props.field],
     filterCallback: $options.filterCallback
@@ -2933,14 +2992,14 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[1] || (_cache[1] = function ($event) {
       return $options.onToggleButtonKeyDown($event);
     })
-  }, $options.getColumnPT('filterMenuButton')), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon')))], 16, _hoisted_1$2)) : vue.createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+  }, $options.getColumnPT('filterMenuButton', $options.ptmFilterMenuParams)), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterMenuIcon'))), null, 16))], 16, _hoisted_1$2)) : vue.createCommentVNode("", true), $props.showClearButton && $props.display === 'row' ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
     key: 2,
     "class": _ctx.cx('headerFilterClearButton'),
     type: "button",
     onClick: _cache[2] || (_cache[2] = function ($event) {
       return $options.clearFilter();
     })
-  }, $options.getColumnPT('headerFilterClearButton')), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterClearIcon'))), null, 16))], 16)) : vue.createCommentVNode("", true), vue.createVNode(_component_Portal, null, {
+  }, $options.getColumnPT('headerFilterClearButton', $options.ptmHeaderFilterClearParams)), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPT('filterClearIcon'))), null, 16))], 16)) : vue.createCommentVNode("", true), vue.createVNode(_component_Portal, null, {
     "default": vue.withCtx(function () {
       return [vue.createVNode(vue.Transition, {
         name: "p-connected-overlay",
@@ -2987,7 +3046,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')), vue.toDisplayString(matchMode.label), 17, _hoisted_3);
+            }, $options.getColumnPT('filterRowItem', $options.ptmFilterRowItemOptions(matchMode))), vue.toDisplayString(matchMode.label), 17, _hoisted_3);
           }), 128)), vue.createElementVNode("li", vue.mergeProps({
             "class": _ctx.cx('filterSeparator')
           }, $options.getColumnPT('filterSeparator')), null, 16), vue.createElementVNode("li", vue.mergeProps({
@@ -3052,6 +3111,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"
             }, {
@@ -3074,6 +3136,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"
           }, {
@@ -3092,6 +3157,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"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearTemplate), {
@@ -3110,6 +3177,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"])) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterApplyTemplate), {
@@ -3155,7 +3223,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,
@@ -3166,7 +3234,10 @@ var script$3 = {
           focused: this.focused,
           disabled: this.disabled
         }
-      });
+      };
+      return vue.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:
@@ -3240,12 +3311,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',
@@ -3345,6 +3410,7 @@ var script$2 = {
       return utils.ObjectUtils.getVNodeProp(this.column, prop);
     },
     getColumnPT: function getColumnPT(key) {
+      var _this$$parentInstance, _this$$parentInstance2;
       var columnMetaData = {
         props: this.column.props,
         parent: {
@@ -3352,12 +3418,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 vue.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:
@@ -3498,12 +3568,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 = vue.resolveComponent("DTHeaderCheckbox");
@@ -3537,7 +3607,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(),
@@ -3560,12 +3630,12 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     "class": _ctx.cx('headerTitle')
   }, $options.getColumnPT('headerTitle')), vue.toDisplayString($options.columnProp('header')), 17)) : vue.createCommentVNode("", true), $options.columnProp('sortable') ? (vue.openBlock(), vue.createElementBlock("span", vue.normalizeProps(vue.mergeProps({
     key: 2
-  }, $options.getColumnPT('sort'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.sorticon || $options.sortableColumnIcon), {
+  }, $options.getColumnPT('sort'))), [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children && $props.column.children.sorticon || $options.sortableColumnIcon), vue.mergeProps({
     sorted: $options.sortState.sorted,
     sortOrder: $options.sortState.sortOrder,
     "data-pc-section": "sorticon",
-    "class": vue.normalizeClass(_ctx.cx('sortIcon'))
-  }, null, 8, ["sorted", "sortOrder", "class"]))], 16)) : vue.createCommentVNode("", true), $options.isMultiSorted() ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+    "class": _ctx.cx('sortIcon')
+  }, $options.getColumnPT('sorticon')), null, 16, ["sorted", "sortOrder", "class"]))], 16)) : vue.createCommentVNode("", true), $options.isMultiSorted() ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
     key: 3,
     "class": _ctx.cx('sortBadge')
   }, $options.getColumnPT('sortBadge')), vue.toDisplayString($options.getBadgeValue()), 17)) : vue.createCommentVNode("", true), $options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row' ? (vue.openBlock(), vue.createBlock(_component_DTHeaderCheckbox, {
@@ -3632,7 +3702,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); }
@@ -3640,11 +3709,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',
@@ -3729,6 +3793,7 @@ var script$1 = {
       return utils.ObjectUtils.getVNodeProp(col, prop);
     },
     getColumnGroupPT: function getColumnGroupPT(key) {
+      var _this$$parentInstance;
       var columnGroupMetaData = {
         props: this.getColumnGroupProps(),
         parent: {
@@ -3736,12 +3801,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 vue.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
@@ -3757,9 +3823,9 @@ var script$1 = {
           index: index
         }
       };
-      return _objectSpread$3(_objectSpread$3({}, this.ptm("row.".concat(key), {
+      return vue.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
@@ -3775,9 +3841,9 @@ var script$1 = {
           index: index
         }
       };
-      return _objectSpread$3(_objectSpread$3({}, this.ptm("column.".concat(key), {
+      return vue.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
@@ -3823,6 +3889,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,
@@ -3844,7 +3920,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 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
     key: 0