primevue 3.30.1 → 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:
@@ -882,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: {
@@ -889,7 +902,9 @@ 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 mergeProps(this.ptm("column.".concat(key), {
@@ -1327,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",
@@ -1558,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];
@@ -1859,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: {
@@ -1890,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({
@@ -1900,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$8(_objectSpread$8({}, $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, {
@@ -1915,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({
@@ -1967,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)
@@ -2038,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$8(_objectSpread$8({}, $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);
@@ -2089,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: {
@@ -2096,7 +2137,9 @@ 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 mergeProps(this.ptm("column.".concat(key), {
@@ -2194,7 +2237,8 @@ var script$5 = {
           state: this.$data
         },
         context: {
-          type: 'header'
+          type: 'footer',
+          scrollable: this.ptmTFootOptions.context.scrollable
         }
       };
       return mergeProps(this.ptm("columnGroup.".concat(key), {
@@ -2278,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: {
@@ -2298,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$6(_objectSpread$6({}, _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,
@@ -2482,18 +2534,28 @@ 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$5({}, this.filters);
       if (_filters[this.field].operator) {
@@ -2831,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: {
@@ -2885,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",
@@ -2939,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({
@@ -3004,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"
             }, {
@@ -3026,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"
           }, {
@@ -3044,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), {
@@ -3062,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), {
@@ -3107,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,
@@ -3118,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:
@@ -3291,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: {
@@ -3298,7 +3388,11 @@ 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 mergeProps(this.ptm("column.".concat(key), {
@@ -3506,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, {
@@ -3669,6 +3763,7 @@ var script$1 = {
       return ObjectUtils.getVNodeProp(col, prop);
     },
     getColumnGroupPT: function getColumnGroupPT(key) {
+      var _this$$parentInstance;
       var columnGroupMetaData = {
         props: this.getColumnGroupProps(),
         parent: {
@@ -3676,7 +3771,8 @@ 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 mergeProps(this.ptm("columnGroup.".concat(key), {
@@ -3763,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,
@@ -3784,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