primevue 3.28.0 → 3.29.0

package/datatable/datatable.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, 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, BaseComponent, ArrowDownIcon, ArrowUpIcon, SpinnerIcon, Paginator, utils, VirtualScroller, ChevronDownIcon, ChevronRightIcon, BarsIcon, CheckIcon, PencilIcon, TimesIcon, OverlayEventBus, Ripple, vue, 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 }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var ArrowDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownIcon);
     var ArrowUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpIcon);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
@@ -31,10 +32,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
 
     var script$a = {
         name: 'RowCheckbox',
+        extends: BaseComponent__default["default"],
         emits: ['change'],
         props: {
             value: null,
             checked: null,
+            column: null,
             rowCheckboxIconTemplate: {
                 type: Function,
                 default: null
@@ -46,6 +49,23 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             };
         },
         methods: {
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    },
+                    context: {
+                        checked: this.checked,
+                        focused: this.focused,
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+            },
             onClick(event) {
                 if (!this.$attrs.disabled) {
                     this.$emit('change', {
@@ -84,18 +104,17 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$a = { class: "p-hidden-accessible" };
-    const _hoisted_2$9 = ["checked", "disabled", "tabindex", "aria-label"];
+    const _hoisted_1$7 = ["checked", "disabled", "tabindex", "aria-label"];
 
     function render$a(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_CheckIcon = vue.resolveComponent("CheckIcon");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }]),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: ['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }],
         onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
-      }, [
-        vue.createElementVNode("div", _hoisted_1$a, [
-          vue.createElementVNode("input", {
+      }, $options.getColumnPTOptions('checkboxWrapper')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenInputWrapper')), [
+          vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             type: "checkbox",
             checked: $props.checked,
@@ -105,36 +124,38 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
             onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
             onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-          }, null, 40, _hoisted_2$9)
-        ]),
-        vue.createElementVNode("div", {
+          }, $options.getColumnPTOptions('hiddenInput')), null, 16, _hoisted_1$7)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({
           ref: "box",
-          class: vue.normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }])
-        }, [
+          class: ['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]
+        }, $options.getColumnPTOptions('checkbox')), [
           ($props.rowCheckboxIconTemplate)
             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.rowCheckboxIconTemplate), {
                 key: 0,
                 checked: $props.checked,
                 class: "p-checkbox-icon"
               }, null, 8, ["checked"]))
-            : (vue.openBlock(), vue.createBlock(_component_CheckIcon, {
+            : (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
                 key: 1,
                 class: "p-checkbox-icon"
-              }))
-        ], 2)
-      ], 2))
+              }, $options.getColumnPTOptions('checkboxIcon')), null, 16))
+        ], 16)
+      ], 16))
     }
 
     script$a.render = render$a;
 
     var script$9 = {
         name: 'RowRadioButton',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['change'],
         props: {
             value: null,
             checked: null,
-            name: null
+            name: null,
+            column: null
         },
         data() {
             return {
@@ -142,6 +163,23 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             };
         },
         methods: {
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    },
+                    context: {
+                        checked: this.checked,
+                        focused: this.focused,
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+            },
             onClick(event) {
                 if (!this.disabled) {
                     if (!this.checked) {
@@ -163,20 +201,15 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$9 = { class: "p-hidden-accessible" };
-    const _hoisted_2$8 = ["checked", "disabled", "name"];
-    const _hoisted_3$6 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-radiobutton-icon" }, null, -1);
-    const _hoisted_4$5 = [
-      _hoisted_3$6
-    ];
+    const _hoisted_1$6 = ["checked", "disabled", "name"];
 
     function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }]),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: ['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }],
         onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
-      }, [
-        vue.createElementVNode("div", _hoisted_1$9, [
-          vue.createElementVNode("input", {
+      }, $options.getColumnPTOptions('radiobuttonWrapper')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
+          vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             type: "radio",
             checked: $props.checked,
@@ -186,19 +219,22 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
             onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
             onKeydown: _cache[2] || (_cache[2] = vue.withKeys(vue.withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
-          }, null, 40, _hoisted_2$8)
-        ]),
-        vue.createElementVNode("div", {
+          }, $options.getColumnPTOptions('hiddenInput')), null, 16, _hoisted_1$6)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({
           ref: "box",
-          class: vue.normalizeClass(['p-radiobutton-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }])
-        }, _hoisted_4$5, 2)
-      ], 2))
+          class: ['p-radiobutton-box p-component', { 'p-highlight': $props.checked, 'p-disabled': _ctx.$attrs.disabled, 'p-focus': $data.focused }]
+        }, $options.getColumnPTOptions('radiobutton')), [
+          vue.createElementVNode("div", vue.mergeProps({ class: "p-radiobutton-icon" }, $options.getColumnPTOptions('radiobuttonIcon')), null, 16)
+        ], 16)
+      ], 16))
     }
 
     script$9.render = render$9;
 
     var script$8 = {
         name: 'BodyCell',
+        extends: BaseComponent__default["default"],
         emits: ['cell-edit-init', 'cell-edit-complete', 'cell-edit-cancel', 'row-edit-init', 'row-edit-save', 'row-edit-cancel', 'row-toggle', 'radio-change', 'checkbox-change', 'editing-meta-change'],
         props: {
             rowData: {
@@ -311,6 +347,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             columnProp(prop) {
                 return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
+            getColumnPTOptions(column, key) {
+                return this.ptmo(this.getColumnProp(column), key, {
+                    props: column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp(column) {
+                return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+            },
             resolveFieldData() {
                 return utils.ObjectUtils.resolveFieldData(this.rowData, this.field);
             },
@@ -615,14 +663,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$8 = {
-      key: 0,
-      class: "p-column-title"
-    };
-    const _hoisted_2$7 = ["aria-expanded", "aria-controls", "aria-label"];
-    const _hoisted_3$5 = ["aria-label"];
-    const _hoisted_4$4 = ["aria-label"];
-    const _hoisted_5$4 = ["aria-label"];
+    const _hoisted_1$5 = ["aria-expanded", "aria-controls", "aria-label"];
+    const _hoisted_2$2 = ["aria-label"];
+    const _hoisted_3$2 = ["aria-label"];
+    const _hoisted_4$1 = ["aria-label"];
 
     function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DTRadioButton = vue.resolveComponent("DTRadioButton");
@@ -632,11 +676,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return ($options.loading)
-        ? (vue.openBlock(), vue.createElementBlock("td", {
+        ? (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
             key: 0,
-            style: vue.normalizeStyle($options.containerStyle),
-            class: vue.normalizeClass($options.containerClass)
-          }, [
+            style: $options.containerStyle,
+            class: $options.containerClass,
+            role: "cell"
+          }, { ...$options.getColumnPTOptions($props.column, 'root'), ...$options.getColumnPTOptions($props.column, 'bodyCell') }), [
             (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.loading), {
               data: $props.rowData,
               column: $props.column,
@@ -645,17 +690,20 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               frozenRow: $props.frozenRow,
               loadingOptions: $options.loadingOptions
             }, null, 8, ["data", "column", "field", "index", "frozenRow", "loadingOptions"]))
-          ], 6))
-        : (vue.openBlock(), vue.createElementBlock("td", {
+          ], 16))
+        : (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
             key: 1,
-            style: vue.normalizeStyle($options.containerStyle),
-            class: vue.normalizeClass($options.containerClass),
+            style: $options.containerStyle,
+            class: $options.containerClass,
             onClick: _cache[6] || (_cache[6] = (...args) => ($options.onClick && $options.onClick(...args))),
             onKeydown: _cache[7] || (_cache[7] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
             role: "cell"
-          }, [
+          }, { ...$options.getColumnPTOptions($props.column, 'root'), ...$options.getColumnPTOptions($props.column, 'bodyCell') }), [
             ($props.responsiveLayout === 'stack')
-              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$8, vue.toDisplayString($options.columnProp('header')), 1))
+              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                  key: 0,
+                  class: "p-column-title"
+                }, $options.getColumnPTOptions($props.column, 'columnTitle')), vue.toDisplayString($options.columnProp('header')), 17))
               : vue.createCommentVNode("", true),
             ($props.column.children && $props.column.children.body && !$data.d_editing)
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.body), {
@@ -695,8 +743,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                               value: $props.rowData,
                               name: $props.name,
                               checked: $props.selected,
-                              onChange: _cache[0] || (_cache[0] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex)))
-                            }, null, 8, ["value", "name", "checked"]))
+                              onChange: _cache[0] || (_cache[0] = $event => ($options.toggleRowWithRadio($event, $props.rowIndex))),
+                              column: $props.column,
+                              pt: _ctx.pt
+                            }, null, 8, ["value", "name", "checked", "column", "pt"]))
                           : ($options.columnProp('selectionMode') === 'multiple')
                             ? (vue.openBlock(), vue.createBlock(_component_DTCheckbox, {
                                 key: 1,
@@ -704,8 +754,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                 checked: $props.selected,
                                 rowCheckboxIconTemplate: $props.column.children && $props.column.children.rowcheckboxicon,
                                 "aria-selected": $props.selected ? true : undefined,
-                                onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex)))
-                              }, null, 8, ["value", "checked", "rowCheckboxIconTemplate", "aria-selected"]))
+                                onChange: _cache[1] || (_cache[1] = $event => ($options.toggleRowWithCheckbox($event, $props.rowIndex))),
+                                column: $props.column,
+                                pt: _ctx.pt
+                              }, null, 8, ["value", "checked", "rowCheckboxIconTemplate", "aria-selected", "column", "pt"]))
                             : vue.createCommentVNode("", true)
                       ], 64))
                     : ($options.columnProp('rowReorder'))
