primevue 3.30.1 → 3.30.2

package/datatable/datatable.js

@@ -1,5 +1,5 @@
 this.primevue = this.primevue || {};
-this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, BaseComponent, usestyle, ChevronDownIcon, ChevronRightIcon, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, vue, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
+this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, BaseComponent, usestyle, ChevronDownIcon, ChevronRightIcon, vue, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, Button, Dropdown, FocusTrap, FilterIcon, FilterSlashIcon, PlusIcon, TrashIcon, Portal, SortAltIcon, SortAmountDownIcon, SortAmountUpAltIcon) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -57,7 +57,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           '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',
@@ -516,6 +518,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           type: Boolean,
           "default": false
         },
+        size: {
+          type: String,
+          "default": null
+        },
         tableStyle: {
           type: null,
           "default": null
@@ -570,7 +576,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       },
       methods: {
         getColumnPT: function getColumnPT(key) {
-          return this.ptmo(this.getColumnProp(), key, {
+          var columnMetaData = {
             props: this.column.props,
             parent: {
               props: this.$props,
@@ -582,7 +588,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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:
@@ -689,7 +698,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       },
       methods: {
         getColumnPT: function getColumnPT(key) {
-          return this.ptmo(this.getColumnProp(), key, {
+          var columnMetaData = {
             props: this.column.props,
             parent: {
               props: this.$props,
@@ -701,7 +710,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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:
@@ -884,6 +896,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return utils.ObjectUtils.getVNodeProp(this.column, prop);
         },
         getColumnPT: function getColumnPT(key) {
+          var _this$$parentInstance, _this$$parentInstance2;
           var columnMetaData = {
             props: this.column.props,
             parent: {
@@ -891,7 +904,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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), {
@@ -1329,14 +1344,13 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       }, [$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",
@@ -1560,18 +1574,32 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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];
@@ -1861,6 +1889,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         },
         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: {
@@ -1892,7 +1928,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         "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({
@@ -1902,14 +1938,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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, {
@@ -1917,16 +1955,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }, [$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({
@@ -1969,7 +2007,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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)
@@ -2040,7 +2078,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           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);
@@ -2091,6 +2131,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return utils.ObjectUtils.getVNodeProp(this.column, prop);
         },
         getColumnPT: function getColumnPT(key) {
+          var _this$$parentInstance, _this$$parentInstance2;
           var columnMetaData = {
             props: this.column.props,
             parent: {
@@ -2098,7 +2139,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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), {
@@ -2196,7 +2239,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               state: this.$data
             },
             context: {
-              type: 'header'
+              type: 'footer',
+              scrollable: this.ptmTFootOptions.context.scrollable
             }
           };
           return vue.mergeProps(this.ptm("columnGroup.".concat(key), {
@@ -2280,6 +2324,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             }
           }
           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: {
@@ -2300,7 +2352,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         "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,
@@ -2484,18 +2536,28 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
       },
       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) {
@@ -2833,6 +2895,21 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         },
         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: {
@@ -2887,14 +2964,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         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",
@@ -2941,7 +3018,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                     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({
@@ -3006,6 +3083,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                   },
                   label: $options.removeRuleButtonLabel,
                   unstyled: _ctx.unstyled,
+                  text: "",
+                  severity: "danger",
+                  size: "small",
                   pt: $options.getColumnPT('filterRemoveButton'),
                   "data-pc-section": "filterremovebutton"
                 }, {
@@ -3028,6 +3108,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                   return $options.addConstraint();
                 }),
                 unstyled: _ctx.unstyled,
+                text: "",
+                severity: "info",
+                size: "small",
                 pt: $options.getColumnPT('filterAddRuleButton'),
                 "data-pc-section": "filteraddrulebutton"
               }, {
@@ -3046,6 +3129,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 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), {
@@ -3064,6 +3149,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                   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), {
@@ -3109,7 +3195,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       },
       methods: {
         getColumnPT: function getColumnPT(key) {
-          return this.ptmo(this.getColumnProp(), key, {
+          var columnMetaData = {
             props: this.column.props,
             parent: {
               props: this.$props,
@@ -3120,7 +3206,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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:
@@ -3293,6 +3382,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return utils.ObjectUtils.getVNodeProp(this.column, prop);
         },
         getColumnPT: function getColumnPT(key) {
+          var _this$$parentInstance, _this$$parentInstance2;
           var columnMetaData = {
             props: this.column.props,
             parent: {
@@ -3300,7 +3390,11 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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), {
@@ -3508,12 +3602,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         "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, {
@@ -3671,6 +3765,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           return utils.ObjectUtils.getVNodeProp(col, prop);
         },
         getColumnGroupPT: function getColumnGroupPT(key) {
+          var _this$$parentInstance;
           var columnGroupMetaData = {
             props: this.getColumnGroupProps(),
             parent: {
@@ -3678,7 +3773,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               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), {
@@ -3765,6 +3861,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           }
         }
       },
+      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,
@@ -3786,7 +3892,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         "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
@@ -6073,4 +6179,4 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
 
     return script;
 
-})(primevue.api, primevue.icons.arrowdown, primevue.icons.arrowup, primevue.icons.spinner, primevue.paginator, primevue.utils, primevue.virtualscroller, primevue.basecomponent, primevue.usestyle, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.bars, primevue.icons.check, primevue.icons.pencil, primevue.icons.times, primevue.overlayeventbus, primevue.ripple, Vue, primevue.button, primevue.dropdown, primevue.focustrap, primevue.icons.filter, primevue.icons.filterslash, primevue.icons.plus, primevue.icons.trash, primevue.portal, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt);
+})(primevue.api, primevue.icons.arrowdown, primevue.icons.arrowup, primevue.icons.spinner, primevue.paginator, primevue.utils, primevue.virtualscroller, primevue.basecomponent, primevue.usestyle, primevue.icons.chevrondown, primevue.icons.chevronright, Vue, primevue.icons.bars, primevue.icons.check, primevue.icons.pencil, primevue.icons.times, primevue.overlayeventbus, primevue.ripple, primevue.button, primevue.dropdown, primevue.focustrap, primevue.icons.filter, primevue.icons.filterslash, primevue.icons.plus, primevue.icons.trash, primevue.portal, primevue.icons.sortalt, primevue.icons.sortamountdown, primevue.icons.sortamountupalt);