primevue 3.30.1 → 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:
@@ -912,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: {
@@ -919,7 +932,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 vue.mergeProps(this.ptm("column.".concat(key), {
@@ -1357,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",
@@ -1588,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];
@@ -1889,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: {
@@ -1920,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({
@@ -1930,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$8(_objectSpread$8({}, $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, {
@@ -1945,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({
@@ -1997,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)
@@ -2068,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$8(_objectSpread$8({}, $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);
@@ -2119,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: {
@@ -2126,7 +2167,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 vue.mergeProps(this.ptm("column.".concat(key), {
@@ -2224,7 +2267,8 @@ var script$5 = {
           state: this.$data
         },
         context: {
-          type: 'header'
+          type: 'footer',
+          scrollable: this.ptmTFootOptions.context.scrollable
         }
       };
       return vue.mergeProps(this.ptm("columnGroup.".concat(key), {
@@ -2308,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: {
@@ -2328,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$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 ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
     key: 0,
@@ -2512,18 +2564,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 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$5({}, this.filters);
       if (_filters[this.field].operator) {
@@ -2861,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: {
@@ -2915,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",
@@ -2969,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({
@@ -3034,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"
             }, {
@@ -3056,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"
           }, {
@@ -3074,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), {
@@ -3092,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), {
@@ -3137,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,
@@ -3148,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:
@@ -3321,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: {
@@ -3328,7 +3418,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 vue.mergeProps(this.ptm("column.".concat(key), {
@@ -3536,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, {
@@ -3699,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: {
@@ -3706,7 +3801,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 vue.mergeProps(this.ptm("columnGroup.".concat(key), {
@@ -3793,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,
@@ -3814,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