@@ -714,7 +766,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                           class: vue.normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon')])
                         }, null, 8, ["class"]))
                       : ($options.columnProp('expander'))
-                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                             key: 6,
                             class: "p-row-toggler p-link",
                             type: "button",
@@ -722,7 +774,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                             "aria-controls": $props.ariaControls,
                             "aria-label": $options.expandButtonAriaLabel,
                             onClick: _cache[2] || (_cache[2] = (...args) => ($options.toggleRow && $options.toggleRow(...args)))
-                          }, [
+                          }, $options.getColumnPTOptions($props.column, 'rowToggler')), [
                             ($props.column.children && $props.column.children.rowtogglericon)
                               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.rowtogglericon), {
                                   key: 0,
@@ -735,63 +787,63 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                         class: vue.normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
                                       }, null, 2))
                                     : ($props.isRowExpanded && !$props.expandedRowIcon)
-                                      ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, {
+                                      ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
                                           key: 1,
                                           class: "p-row-toggler-icon"
-                                        }))
+                                        }, $options.getColumnPTOptions($props.column, 'rowTogglerIcon')), null, 16))
                                       : (!$props.isRowExpanded && $props.collapsedRowIcon)
                                         ? (vue.openBlock(), vue.createElementBlock("span", {
                                             key: 2,
                                             class: vue.normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
                                           }, null, 2))
                                         : (!$props.isRowExpanded && !$props.collapsedRowIcon)
-                                          ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, {
+                                          ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
                                               key: 3,
                                               class: "p-row-toggler-icon"
-                                            }))
+                                            }, $options.getColumnPTOptions($props.column, 'rowTogglerIcon')), null, 16))
                                           : vue.createCommentVNode("", true)
                                 ], 64))
-                          ], 8, _hoisted_2$7)), [
+                          ], 16, _hoisted_1$5)), [
                             [_directive_ripple]
                           ])
                         : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
                           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 7 }, [
                               (!$data.d_editing)
-                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                     key: 0,
                                     class: "p-row-editor-init p-link",
                                     type: "button",
                                     "aria-label": $options.initButtonAriaLabel,
                                     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onRowEditInit && $options.onRowEditInit(...args)))
-                                  }, [
-                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), { class: "p-row-editor-init-icon" }))
-                                  ], 8, _hoisted_3$5)), [
+                                  }, $options.getColumnPTOptions($props.column, 'rowEditorInitButton')), [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), vue.mergeProps({ class: "p-row-editor-init-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorInitIcon')), null, 16))
+                                  ], 16, _hoisted_2$2)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true),
                               ($data.d_editing)
-                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                     key: 1,
                                     class: "p-row-editor-save p-link",
                                     type: "button",
                                     "aria-label": $options.saveButtonAriaLabel,
                                     onClick: _cache[4] || (_cache[4] = (...args) => ($options.onRowEditSave && $options.onRowEditSave(...args)))
-                                  }, [
-                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), { class: "p-row-editor-save-icon" }))
-                                  ], 8, _hoisted_4$4)), [
+                                  }, $options.getColumnPTOptions($props.column, 'rowEditorEditButton')), [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), vue.mergeProps({ class: "p-row-editor-save-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorEditIcon')), null, 16))
+                                  ], 16, _hoisted_3$2)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true),
                               ($data.d_editing)
-                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                     key: 2,
                                     class: "p-row-editor-cancel p-link",
                                     type: "button",
                                     "aria-label": $options.cancelButtonAriaLabel,
                                     onClick: _cache[5] || (_cache[5] = (...args) => ($options.onRowEditCancel && $options.onRowEditCancel(...args)))
-                                  }, [
-                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), { class: "p-row-editor-cancel-icon" }))
-                                  ], 8, _hoisted_5$4)), [
+                                  }, $options.getColumnPTOptions($props.column, 'rowEditorCancelButton')), [
+                                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), vue.mergeProps({ class: "p-row-editor-cancel-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorCancelIcon')), null, 16))
+                                  ], 16, _hoisted_4$1)), [
                                     [_directive_ripple]
                                   ])
                                 : vue.createCommentVNode("", true)
@@ -799,13 +851,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                           : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 8 }, [
                               vue.createTextVNode(vue.toDisplayString($options.resolveFieldData()), 1)
                             ], 64))
-          ], 38))
+          ], 16))
     }
 
     script$8.render = render$8;
 
     var script$7 = {
         name: 'TableBody',
+        extends: BaseComponent__default["default"],
         emits: [
             'rowgroup-toggle',
             'row-click',
@@ -985,6 +1038,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             columnProp(col, prop) {
                 return utils.ObjectUtils.getVNodeProp(col, prop);
             },
+            getColumnPTOptions(column, key) {
+                return this.ptmo(this.getColumnProp(column), key, {
+                    props: column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp(column) {
+                return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+            },
             shouldRenderRowGroupHeader(value, rowData, i) {
                 let currentRowFieldData = utils.ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
                 let prevRowData = value[i - 1];
@@ -1301,50 +1366,45 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$7 = ["colspan"];
-    const _hoisted_2$6 = ["onClick"];
-    const _hoisted_3$4 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover"];
-    const _hoisted_4$3 = ["id"];
-    const _hoisted_5$3 = ["colspan"];
-    const _hoisted_6$2 = ["colspan"];
-    const _hoisted_7$1 = {
-      key: 1,
-      class: "p-datatable-emptymessage",
-      role: "row"
-    };
-    const _hoisted_8$1 = ["colspan"];
+    const _hoisted_1$4 = ["colspan"];
+    const _hoisted_2$1 = ["onClick"];
+    const _hoisted_3$1 = ["tabindex", "aria-selected", "onClick", "onDblclick", "onContextmenu", "onKeydown", "onDragstart", "onDragover"];
+    const _hoisted_4 = ["id"];
+    const _hoisted_5 = ["colspan"];
+    const _hoisted_6 = ["colspan"];
+    const _hoisted_7 = ["colspan"];
 
     function render$7(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_ChevronDownIcon = vue.resolveComponent("ChevronDownIcon");
       const _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
       const _component_DTBodyCell = vue.resolveComponent("DTBodyCell");
 
-      return (vue.openBlock(), vue.createElementBlock("tbody", {
+      return (vue.openBlock(), vue.createElementBlock("tbody", vue.mergeProps({
         ref: $options.bodyRef,
         class: "p-datatable-tbody",
         role: "rowgroup",
-        style: vue.normalizeStyle($options.bodyStyle)
-      }, [
+        style: $options.bodyStyle
+      }, _ctx.ptm('tbody')), [
         (!$props.empty)
           ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($props.value, (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.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                       key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader',
                       class: "p-rowgroup-header",
-                      style: vue.normalizeStyle($options.rowGroupHeaderStyle),
+                      style: $options.rowGroupHeaderStyle,
                       role: "row"
-                    }, [
-                      vue.createElementVNode("td", {
+                    }, _ctx.ptm('rowgroupHeader')), [
+                      vue.createElementVNode("td", vue.mergeProps({
                         colspan: $options.columnsLength - 1
-                      }, [
+                      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                         ($props.expandableRowGroups)
-                          ? (vue.openBlock(), vue.createElementBlock("button", {
+                          ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                               key: 0,
                               class: "p-row-toggler p-link",
                               onClick: $event => ($options.onRowGroupToggle($event, rowData)),
                               type: "button"
-                            }, [
+                            }, $options.getColumnPTOptions('rowGroupToggler')), [
                               ($props.templates['rowgrouptogglericon'])
                                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
                                     key: 0,
@@ -1357,36 +1417,36 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                           class: vue.normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
                                         }, null, 2))
                                       : ($options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon)
-                                        ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, {
+                                        ? (vue.openBlock(), vue.createBlock(_component_ChevronDownIcon, vue.mergeProps({
                                             key: 1,
                                             class: "p-row-toggler-icon"
-                                          }))
+                                          }, $options.getColumnPTOptions('rowGroupTogglerIcon')), null, 16))
                                         : (!$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon)
                                           ? (vue.openBlock(), vue.createElementBlock("span", {
                                               key: 2,
                                               class: vue.normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
                                             }, null, 2))
                                           : (!$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon)
-                                            ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, {
+                                            ? (vue.openBlock(), vue.createBlock(_component_ChevronRightIcon, vue.mergeProps({
                                                 key: 3,
                                                 class: "p-row-toggler-icon"
-                                              }))
+                                              }, $options.getColumnPTOptions('rowGroupTogglerIcon')), null, 16))
                                             : vue.createCommentVNode("", true)
                                   ], 64))
-                            ], 8, _hoisted_2$6))
+                            ], 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"]))
-                      ], 8, _hoisted_1$7)
-                    ], 4))
+                      ], 16, _hoisted_1$4)
+                    ], 16))
                   : vue.createCommentVNode("", true),
                 ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData) : true)
-                  ? (vue.openBlock(), vue.createElementBlock("tr", {
+                  ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                       key: $options.getRowKey(rowData, $options.getRowIndex(index)),
-                      class: vue.normalizeClass($options.getRowClass(rowData)),
-                      style: vue.normalizeStyle($options.getRowStyle(rowData)),
+                      class: $options.getRowClass(rowData),
+                      style: $options.getRowStyle(rowData),
                       tabindex: $options.setRowTabindex(index),
                       role: "row",
                       "aria-selected": $props.selectionMode ? $options.isSelected(rowData) : null,
@@ -1401,7 +1461,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                       onDragleave: _cache[11] || (_cache[11] = $event => ($options.onRowDragLeave($event))),
                       onDragend: _cache[12] || (_cache[12] = $event => ($options.onRowDragEnd($event))),
                       onDrop: _cache[13] || (_cache[13] = $event => ($options.onRowDrop($event)))
-                    }, [
+                    }, _ctx.ptm('row')), [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
                         return (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
                           ($options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)))
@@ -1433,60 +1493,66 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                 onRowEditInit: _cache[6] || (_cache[6] = $event => ($options.onRowEditInit($event))),
                                 onRowEditSave: _cache[7] || (_cache[7] = $event => ($options.onRowEditSave($event))),
                                 onRowEditCancel: _cache[8] || (_cache[8] = $event => ($options.onRowEditCancel($event))),
-                                onEditingMetaChange: $options.onEditingMetaChange
-                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "isRowExpanded", "expandedRowIcon", "collapsedRowIcon", "onEditingMetaChange"]))
+                                onEditingMetaChange: $options.onEditingMetaChange,
+                                pt: _ctx.pt
+                              }, null, 8, ["rowData", "column", "rowIndex", "index", "selected", "frozenRow", "rowspan", "editMode", "editing", "editingMeta", "responsiveLayout", "virtualScrollerContentProps", "ariaControls", "name", "isRowExpanded", "expandedRowIcon", "collapsedRowIcon", "onEditingMetaChange", "pt"]))
                             : vue.createCommentVNode("", true)
                         ], 64))
                       }), 256))
-                    ], 46, _hoisted_3$4))
+                    ], 16, _hoisted_3$1))
                   : vue.createCommentVNode("", true),
                 ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
-                  ? (vue.openBlock(), vue.createElementBlock("tr", {
+                  ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                       key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
                       id: $options.expandedRowId + '_' + index + '_expansion',
                       class: "p-datatable-row-expansion",
                       role: "row"
-                    }, [
-                      vue.createElementVNode("td", { colspan: $options.columnsLength }, [
+                    }, _ctx.ptm('rowExpansion')), [
+                      vue.createElementVNode("td", vue.mergeProps({ colspan: $options.columnsLength }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['expansion']), {
                           data: rowData,
                           index: $options.getRowIndex(index)
                         }, null, 8, ["data", "index"]))
-                      ], 8, _hoisted_5$3)
-                    ], 8, _hoisted_4$3))
+                      ], 16, _hoisted_5)
+                    ], 16, _hoisted_4))
                   : vue.createCommentVNode("", true),
                 ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
-                  ? (vue.openBlock(), vue.createElementBlock("tr", {
+                  ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                       key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subfooter',
                       class: "p-rowgroup-footer",
                       role: "row"
-                    }, [
-                      vue.createElementVNode("td", {
+                    }, _ctx.ptm('rowgroupFooter')), [
+                      vue.createElementVNode("td", vue.mergeProps({
                         colspan: $options.columnsLength - 1
-                      }, [
+                      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                         (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['groupfooter']), {
                           data: rowData,
                           index: $options.getRowIndex(index)
                         }, null, 8, ["data", "index"]))
-                      ], 8, _hoisted_6$2)
-                    ]))
+                      ], 16, _hoisted_6)
+                    ], 16))
                   : vue.createCommentVNode("", true)
               ], 64))
             }), 256))
-          : (vue.openBlock(), vue.createElementBlock("tr", _hoisted_7$1, [
-              vue.createElementVNode("td", { colspan: $options.columnsLength }, [
+          : (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+              key: 1,
+              class: "p-datatable-emptymessage",
+              role: "row"
+            }, _ctx.ptm('emptyMessage')), [
+              vue.createElementVNode("td", vue.mergeProps({ colspan: $options.columnsLength }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                 ($props.templates.empty)
                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.empty), { key: 0 }))
                   : vue.createCommentVNode("", true)
-              ], 8, _hoisted_8$1)
-            ]))
-      ], 4))
+              ], 16, _hoisted_7)
+            ], 16))
+      ], 16))
     }
 
     script$7.render = render$7;
 
     var script$6 = {
         name: 'FooterCell',
+        extends: BaseComponent__default["default"],
         props: {
             column: {
                 type: Object,
@@ -1512,6 +1578,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             columnProp(prop) {
                 return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+            },
             updateStickyPosition() {
                 if (this.columnProp('frozen')) {
                     let align = this.columnProp('alignFrozen');
@@ -1557,16 +1635,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$6 = ["colspan", "rowspan"];
+    const _hoisted_1$3 = ["colspan", "rowspan"];
 
     function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("td", {
-        style: vue.normalizeStyle($options.containerStyle),
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("td", vue.mergeProps({
+        style: $options.containerStyle,
+        class: $options.containerClass,
         role: "cell",
         colspan: $options.columnProp('colspan'),
         rowspan: $options.columnProp('rowspan')
-      }, [
+      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('footerCell') }), [
         ($props.column.children && $props.column.children.footer)
           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.footer), {
               key: 0,
@@ -1574,13 +1652,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             }, null, 8, ["column"]))
           : vue.createCommentVNode("", true),
         vue.createTextVNode(" " + vue.toDisplayString($options.columnProp('footer')), 1)
-      ], 14, _hoisted_1$6))
+      ], 16, _hoisted_1$3))
     }
 
     script$6.render = render$6;
 
     var script$5 = {
         name: 'TableFooter',
+        extends: BaseComponent__default["default"],
         props: {
             columnGroup: {
                 type: null,
@@ -1595,6 +1674,30 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             columnProp(col, prop) {
                 return utils.ObjectUtils.getVNodeProp(col, prop);
             },
+            getColumnGroupPTOptions(key) {
+                return this.ptmo(this.getColumnGroupProps(), key, {
+                    props: this.getColumnGroupProps(),
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnGroupProps() {
+                return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
+            },
+            getRowPTOptions(row, key) {
+                return this.ptmo(this.getRowProp(row), key, {
+                    props: row.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getRowProp(row) {
+                return row.props && row.props.pt ? row.props.pt : undefined; //@todo
+            },
             getFooterRows() {
                 let rows = [];
 
@@ -1648,23 +1751,20 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$5 = {
-      key: 0,
-      class: "p-datatable-tfoot",
-      role: "rowgroup"
-    };
-    const _hoisted_2$5 = {
-      key: 0,
-      role: "row"
-    };
-
     function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DTFooterCell = vue.resolveComponent("DTFooterCell");
 
       return ($options.hasFooter)
-        ? (vue.openBlock(), vue.createElementBlock("tfoot", _hoisted_1$5, [
+        ? (vue.openBlock(), vue.createElementBlock("tfoot", vue.mergeProps({
+            key: 0,
+            class: "p-datatable-tfoot",
+            role: "rowgroup"
+          }, { ..._ctx.ptm('tfoot'), ...$options.getColumnGroupPTOptions('root') }), [
             (!$props.columnGroup)
-              ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_2$5, [
+              ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+                  key: 0,
+                  role: "row"
+                }, _ctx.ptm('footerRow')), [
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
                     return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                       key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -1672,17 +1772,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                       (!$options.columnProp(col, 'hidden'))
                         ? (vue.openBlock(), vue.createBlock(_component_DTFooterCell, {
                             key: 0,
-                            column: col
-                          }, null, 8, ["column"]))
+                            column: col,
+                            pt: _ctx.pt
+                          }, null, 8, ["column", "pt"]))
                         : vue.createCommentVNode("", true)
                     ], 64))
                   }), 128))
-                ]))
+                ], 16))
               : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList($options.getFooterRows(), (row, i) => {
-                  return (vue.openBlock(), vue.createElementBlock("tr", {
+                  return (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                     key: i,
                     role: "row"
-                  }, [
+                  }, $options.getRowPTOptions(row, 'root')), [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.getFooterColumns(row), (col, j) => {
                       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
@@ -1690,14 +1791,15 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                         (!$options.columnProp(col, 'hidden'))
                           ? (vue.openBlock(), vue.createBlock(_component_DTFooterCell, {
                               key: 0,
-                              column: col
-                            }, null, 8, ["column"]))
+                              column: col,
+                              pt: _ctx.pt
+                            }, null, 8, ["column", "pt"]))
                           : vue.createCommentVNode("", true)
                       ], 64))
                     }), 128))
-                  ]))
+                  ], 16))
                 }), 128))
-          ]))
+          ], 16))
         : vue.createCommentVNode("", true)
     }
 
@@ -1705,6 +1807,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
 
     var script$4 = {
         name: 'ColumnFilter',
+        extends: BaseComponent__default["default"],
         emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
         props: {
             field: {
@@ -1810,7 +1913,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             filterInputProps: {
                 type: null,
                 default: null
-            }
+            },
+            column: null
         },
         data() {
             return {
@@ -1846,6 +1950,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             }
         },
         methods: {
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
+            },
             clearFilter() {
                 let _filters = { ...this.filters };
 
@@ -2218,24 +2334,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$4 = ["aria-label", "aria-expanded", "aria-controls"];
-    const _hoisted_2$4 = ["id", "aria-modal"];
-    const _hoisted_3$3 = {
-      key: 0,
-      class: "p-column-filter-row-items"
-    };
-    const _hoisted_4$2 = ["onClick", "onKeydown", "tabindex"];
-    const _hoisted_5$2 = /*#__PURE__*/vue.createElementVNode("li", { class: "p-column-filter-separator" }, null, -1);
-    const _hoisted_6$1 = {
-      key: 0,
-      class: "p-column-filter-operator"
-    };
-    const _hoisted_7 = { class: "p-column-filter-constraints" };
-    const _hoisted_8 = {
-      key: 1,
-      class: "p-column-filter-add-rule"
-    };
-    const _hoisted_9 = { class: "p-column-filter-buttonbar" };
+    const _hoisted_1$2 = ["aria-label", "aria-expanded", "aria-controls"];
+    const _hoisted_2 = ["id", "aria-modal"];
+    const _hoisted_3 = ["onClick", "onKeydown", "tabindex"];
 
     function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_CFDropdown = vue.resolveComponent("CFDropdown");
@@ -2243,14 +2344,12 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       const _component_Portal = vue.resolveComponent("Portal");
       const _directive_focustrap = vue.resolveDirective("focustrap");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, $options.getColumnPTOptions('columnFilter')), [
         ($props.display === 'row')
           ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 0,
               class: "p-fluid p-column-filter-element"
-            }, $props.filterInputProps), [
+            }, { ...$props.filterInputProps, ...$options.getColumnPTOptions('filterInput') }), [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
                 field: $props.field,
                 filterModel: $props.filters[$props.field],
@@ -2259,30 +2358,30 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             ], 16))
           : vue.createCommentVNode("", true),
         ($options.showMenuButton)
-          ? (vue.openBlock(), vue.createElementBlock("button", {
+          ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
               key: 1,
               ref: "icon",
               type: "button",
-              class: vue.normalizeClass(["p-column-filter-menu-button p-link", { 'p-column-filter-menu-button-open': $data.overlayVisible, 'p-column-filter-menu-button-active': $options.hasFilter() }]),
+              class: ["p-column-filter-menu-button p-link", { 'p-column-filter-menu-button-open': $data.overlayVisible, 'p-column-filter-menu-button-active': $options.hasFilter() }],
               "aria-label": $options.filterMenuButtonAriaLabel,
               "aria-haspopup": "true",
               "aria-expanded": $data.overlayVisible,
               "aria-controls": $options.overlayId,
               onClick: _cache[0] || (_cache[0] = $event => ($options.toggleMenu())),
               onKeydown: _cache[1] || (_cache[1] = $event => ($options.onToggleButtonKeyDown($event)))
-            }, [
+            }, $options.getColumnPTOptions('filterMenuButton')), [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon')))
-            ], 42, _hoisted_1$4))
+            ], 16, _hoisted_1$2))
           : vue.createCommentVNode("", true),
         ($props.showClearButton && $props.display === 'row')
-          ? (vue.openBlock(), vue.createElementBlock("button", {
+          ? (vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
               key: 2,
-              class: vue.normalizeClass([{ 'p-hidden-space': !$options.hasRowFilter() }, "p-column-filter-clear-button p-link"]),
+              class: [{ 'p-hidden-space': !$options.hasRowFilter() }, "p-column-filter-clear-button p-link"],
               type: "button",
               onClick: _cache[2] || (_cache[2] = $event => ($options.clearFilter()))
-            }, [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon')))
-            ], 2))
+            }, $options.getColumnPTOptions('headerFilterClearButton')), [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), vue.normalizeProps(vue.guardReactiveProps($options.getColumnPTOptions('filterClearIcon'))), null, 16))
+            ], 16))
           : vue.createCommentVNode("", true),
         vue.createVNode(_component_Portal, null, {
           default: vue.withCtx(() => [
@@ -2294,49 +2393,55 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             }, {
               default: vue.withCtx(() => [
                 ($data.overlayVisible)
-                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+                  ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                       key: 0,
                       ref: $options.overlayRef,
                       id: $options.overlayId,
                       "aria-modal": $data.overlayVisible,
                       role: "dialog",
-                      class: vue.normalizeClass($options.overlayClass),
+                      class: $options.overlayClass,
                       onKeydown: _cache[10] || (_cache[10] = vue.withKeys((...args) => ($options.hide && $options.hide(...args)), ["escape"])),
                       onClick: _cache[11] || (_cache[11] = (...args) => ($options.onContentClick && $options.onContentClick(...args))),
                       onMousedown: _cache[12] || (_cache[12] = (...args) => ($options.onContentMouseDown && $options.onContentMouseDown(...args)))
-                    }, [
+                    }, $options.getColumnPTOptions('filterOverlay')), [
                       (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterHeaderTemplate), {
                         field: $props.field,
                         filterModel: $props.filters[$props.field],
                         filterCallback: $options.filterCallback
                       }, null, 8, ["field", "filterModel", "filterCallback"])),
                       ($props.display === 'row')
-                        ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_3$3, [
+                        ? (vue.openBlock(), vue.createElementBlock("ul", vue.mergeProps({
+                            key: 0,
+                            class: "p-column-filter-row-items"
+                          }, $options.getColumnPTOptions('filterRowItems')), [
                             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.matchModes, (matchMode, i) => {
-                              return (vue.openBlock(), vue.createElementBlock("li", {
+                              return (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                 key: matchMode.label,
-                                class: vue.normalizeClass(["p-column-filter-row-item", { 'p-highlight': $options.isRowMatchModeSelected(matchMode.value) }]),
+                                class: ["p-column-filter-row-item", { 'p-highlight': $options.isRowMatchModeSelected(matchMode.value) }],
                                 onClick: $event => ($options.onRowMatchModeChange(matchMode.value)),
                                 onKeydown: [
                                   _cache[3] || (_cache[3] = $event => ($options.onRowMatchModeKeyDown($event))),
                                   vue.withKeys(vue.withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
                                 ],
                                 tabindex: i === 0 ? '0' : null
-                              }, vue.toDisplayString(matchMode.label), 43, _hoisted_4$2))
+                              }, $options.getColumnPTOptions('filterRowItem')), vue.toDisplayString(matchMode.label), 17, _hoisted_3))
                             }), 128)),
-                            _hoisted_5$2,
-                            vue.createElementVNode("li", {
+                            vue.createElementVNode("li", vue.mergeProps({ class: "p-column-filter-separator" }, $options.getColumnPTOptions('filterInput')), null, 16),
+                            vue.createElementVNode("li", vue.mergeProps({
                               class: "p-column-filter-row-item",
                               onClick: _cache[4] || (_cache[4] = $event => ($options.clearFilter())),
                               onKeydown: [
                                 _cache[5] || (_cache[5] = $event => ($options.onRowMatchModeKeyDown($event))),
                                 _cache[6] || (_cache[6] = vue.withKeys($event => (_ctx.onRowClearItemClick()), ["enter"]))
                               ]
-                            }, vue.toDisplayString($options.noFilterLabel), 33)
-                          ]))
+                            }, $options.getColumnPTOptions('filterRowItem')), vue.toDisplayString($options.noFilterLabel), 17)
+                          ], 16))
                         : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                             ($options.isShowOperator)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_6$1, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                                  key: 0,
+                                  class: "p-column-filter-operator"
+                                }, $options.getColumnPTOptions('filterOperator')), [
                                   vue.createVNode(_component_CFDropdown, {
                                     options: $options.operatorOptions,
                                     modelValue: $options.operator,
@@ -2344,16 +2449,17 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                     class: "p-column-filter-operator-dropdown",
                                     optionLabel: "label",
                                     optionValue: "value",
-                                    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onOperatorChange($event)))
-                                  }, null, 8, ["options", "modelValue", "aria-label"])
-                                ]))
+                                    "onUpdate:modelValue": _cache[7] || (_cache[7] = $event => ($options.onOperatorChange($event))),
+                                    pt: $options.getColumnPTOptions('filterOperatorDropdown')
+                                  }, null, 8, ["options", "modelValue", "aria-label", "pt"])
+                                ], 16))
                               : vue.createCommentVNode("", true),
-                            vue.createElementVNode("div", _hoisted_7, [
+                            vue.createElementVNode("div", vue.mergeProps({ class: "p-column-filter-constraints" }, $options.getColumnPTOptions('filterConstraints')), [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.fieldConstraints, (fieldConstraint, i) => {
-                                return (vue.openBlock(), vue.createElementBlock("div", {
+                                return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                                   key: i,
                                   class: "p-column-filter-constraint"
-                                }, [
+                                }, $options.getColumnPTOptions('filterConstraint')), [
                                   ($options.isShowMatchModes)
                                     ? (vue.openBlock(), vue.createBlock(_component_CFDropdown, {
                                         key: 0,
@@ -2363,8 +2469,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                         optionLabel: "label",
                                         optionValue: "value",
                                         "aria-label": $options.filterConstraintAriaLabel,
-                                        "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i))
-                                      }, null, 8, ["options", "modelValue", "aria-label", "onUpdate:modelValue"]))
+                                        "onUpdate:modelValue": $event => ($options.onMenuMatchModeChange($event, i)),
+                                        pt: $options.getColumnPTOptions('filterMatchModeDropdown')
+                                      }, null, 8, ["options", "modelValue", "aria-label", "onUpdate:modelValue", "pt"]))
                                     : vue.createCommentVNode("", true),
                                   ($props.display === 'menu')
                                     ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterElement), {
@@ -2374,54 +2481,60 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                         filterCallback: $options.filterCallback
                                       }, null, 8, ["field", "filterModel", "filterCallback"]))
                                     : vue.createCommentVNode("", true),
-                                  vue.createElementVNode("div", null, [
+                                  vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps($options.getColumnPTOptions('filterRemove'))), [
                                     ($options.showRemoveIcon)
                                       ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
                                           key: 0,
                                           type: "button",
                                           class: "p-column-filter-remove-button p-button-text p-button-danger p-button-sm",
                                           onClick: $event => ($options.removeConstraint(i)),
-                                          label: $options.removeRuleButtonLabel
+                                          label: $options.removeRuleButtonLabel,
+                                          pt: $options.getColumnPTOptions('filterRemoveButton')
                                         }, {
                                           icon: vue.withCtx((iconProps) => [
-                                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), {
-                                              class: vue.normalizeClass(iconProps.class)
-                                            }, null, 8, ["class"]))
+                                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), vue.mergeProps({
+                                              class: iconProps.class
+                                            }, $options.getColumnPTOptions('filterRemoveButton')['icon']), null, 16, ["class"]))
                                           ]),
                                           _: 2
-                                        }, 1032, ["onClick", "label"]))
+                                        }, 1032, ["onClick", "label", "pt"]))
                                       : vue.createCommentVNode("", true)
-                                  ])
-                                ]))
+                                  ], 16)
+                                ], 16))
                               }), 128))
-                            ]),
+                            ], 16),
                             ($options.isShowAddConstraint)
-                              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8, [
+                              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                                  key: 1,
+                                  class: "p-column-filter-add-rule"
+                                }, $options.getColumnPTOptions('filterAddRule')), [
                                   vue.createVNode(_component_CFButton, {
                                     type: "button",
                                     label: $options.addRuleButtonLabel,
                                     iconPos: "left",
                                     class: "p-column-filter-add-button p-button-text p-button-sm",
-                                    onClick: _cache[8] || (_cache[8] = $event => ($options.addConstraint()))
+                                    onClick: _cache[8] || (_cache[8] = $event => ($options.addConstraint())),
+                                    pt: $options.getColumnPTOptions('filterAddRuleButton')
                                   }, {
                                     icon: vue.withCtx((iconProps) => [
-                                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), {
-                                        class: vue.normalizeClass(iconProps.class)
-                                      }, null, 8, ["class"]))
+                                      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), vue.mergeProps({
+                                        class: iconProps.class
+                                      }, $options.getColumnPTOptions('filterAddRuleButton')['icon']), null, 16, ["class"]))
                                     ]),
                                     _: 1
-                                  }, 8, ["label"])
-                                ]))
+                                  }, 8, ["label", "pt"])
+                                ], 16))
                               : vue.createCommentVNode("", true),
-                            vue.createElementVNode("div", _hoisted_9, [
+                            vue.createElementVNode("div", vue.mergeProps({ class: "p-column-filter-buttonbar" }, $options.getColumnPTOptions('filterButtonbar')), [
                               (!$props.filterClearTemplate && $props.showClearButton)
                                 ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
                                     key: 0,
                                     type: "button",
                                     class: "p-button-outlined p-button-sm",
                                     label: $options.clearButtonLabel,
-                                    onClick: $options.clearFilter
-                                  }, null, 8, ["label", "onClick"]))
+                                    onClick: $options.clearFilter,
+                                    pt: $options.getColumnPTOptions('filterClearButton')
+                                  }, null, 8, ["label", "onClick", "pt"]))
                                 : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterClearTemplate), {
                                     key: 1,
                                     field: $props.field,
@@ -2431,13 +2544,13 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                               ($props.showApplyButton)
                                 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                                     (!$props.filterApplyTemplate)
-                                      ? (vue.openBlock(), vue.createBlock(_component_CFButton, {
+                                      ? (vue.openBlock(), vue.createBlock(_component_CFButton, vue.mergeProps({
                                           key: 0,
                                           type: "button",
                                           class: "p-button-sm",
                                           label: $options.applyButtonLabel,
                                           onClick: _cache[9] || (_cache[9] = $event => ($options.applyFilter()))
-                                        }, null, 8, ["label"]))
+                                        }, $options.getColumnPTOptions('filterApplyButton')), null, 16, ["label"]))
                                       : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterApplyTemplate), {
                                           key: 1,
                                           field: $props.field,
@@ -2446,14 +2559,14 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                         }, null, 8, ["field", "filterModel", "filterCallback"]))
                                   ], 64))
                                 : vue.createCommentVNode("", true)
-                            ])
+                            ], 16)
                           ], 64)),
                       (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterFooterTemplate), {
                         field: $props.field,
                         filterModel: $props.filters[$props.field],
                         filterCallback: $options.filterCallback
                       }, null, 8, ["field", "filterModel", "filterCallback"]))
-                    ], 42, _hoisted_2$4)), [
+                    ], 16, _hoisted_2)), [
                       [_directive_focustrap, { autoFocus: true }]
                     ])
                   : vue.createCommentVNode("", true)
@@ -2463,17 +2576,19 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
           ]),
           _: 1
         })
-      ], 2))
+      ], 16))
     }
 
     script$4.render = render$4;
 
     var script$3 = {
         name: 'HeaderCheckbox',
+        extends: BaseComponent__default["default"],
         emits: ['change'],
         props: {
             checked: null,
             disabled: null,
+            column: null,
             headerCheckboxIconTemplate: {
                 type: Function,
                 default: null
@@ -2485,6 +2600,23 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             };
         },
         methods: {
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    },
+                    context: {
+                        checked: this.checked,
+                        focused: this.focused,
+                        disabled: this.disabled
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+            },
             onClick(event) {
                 if (!this.disabled) {
                     this.$emit('change', {
@@ -2512,19 +2644,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$3 = { class: "p-hidden-accessible" };
-    const _hoisted_2$3 = ["checked", "disabled", "tabindex", "aria-label"];
+    const _hoisted_1$1 = ["checked", "disabled", "tabindex", "aria-label"];
 
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_CheckIcon = vue.resolveComponent("CheckIcon");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused, 'p-disabled': $props.disabled }]),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: ['p-checkbox p-component', { 'p-checkbox-focused': $data.focused, 'p-disabled': $props.disabled }],
         onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args))),
         onKeydown: _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
-      }, [
-        vue.createElementVNode("div", _hoisted_1$3, [
-          vue.createElementVNode("input", {
+      }, $options.getColumnPTOptions('headerCheckboxWrapper')), [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenHeaderInputWrapper')), [
+          vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             type: "checkbox",
             checked: $props.checked,
@@ -2533,30 +2664,31 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             "aria-label": $options.headerCheckboxAriaLabel,
             onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
             onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event)))
-          }, null, 40, _hoisted_2$3)
-        ]),
-        vue.createElementVNode("div", {
+          }, $options.getColumnPTOptions('hiddenHeaderInput')), null, 16, _hoisted_1$1)
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({
           ref: "box",
-          class: vue.normalizeClass(['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }])
-        }, [
+          class: ['p-checkbox-box p-component', { 'p-highlight': $props.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]
+        }, $options.getColumnPTOptions('headerCheckbox')), [
           ($props.headerCheckboxIconTemplate)
             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.headerCheckboxIconTemplate), {
                 key: 0,
                 checked: $props.checked,
                 class: "p-checkbox-icon"
               }, null, 8, ["checked"]))
-            : (vue.openBlock(), vue.createBlock(_component_CheckIcon, {
+            : (vue.openBlock(), vue.createBlock(_component_CheckIcon, vue.mergeProps({
                 key: 1,
                 class: "p-checkbox-icon"
-              }))
-        ], 2)
-      ], 34))
+              }, $options.getColumnPTOptions('headerCheckboxIcon')), null, 16))
+        ], 16)
+      ], 16))
     }
 
     script$3.render = render$3;
 
     var script$2 = {
         name: 'HeaderCell',
+        extends: BaseComponent__default["default"],
         emits: [
             'column-click',
             'column-mousedown',
@@ -2664,6 +2796,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             columnProp(prop) {
                 return utils.ObjectUtils.getVNodeProp(this.column, prop);
             },
+            getColumnPTOptions(key) {
+                return this.ptmo(this.getColumnProp(), key, {
+                    props: this.column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp() {
+                return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+            },
             onClick(event) {
                 this.$emit('column-click', { originalEvent: event, column: this.column });
             },
@@ -2815,25 +2959,15 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$2 = ["tabindex", "colspan", "rowspan", "aria-sort"];
-    const _hoisted_2$2 = { class: "p-column-header-content" };
-    const _hoisted_3$2 = {
-      key: 1,
-      class: "p-column-title"
-    };
-    const _hoisted_4$1 = { key: 2 };
-    const _hoisted_5$1 = {
-      key: 3,
-      class: "p-sortable-column-badge"
-    };
+    const _hoisted_1 = ["tabindex", "colspan", "rowspan", "aria-sort"];
 
     function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DTHeaderCheckbox = vue.resolveComponent("DTHeaderCheckbox");
       const _component_DTColumnFilter = vue.resolveComponent("DTColumnFilter");
 
-      return (vue.openBlock(), vue.createElementBlock("th", {
-        style: vue.normalizeStyle($options.containerStyle),
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
+        style: $options.containerStyle,
+        class: $options.containerClass,
         tabindex: $options.columnProp('sortable') ? '0' : null,
         role: "columnheader",
         colspan: $options.columnProp('colspan'),
@@ -2846,15 +2980,15 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         onDragover: _cache[12] || (_cache[12] = (...args) => ($options.onDragOver && $options.onDragOver(...args))),
         onDragleave: _cache[13] || (_cache[13] = (...args) => ($options.onDragLeave && $options.onDragLeave(...args))),
         onDrop: _cache[14] || (_cache[14] = (...args) => ($options.onDrop && $options.onDrop(...args)))
-      }, [
+      }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('headerCell') }), [
         ($props.resizableColumns && !$options.columnProp('frozen'))
-          ? (vue.openBlock(), vue.createElementBlock("span", {
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
               key: 0,
               class: "p-column-resizer",
               onMousedown: _cache[0] || (_cache[0] = (...args) => ($options.onResizeStart && $options.onResizeStart(...args)))
-            }, null, 32))
+            }, $options.getColumnPTOptions('columnResizer')), null, 16))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2$2, [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-column-header-content" }, $options.getColumnPTOptions('headerContent')), [
           ($props.column.children && $props.column.children.header)
             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.column.children.header), {
                 key: 0,
@@ -2862,19 +2996,25 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               }, null, 8, ["column"]))
             : vue.createCommentVNode("", true),
           ($options.columnProp('header'))
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$2, vue.toDisplayString($options.columnProp('header')), 1))
+            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                key: 1,
+                class: "p-column-title"
+              }, $options.getColumnPTOptions('headerTitle')), vue.toDisplayString($options.columnProp('header')), 17))
             : vue.createCommentVNode("", true),
           ($options.columnProp('sortable'))
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, [
+            ? (vue.openBlock(), vue.createElementBlock("span", vue.normalizeProps(vue.mergeProps({ key: 2 }, $options.getColumnPTOptions('sort'))), [
                 (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(($props.column.children && $props.column.children.sorticon) || $options.sortableColumnIcon), {
                   sorted: $options.sortState.sorted,
                   sortOrder: $options.sortState.sortOrder,
                   class: "p-sortable-column-icon"
                 }, null, 8, ["sorted", "sortOrder"]))
-              ]))
+              ], 16))
             : vue.createCommentVNode("", true),
           ($options.isMultiSorted())
-            ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1, vue.toDisplayString($options.getBadgeValue()), 1))
+            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                key: 3,
+                class: "p-sortable-column-badge"
+              }, $options.getColumnPTOptions('sortBadge')), vue.toDisplayString($options.getBadgeValue()), 17))
             : vue.createCommentVNode("", true),
           ($options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row')
             ? (vue.openBlock(), vue.createBlock(_component_DTHeaderCheckbox, {
@@ -2882,8 +3022,10 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 checked: $props.allRowsSelected,
                 onChange: $options.onHeaderCheckboxChange,
                 disabled: $props.empty,
-                headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate
-              }, null, 8, ["checked", "onChange", "disabled", "headerCheckboxIconTemplate"]))
+                headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate,
+                column: $props.column,
+                pt: _ctx.pt
+              }, null, 8, ["checked", "onChange", "disabled", "headerCheckboxIconTemplate", "column", "pt"]))
             : vue.createCommentVNode("", true),
           ($props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter)
             ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
@@ -2919,17 +3061,20 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 onMatchmodeChange: _cache[4] || (_cache[4] = $event => (_ctx.$emit('matchmode-change', $event))),
                 onConstraintAdd: _cache[5] || (_cache[5] = $event => (_ctx.$emit('constraint-add', $event))),
                 onConstraintRemove: _cache[6] || (_cache[6] = $event => (_ctx.$emit('constraint-remove', $event))),
-                onApplyClick: _cache[7] || (_cache[7] = $event => (_ctx.$emit('apply-click', $event)))
-              }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
+                onApplyClick: _cache[7] || (_cache[7] = $event => (_ctx.$emit('apply-click', $event))),
+                pt: _ctx.pt,
+                column: $props.column
+              }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints", "pt", "column"]))
             : vue.createCommentVNode("", true)
-        ])
-      ], 46, _hoisted_1$2))
+        ], 16)
+      ], 16, _hoisted_1))
     }
 
     script$2.render = render$2;
 
     var script$1 = {
         name: 'TableHeader',
+        extends: BaseComponent__default["default"],
         emits: [
             'column-click',
             'column-mousedown',
@@ -3026,6 +3171,42 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
             columnProp(col, prop) {
                 return utils.ObjectUtils.getVNodeProp(col, prop);
             },
+            getColumnGroupPTOptions(key) {
+                return this.ptmo(this.getColumnGroupProps(), key, {
+                    props: this.getColumnGroupProps(),
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnGroupProps() {
+                return this.columnGroup && this.columnGroup.props && this.columnGroup.props.pt ? this.columnGroup.props.pt : undefined; //@todo
+            },
+            getRowPTOptions(row, key) {
+                return this.ptmo(this.getRowProp(row), key, {
+                    props: row.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getRowProp(row) {
+                return row.props && row.props.pt ? row.props.pt : undefined; //@todo
+            },
+            getColumnPTOptions(column, key) {
+                return this.ptmo(this.getColumnProp(column), key, {
+                    props: column.props,
+                    parent: {
+                        props: this.$props,
+                        state: this.$data
+                    }
+                });
+            },
+            getColumnProp(column) {
+                return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+            },
             getFilterColumnHeaderClass(column) {
                 return [
                     'p-filter-column',
@@ -3076,25 +3257,18 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1$1 = {
-      class: "p-datatable-thead",
-      role: "rowgroup"
-    };
-    const _hoisted_2$1 = { role: "row" };
-    const _hoisted_3$1 = {
-      key: 0,
-      role: "row"
-    };
-
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_DTHeaderCell = vue.resolveComponent("DTHeaderCell");
       const _component_DTHeaderCheckbox = vue.resolveComponent("DTHeaderCheckbox");
       const _component_DTColumnFilter = vue.resolveComponent("DTColumnFilter");
 
-      return (vue.openBlock(), vue.createElementBlock("thead", _hoisted_1$1, [
+      return (vue.openBlock(), vue.createElementBlock("thead", vue.mergeProps({
+        class: "p-datatable-thead",
+        role: "rowgroup"
+      }, { ..._ctx.ptm('thead'), ...$options.getColumnGroupPTOptions('root') }), [
         (!$props.columnGroup)
           ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              vue.createElementVNode("tr", _hoisted_2$1, [
+              vue.createElementVNode("tr", vue.mergeProps({ role: "row" }, _ctx.ptm('headerRow')), [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -3132,31 +3306,37 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                           onConstraintAdd: _cache[12] || (_cache[12] = $event => (_ctx.$emit('constraint-add', $event))),
                           onConstraintRemove: _cache[13] || (_cache[13] = $event => (_ctx.$emit('constraint-remove', $event))),
                           onApplyClick: _cache[14] || (_cache[14] = $event => (_ctx.$emit('apply-click', $event))),
-                          headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate
-                        }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "headerCheckboxIconTemplate"]))
+                          headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate,
+                          pt: _ctx.pt
+                        }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "filterInputProps", "headerCheckboxIconTemplate", "pt"]))
                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ]),
+              ], 16),
               ($props.filterDisplay === 'row')
-                ? (vue.openBlock(), vue.createElementBlock("tr", _hoisted_3$1, [
+                ? (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
+                    key: 0,
+                    role: "row"
+                  }, _ctx.ptm('headerRow')), [
                     (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.columns, (col, i) => {
                       return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                         key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
                       }, [
                         (!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp(col, 'field')))
-                          ? (vue.openBlock(), vue.createElementBlock("th", {
+                          ? (vue.openBlock(), vue.createElementBlock("th", vue.mergeProps({
                               key: 0,
-                              style: vue.normalizeStyle($options.getFilterColumnHeaderStyle(col)),
-                              class: vue.normalizeClass($options.getFilterColumnHeaderClass(col))
-                            }, [
+                              style: $options.getFilterColumnHeaderStyle(col),
+                              class: $options.getFilterColumnHeaderClass(col)
+                            }, { ...$options.getColumnPTOptions(col, 'root'), ...$options.getColumnPTOptions(col, 'headerCell') }), [
                               ($options.columnProp(col, 'selectionMode') === 'multiple')
                                 ? (vue.openBlock(), vue.createBlock(_component_DTHeaderCheckbox, {
                                     key: 0,
                                     checked: $props.allRowsSelected,
                                     disabled: $props.empty,
-                                    onChange: _cache[15] || (_cache[15] = $event => (_ctx.$emit('checkbox-change', $event)))
-                                  }, null, 8, ["checked", "disabled"]))
+                                    onChange: _cache[15] || (_cache[15] = $event => (_ctx.$emit('checkbox-change', $event))),
+                                    column: col,
+                                    pt: _ctx.pt
+                                  }, null, 8, ["checked", "disabled", "column", "pt"]))
                                 : vue.createCommentVNode("", true),
                               (col.children && col.children.filter)
                                 ? (vue.openBlock(), vue.createBlock(_component_DTColumnFilter, {
@@ -3192,21 +3372,23 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                                     onMatchmodeChange: _cache[19] || (_cache[19] = $event => (_ctx.$emit('matchmode-change', $event))),
                                     onConstraintAdd: _cache[20] || (_cache[20] = $event => (_ctx.$emit('constraint-add', $event))),
                                     onConstraintRemove: _cache[21] || (_cache[21] = $event => (_ctx.$emit('constraint-remove', $event))),
-                                    onApplyClick: _cache[22] || (_cache[22] = $event => (_ctx.$emit('apply-click', $event)))
-                                  }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints"]))
+                                    onApplyClick: _cache[22] || (_cache[22] = $event => (_ctx.$emit('apply-click', $event))),
+                                    pt: _ctx.pt,
+                                    column: col
+                                  }, null, 8, ["field", "type", "showMenu", "filterElement", "filterHeaderTemplate", "filterFooterTemplate", "filterClearTemplate", "filterApplyTemplate", "filterIconTemplate", "filterAddIconTemplate", "filterRemoveIconTemplate", "filterClearIconTemplate", "filters", "filtersStore", "filterInputProps", "filterMenuStyle", "filterMenuClass", "showOperator", "showClearButton", "showApplyButton", "showMatchModes", "showAddButton", "matchModeOptions", "maxConstraints", "pt", "column"]))
                                 : vue.createCommentVNode("", true)
-                            ], 6))
+                            ], 16))
                           : vue.createCommentVNode("", true)
                       ], 64))
                     }), 128))
-                  ]))
+                  ], 16))
                 : vue.createCommentVNode("", true)
             ], 64))
           : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 1 }, vue.renderList($options.getHeaderRows(), (row, i) => {
-              return (vue.openBlock(), vue.createElementBlock("tr", {
+              return (vue.openBlock(), vue.createElementBlock("tr", vue.mergeProps({
                 key: i,
                 role: "row"
-              }, [
+              }, $options.getRowPTOptions(row, 'root')), [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.getHeaderColumns(row), (col, j) => {
                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
@@ -3236,20 +3418,22 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                           onConstraintAdd: _cache[30] || (_cache[30] = $event => (_ctx.$emit('constraint-add', $event))),
                           onConstraintRemove: _cache[31] || (_cache[31] = $event => (_ctx.$emit('constraint-remove', $event))),
                           onApplyClick: _cache[32] || (_cache[32] = $event => (_ctx.$emit('apply-click', $event))),
-                          headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate
-                        }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "headerCheckboxIconTemplate"]))
+                          headerCheckboxIconTemplate: $props.headerCheckboxIconTemplate,
+                          pt: _ctx.pt
+                        }, null, 8, ["column", "groupRowsBy", "groupRowSortField", "sortMode", "sortField", "sortOrder", "multiSortMeta", "allRowsSelected", "empty", "filters", "filterDisplay", "filtersStore", "headerCheckboxIconTemplate", "pt"]))
                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ]))
+              ], 16))
             }), 128))
-      ]))
+      ], 16))
     }
 
     script$1.render = render$1;
 
     var script = {
         name: 'DataTable',
+        extends: BaseComponent__default["default"],
         emits: [
             'value-change',
             'update:first',
@@ -5301,36 +5485,6 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-datatable-loading-overlay p-component-overlay"
-    };
-    const _hoisted_2 = {
-      key: 1,
-      class: "p-datatable-header"
-    };
-    const _hoisted_3 = {
-      key: 3,
-      class: "p-datatable-footer"
-    };
-    const _hoisted_4 = {
-      ref: "resizeHelper",
-      class: "p-column-resizer-helper",
-      style: {"display":"none"}
-    };
-    const _hoisted_5 = {
-      key: 5,
-      ref: "reorderIndicatorUp",
-      class: "p-datatable-reorder-indicator-up",
-      style: {"position":"absolute","display":"none"}
-    };
-    const _hoisted_6 = {
-      key: 6,
-      ref: "reorderIndicatorDown",
-      class: "p-datatable-reorder-indicator-down",
-      style: {"position":"absolute","display":"none"}
-    };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
       const _component_DTPaginator = vue.resolveComponent("DTPaginator");
@@ -5339,13 +5493,16 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
       const _component_DTTableFooter = vue.resolveComponent("DTTableFooter");
       const _component_DTVirtualScroller = vue.resolveComponent("DTVirtualScroller");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: $options.containerClass,
         "data-scrollselectors": ".p-datatable-wrapper"
-      }, [
+      }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "default"),
         ($props.loading)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 0,
+              class: "p-datatable-loading-overlay p-component-overlay"
+            }, _ctx.ptm('loadingOverlay')), [
               (_ctx.$slots.loading)
                 ? vue.renderSlot(_ctx.$slots, "loading", { key: 0 })
                 : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
@@ -5355,22 +5512,25 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                           class: "p-datatable-loading-icon"
                         }))
                       : ($props.loadingIcon)
-                        ? (vue.openBlock(), vue.createElementBlock("i", {
+                        ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
                             key: 1,
-                            class: vue.normalizeClass(['p-datatable-loading-icon pi-spin', $props.loadingIcon])
-                          }, null, 2))
-                        : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                            class: ['p-datatable-loading-icon pi-spin', $props.loadingIcon]
+                          }, _ctx.ptm('loadingIcon')), null, 16))
+                        : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
                             key: 2,
                             spin: "",
                             class: "p-datatable-loading-icon"
-                          }))
+                          }, _ctx.ptm('loadingIcon')), null, 16))
                   ], 64))
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         (_ctx.$slots.header)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-datatable-header"
+            }, _ctx.ptm('header')), [
               vue.renderSlot(_ctx.$slots, "header")
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($options.paginatorTop)
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
@@ -5384,7 +5544,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               currentPageReportTemplate: $props.currentPageReportTemplate,
               class: "p-paginator-top",
               onPage: _cache[0] || (_cache[0] = $event => ($options.onPage($event))),
-              alwaysShow: $props.alwaysShowPaginator
+              alwaysShow: $props.alwaysShowPaginator,
+              pt: _ctx.ptm('paginator')
             }, vue.createSlots({ _: 2 }, [
               (_ctx.$slots.paginatorstart)
                 ? {
@@ -5440,13 +5601,13 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                     key: "5"
                   }
                 : undefined
-            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
+            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow", "pt"]))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
+        vue.createElementVNode("div", vue.mergeProps({
           class: "p-datatable-wrapper",
-          style: vue.normalizeStyle({ maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' })
-        }, [
-          vue.createVNode(_component_DTVirtualScroller, vue.mergeProps({ ref: "virtualScroller" }, $props.virtualScrollerOptions, {
+          style: { maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' }
+        }, _ctx.ptm('wrapper')), [
+          vue.createVNode(_component_DTVirtualScroller, vue.mergeProps({ ref: "virtualScroller" }, { ...$props.virtualScrollerOptions, ..._ctx.ptm('virtualScroller') }, {
             items: $options.processedData,
             columns: $options.columns,
             style: $props.scrollHeight !== 'flex' ? { height: $props.scrollHeight } : undefined,
@@ -5463,7 +5624,7 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                 role: "table",
                 class: $options.tableStyleClass,
                 style: [$props.tableStyle, slotProps.spacerStyle]
-              }, $props.tableProps), [
+              }, { ...$props.tableProps, ..._ctx.ptm('table') }), [
                 vue.createVNode(_component_DTTableHeader, {
                   columnGroup: $options.headerColumnGroup,
                   columns: slotProps.columns,
@@ -5492,8 +5653,9 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                   onColumnDragleave: _cache[5] || (_cache[5] = $event => ($options.onColumnHeaderDragLeave($event))),
                   onColumnDrop: _cache[6] || (_cache[6] = $event => ($options.onColumnHeaderDrop($event))),
                   onColumnResizestart: _cache[7] || (_cache[7] = $event => ($options.onColumnResizeStart($event))),
-                  onCheckboxChange: _cache[8] || (_cache[8] = $event => ($options.toggleRowsWithCheckbox($event)))
-                }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterInputProps", "headerCheckboxIconTemplate", "onFilterChange", "onFilterApply"]),
+                  onCheckboxChange: _cache[8] || (_cache[8] = $event => ($options.toggleRowsWithCheckbox($event))),
+                  pt: _ctx.pt
+                }, null, 8, ["columnGroup", "columns", "rowGroupMode", "groupRowsBy", "groupRowSortField", "reorderableColumns", "resizableColumns", "allRowsSelected", "empty", "sortMode", "sortField", "sortOrder", "multiSortMeta", "filters", "filtersStore", "filterDisplay", "filterInputProps", "headerCheckboxIconTemplate", "onFilterChange", "onFilterApply", "pt"]),
                 ($props.frozenValue)
                   ? (vue.openBlock(), vue.createBlock(_component_DTTableBody, {
                       key: 0,
@@ -5606,28 +5768,33 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                   onRowEditSave: _cache[41] || (_cache[41] = $event => ($options.onRowEditSave($event))),
                   onRowEditCancel: _cache[42] || (_cache[42] = $event => ($options.onRowEditCancel($event))),
                   editingMeta: $data.d_editingMeta,
-                  onEditingMetaChange: $options.onEditingMetaChange
-                }, null, 8, ["value", "class", "columns", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange"]),
+                  onEditingMetaChange: $options.onEditingMetaChange,
+                  pt: _ctx.pt
+                }, null, 8, ["value", "class", "columns", "empty", "first", "dataKey", "selection", "selectionKeys", "selectionMode", "contextMenu", "contextMenuSelection", "rowGroupMode", "groupRowsBy", "expandableRowGroups", "rowClass", "rowStyle", "editMode", "compareSelectionBy", "scrollable", "expandedRowIcon", "collapsedRowIcon", "expandedRows", "expandedRowKeys", "expandedRowGroups", "editingRows", "editingRowKeys", "templates", "responsiveLayout", "virtualScrollerContentProps", "isVirtualScrollerDisabled", "onRowgroupToggle", "onRowTouchend", "onRowKeydown", "onRowMousedown", "editingMeta", "onEditingMetaChange", "pt"]),
                 ($options.hasSpacerStyle(slotProps.spacerStyle))
-                  ? (vue.openBlock(), vue.createElementBlock("tbody", {
+                  ? (vue.openBlock(), vue.createElementBlock("tbody", vue.mergeProps({
                       key: 1,
-                      style: vue.normalizeStyle({ height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` }),
+                      style: { height: `calc(${slotProps.spacerStyle.height} - ${slotProps.rows.length * slotProps.itemSize}px)` },
                       class: "p-datatable-virtualscroller-spacer"
-                    }, null, 4))
+                    }, _ctx.ptm('virtualScrollerSpacer')), null, 16))
                   : vue.createCommentVNode("", true),
                 vue.createVNode(_component_DTTableFooter, {
                   columnGroup: $options.footerColumnGroup,
-                  columns: slotProps.columns
-                }, null, 8, ["columnGroup", "columns"])
+                  columns: slotProps.columns,
+                  pt: _ctx.pt
+                }, null, 8, ["columnGroup", "columns", "pt"])
               ], 16)
             ]),
             _: 1
           }, 16, ["items", "columns", "style", "scrollHeight", "disabled"])
-        ], 4),
+        ], 16),
         (_ctx.$slots.footer)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 3,
+              class: "p-datatable-footer"
+            }, _ctx.ptm('footer')), [
               vue.renderSlot(_ctx.$slots, "footer")
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($options.paginatorBottom)
           ? (vue.openBlock(), vue.createBlock(_component_DTPaginator, {
@@ -5641,7 +5808,8 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
               currentPageReportTemplate: $props.currentPageReportTemplate,
               class: "p-paginator-bottom",
               onPage: _cache[43] || (_cache[43] = $event => ($options.onPage($event))),
-              alwaysShow: $props.alwaysShowPaginator
+              alwaysShow: $props.alwaysShowPaginator,
+              pt: _ctx.ptm('paginator')
             }, vue.createSlots({ _: 2 }, [
               (_ctx.$slots.paginatorstart)
                 ? {
@@ -5697,20 +5865,34 @@ this.primevue.datatable = (function (api, ArrowDownIcon, ArrowUpIcon, SpinnerIco
                     key: "5"
                   }
                 : undefined
-            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
+            ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow", "pt"]))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4, null, 512),
+        vue.createElementVNode("div", vue.mergeProps({
+          ref: "resizeHelper",
+          class: "p-column-resizer-helper",
+          style: {"display":"none"}
+        }, _ctx.ptm('resizeHelper')), null, 16),
         ($props.reorderableColumns)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5, [
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+              key: 5,
+              ref: "reorderIndicatorUp",
+              class: "p-datatable-reorder-indicator-up",
+              style: {"position":"absolute","display":"none"}
+            }, _ctx.ptm('reorderIndicatorUp')), [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.reorderindicatorupicon || 'ArrowDownIcon')))
-            ], 512))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($props.reorderableColumns)
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6, [
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+              key: 6,
+              ref: "reorderIndicatorDown",
+              class: "p-datatable-reorder-indicator-down",
+              style: {"position":"absolute","display":"none"}
+            }, _ctx.ptm('reorderIndicatorDown')), [
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.reorderindicatordownicon || 'ArrowUpIcon')))
-            ], 512))
+            ], 16))
           : vue.createCommentVNode("", true)
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -5747,4 +5929,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.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.basecomponent, primevue.icons.arrowdown, primevue.icons.arrowup, primevue.icons.spinner, primevue.paginator, primevue.utils, primevue.virtualscroller, 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);