primevue 3.28.0 → 3.29.0

package/datatable/datatable.esm.js

@@ -1,4 +1,5 @@
 import { FilterOperator, FilterService, FilterMatchMode } from 'primevue/api';
+import BaseComponent from 'primevue/basecomponent';
 import ArrowDownIcon from 'primevue/icons/arrowdown';
 import ArrowUpIcon from 'primevue/icons/arrowup';
 import SpinnerIcon from 'primevue/icons/spinner';
@@ -13,7 +14,7 @@ import PencilIcon from 'primevue/icons/pencil';
 import TimesIcon from 'primevue/icons/times';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, resolveDynamicComponent, withKeys, withModifiers, resolveDirective, normalizeStyle, toDisplayString, createCommentVNode, Fragment, withDirectives, createTextVNode, renderList, mergeProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, createBlock, resolveDynamicComponent, withKeys, withModifiers, resolveDirective, toDisplayString, createCommentVNode, Fragment, normalizeClass, withDirectives, createTextVNode, renderList, normalizeProps, guardReactiveProps, createVNode, withCtx, Transition, renderSlot, createSlots } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import FocusTrap from 'primevue/focustrap';
@@ -28,10 +29,12 @@ import SortAmountUpAltIcon from 'primevue/icons/sortamountupalt';
 
 var script$a = {
     name: 'RowCheckbox',
+    extends: BaseComponent,
     emits: ['change'],
     props: {
         value: null,
         checked: null,
+        column: null,
         rowCheckboxIconTemplate: {
             type: Function,
             default: null
@@ -43,6 +46,23 @@ var script$a = {
         };
     },
     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', {
@@ -81,18 +101,17 @@ var script$a = {
     }
 };
 
-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 = resolveComponent("CheckIcon");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }]),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: ['p-checkbox p-component', { 'p-checkbox-focused': $data.focused }],
     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
-  }, [
-    createElementVNode("div", _hoisted_1$a, [
-      createElementVNode("input", {
+  }, $options.getColumnPTOptions('checkboxWrapper')), [
+    createElementVNode("div", mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenInputWrapper')), [
+      createElementVNode("input", mergeProps({
         ref: "input",
         type: "checkbox",
         checked: $props.checked,
@@ -102,36 +121,38 @@ function render$a(_ctx, _cache, $props, $setup, $data, $options) {
         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)
-    ]),
-    createElementVNode("div", {
+      }, $options.getColumnPTOptions('hiddenInput')), null, 16, _hoisted_1$7)
+    ], 16),
+    createElementVNode("div", mergeProps({
       ref: "box",
-      class: 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)
         ? (openBlock(), createBlock(resolveDynamicComponent($props.rowCheckboxIconTemplate), {
             key: 0,
             checked: $props.checked,
             class: "p-checkbox-icon"
           }, null, 8, ["checked"]))
-        : (openBlock(), createBlock(_component_CheckIcon, {
+        : (openBlock(), createBlock(_component_CheckIcon, 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,
     inheritAttrs: false,
     emits: ['change'],
     props: {
         value: null,
         checked: null,
-        name: null
+        name: null,
+        column: null
     },
     data() {
         return {
@@ -139,6 +160,23 @@ var script$9 = {
         };
     },
     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) {
@@ -160,20 +198,15 @@ var script$9 = {
     }
 };
 
-const _hoisted_1$9 = { class: "p-hidden-accessible" };
-const _hoisted_2$8 = ["checked", "disabled", "name"];
-const _hoisted_3$6 = /*#__PURE__*/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 (openBlock(), createElementBlock("div", {
-    class: normalizeClass(['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }]),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: ['p-radiobutton p-component', { 'p-radiobutton-focused': $data.focused }],
     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onClick && $options.onClick(...args)))
-  }, [
-    createElementVNode("div", _hoisted_1$9, [
-      createElementVNode("input", {
+  }, $options.getColumnPTOptions('radiobuttonWrapper')), [
+    createElementVNode("div", mergeProps({ class: "p-hidden-accessible" }, _ctx.ptm('hiddenInputWrapper')), [
+      createElementVNode("input", mergeProps({
         ref: "input",
         type: "radio",
         checked: $props.checked,
@@ -183,19 +216,22 @@ function render$9(_ctx, _cache, $props, $setup, $data, $options) {
         onFocus: _cache[0] || (_cache[0] = $event => ($options.onFocus($event))),
         onBlur: _cache[1] || (_cache[1] = $event => ($options.onBlur($event))),
         onKeydown: _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
-      }, null, 40, _hoisted_2$8)
-    ]),
-    createElementVNode("div", {
+      }, $options.getColumnPTOptions('hiddenInput')), null, 16, _hoisted_1$6)
+    ], 16),
+    createElementVNode("div", mergeProps({
       ref: "box",
-      class: 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')), [
+      createElementVNode("div", mergeProps({ class: "p-radiobutton-icon" }, $options.getColumnPTOptions('radiobuttonIcon')), null, 16)
+    ], 16)
+  ], 16))
 }
 
 script$9.render = render$9;
 
 var script$8 = {
     name: 'BodyCell',
+    extends: BaseComponent,
     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: {
@@ -308,6 +344,18 @@ var script$8 = {
         columnProp(prop) {
             return 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 ObjectUtils.resolveFieldData(this.rowData, this.field);
         },
@@ -612,14 +660,10 @@ var script$8 = {
     }
 };
 
-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 = resolveComponent("DTRadioButton");
@@ -629,11 +673,12 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
   const _directive_ripple = resolveDirective("ripple");
 
   return ($options.loading)
-    ? (openBlock(), createElementBlock("td", {
+    ? (openBlock(), createElementBlock("td", mergeProps({
         key: 0,
-        style: normalizeStyle($options.containerStyle),
-        class: normalizeClass($options.containerClass)
-      }, [
+        style: $options.containerStyle,
+        class: $options.containerClass,
+        role: "cell"
+      }, { ...$options.getColumnPTOptions($props.column, 'root'), ...$options.getColumnPTOptions($props.column, 'bodyCell') }), [
         (openBlock(), createBlock(resolveDynamicComponent($props.column.children.loading), {
           data: $props.rowData,
           column: $props.column,
@@ -642,17 +687,20 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
           frozenRow: $props.frozenRow,
           loadingOptions: $options.loadingOptions
         }, null, 8, ["data", "column", "field", "index", "frozenRow", "loadingOptions"]))
-      ], 6))
-    : (openBlock(), createElementBlock("td", {
+      ], 16))
+    : (openBlock(), createElementBlock("td", mergeProps({
         key: 1,
-        style: normalizeStyle($options.containerStyle),
-        class: 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')
-          ? (openBlock(), createElementBlock("span", _hoisted_1$8, toDisplayString($options.columnProp('header')), 1))
+          ? (openBlock(), createElementBlock("span", mergeProps({
+              key: 0,
+              class: "p-column-title"
+            }, $options.getColumnPTOptions($props.column, 'columnTitle')), toDisplayString($options.columnProp('header')), 17))
           : createCommentVNode("", true),
         ($props.column.children && $props.column.children.body && !$data.d_editing)
           ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.body), {
@@ -692,8 +740,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                           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')
                         ? (openBlock(), createBlock(_component_DTCheckbox, {
                             key: 1,
@@ -701,8 +751,10 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                             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"]))
                         : createCommentVNode("", true)
                   ], 64))
                 : ($options.columnProp('rowReorder'))
@@ -711,7 +763,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                       class: normalizeClass(['p-datatable-reorderablerow-handle', $options.columnProp('rowReorderIcon')])
                     }, null, 8, ["class"]))
                   : ($options.columnProp('expander'))
-                    ? withDirectives((openBlock(), createElementBlock("button", {
+                    ? withDirectives((openBlock(), createElementBlock("button", mergeProps({
                         key: 6,
                         class: "p-row-toggler p-link",
                         type: "button",
@@ -719,7 +771,7 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                         "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)
                           ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.rowtogglericon), {
                               key: 0,
@@ -732,63 +784,63 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                                     class: normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
                                   }, null, 2))
                                 : ($props.isRowExpanded && !$props.expandedRowIcon)
-                                  ? (openBlock(), createBlock(_component_ChevronDownIcon, {
+                                  ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
                                       key: 1,
                                       class: "p-row-toggler-icon"
-                                    }))
+                                    }, $options.getColumnPTOptions($props.column, 'rowTogglerIcon')), null, 16))
                                   : (!$props.isRowExpanded && $props.collapsedRowIcon)
                                     ? (openBlock(), createElementBlock("span", {
                                         key: 2,
                                         class: normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
                                       }, null, 2))
                                     : (!$props.isRowExpanded && !$props.collapsedRowIcon)
-                                      ? (openBlock(), createBlock(_component_ChevronRightIcon, {
+                                      ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
                                           key: 3,
                                           class: "p-row-toggler-icon"
-                                        }))
+                                        }, $options.getColumnPTOptions($props.column, 'rowTogglerIcon')), null, 16))
                                       : createCommentVNode("", true)
                             ], 64))
-                      ], 8, _hoisted_2$7)), [
+                      ], 16, _hoisted_1$5)), [
                         [_directive_ripple]
                       ])
                     : ($props.editMode === 'row' && $options.columnProp('rowEditor'))
                       ? (openBlock(), createElementBlock(Fragment, { key: 7 }, [
                           (!$data.d_editing)
-                            ? withDirectives((openBlock(), createElementBlock("button", {
+                            ? withDirectives((openBlock(), createElementBlock("button", 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)))
-                              }, [
-                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), { class: "p-row-editor-init-icon" }))
-                              ], 8, _hoisted_3$5)), [
+                              }, $options.getColumnPTOptions($props.column, 'rowEditorInitButton')), [
+                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditoriniticon) || 'PencilIcon'), mergeProps({ class: "p-row-editor-init-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorInitIcon')), null, 16))
+                              ], 16, _hoisted_2$2)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
                           ($data.d_editing)
-                            ? withDirectives((openBlock(), createElementBlock("button", {
+                            ? withDirectives((openBlock(), createElementBlock("button", 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)))
-                              }, [
-                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), { class: "p-row-editor-save-icon" }))
-                              ], 8, _hoisted_4$4)), [
+                              }, $options.getColumnPTOptions($props.column, 'rowEditorEditButton')), [
+                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditorsaveicon) || 'CheckIcon'), mergeProps({ class: "p-row-editor-save-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorEditIcon')), null, 16))
+                              ], 16, _hoisted_3$2)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true),
                           ($data.d_editing)
-                            ? withDirectives((openBlock(), createElementBlock("button", {
+                            ? withDirectives((openBlock(), createElementBlock("button", 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)))
-                              }, [
-                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), { class: "p-row-editor-cancel-icon" }))
-                              ], 8, _hoisted_5$4)), [
+                              }, $options.getColumnPTOptions($props.column, 'rowEditorCancelButton')), [
+                                (openBlock(), createBlock(resolveDynamicComponent(($props.column.children && $props.column.children.roweditorcancelicon) || 'TimesIcon'), mergeProps({ class: "p-row-editor-cancel-icon" }, $options.getColumnPTOptions($props.column, 'rowEditorCancelIcon')), null, 16))
+                              ], 16, _hoisted_4$1)), [
                                 [_directive_ripple]
                               ])
                             : createCommentVNode("", true)
@@ -796,13 +848,14 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
                       : (openBlock(), createElementBlock(Fragment, { key: 8 }, [
                           createTextVNode(toDisplayString($options.resolveFieldData()), 1)
                         ], 64))
-      ], 38))
+      ], 16))
 }
 
 script$8.render = render$8;
 
 var script$7 = {
     name: 'TableBody',
+    extends: BaseComponent,
     emits: [
         'rowgroup-toggle',
         'row-click',
@@ -982,6 +1035,18 @@ var script$7 = {
         columnProp(col, prop) {
             return 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 = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
             let prevRowData = value[i - 1];
@@ -1298,50 +1363,45 @@ var script$7 = {
     }
 };
 
-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 = resolveComponent("ChevronDownIcon");
   const _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
   const _component_DTBodyCell = resolveComponent("DTBodyCell");
 
-  return (openBlock(), createElementBlock("tbody", {
+  return (openBlock(), createElementBlock("tbody", mergeProps({
     ref: $options.bodyRef,
     class: "p-datatable-tbody",
     role: "rowgroup",
-    style: normalizeStyle($options.bodyStyle)
-  }, [
+    style: $options.bodyStyle
+  }, _ctx.ptm('tbody')), [
     (!$props.empty)
       ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList($props.value, (rowData, index) => {
           return (openBlock(), createElementBlock(Fragment, null, [
             ($props.templates['groupheader'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupHeader($props.value, rowData, $options.getRowIndex(index)))
-              ? (openBlock(), createElementBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", mergeProps({
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subheader',
                   class: "p-rowgroup-header",
-                  style: normalizeStyle($options.rowGroupHeaderStyle),
+                  style: $options.rowGroupHeaderStyle,
                   role: "row"
-                }, [
-                  createElementVNode("td", {
+                }, _ctx.ptm('rowgroupHeader')), [
+                  createElementVNode("td", mergeProps({
                     colspan: $options.columnsLength - 1
-                  }, [
+                  }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                     ($props.expandableRowGroups)
-                      ? (openBlock(), createElementBlock("button", {
+                      ? (openBlock(), createElementBlock("button", mergeProps({
                           key: 0,
                           class: "p-row-toggler p-link",
                           onClick: $event => ($options.onRowGroupToggle($event, rowData)),
                           type: "button"
-                        }, [
+                        }, $options.getColumnPTOptions('rowGroupToggler')), [
                           ($props.templates['rowgrouptogglericon'])
                             ? (openBlock(), createBlock(resolveDynamicComponent($props.templates['rowgrouptogglericon']), {
                                 key: 0,
@@ -1354,36 +1414,36 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                                       class: normalizeClass(['p-row-toggler-icon', $props.expandedRowIcon])
                                     }, null, 2))
                                   : ($options.isRowGroupExpanded(rowData) && !$props.expandedRowIcon)
-                                    ? (openBlock(), createBlock(_component_ChevronDownIcon, {
+                                    ? (openBlock(), createBlock(_component_ChevronDownIcon, mergeProps({
                                         key: 1,
                                         class: "p-row-toggler-icon"
-                                      }))
+                                      }, $options.getColumnPTOptions('rowGroupTogglerIcon')), null, 16))
                                     : (!$options.isRowGroupExpanded(rowData) && $props.collapsedRowIcon)
                                       ? (openBlock(), createElementBlock("span", {
                                           key: 2,
                                           class: normalizeClass(['p-row-toggler-icon', $props.collapsedRowIcon])
                                         }, null, 2))
                                       : (!$options.isRowGroupExpanded(rowData) && !$props.collapsedRowIcon)
-                                        ? (openBlock(), createBlock(_component_ChevronRightIcon, {
+                                        ? (openBlock(), createBlock(_component_ChevronRightIcon, mergeProps({
                                             key: 3,
                                             class: "p-row-toggler-icon"
-                                          }))
+                                          }, $options.getColumnPTOptions('rowGroupTogglerIcon')), null, 16))
                                         : createCommentVNode("", true)
                               ], 64))
-                        ], 8, _hoisted_2$6))
+                        ], 16, _hoisted_2$1))
                       : createCommentVNode("", true),
                     (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupheader']), {
                       data: rowData,
                       index: $options.getRowIndex(index)
                     }, null, 8, ["data", "index"]))
-                  ], 8, _hoisted_1$7)
-                ], 4))
+                  ], 16, _hoisted_1$4)
+                ], 16))
               : createCommentVNode("", true),
             ($props.expandableRowGroups ? $options.isRowGroupExpanded(rowData) : true)
-              ? (openBlock(), createElementBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", mergeProps({
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)),
-                  class: normalizeClass($options.getRowClass(rowData)),
-                  style: 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,
@@ -1398,7 +1458,7 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                   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')), [
                   (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
                     return (openBlock(), createElementBlock(Fragment, null, [
                       ($options.shouldRenderBodyCell($props.value, col, $options.getRowIndex(index)))
@@ -1430,60 +1490,66 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
                             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"]))
                         : createCommentVNode("", true)
                     ], 64))
                   }), 256))
-                ], 46, _hoisted_3$4))
+                ], 16, _hoisted_3$1))
               : createCommentVNode("", true),
             ($props.templates['expansion'] && $props.expandedRows && $options.isRowExpanded(rowData))
-              ? (openBlock(), createElementBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", mergeProps({
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_expansion',
                   id: $options.expandedRowId + '_' + index + '_expansion',
                   class: "p-datatable-row-expansion",
                   role: "row"
-                }, [
-                  createElementVNode("td", { colspan: $options.columnsLength }, [
+                }, _ctx.ptm('rowExpansion')), [
+                  createElementVNode("td", mergeProps({ colspan: $options.columnsLength }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                     (openBlock(), createBlock(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))
               : createCommentVNode("", true),
             ($props.templates['groupfooter'] && $props.rowGroupMode === 'subheader' && $options.shouldRenderRowGroupFooter($props.value, rowData, $options.getRowIndex(index)))
-              ? (openBlock(), createElementBlock("tr", {
+              ? (openBlock(), createElementBlock("tr", mergeProps({
                   key: $options.getRowKey(rowData, $options.getRowIndex(index)) + '_subfooter',
                   class: "p-rowgroup-footer",
                   role: "row"
-                }, [
-                  createElementVNode("td", {
+                }, _ctx.ptm('rowgroupFooter')), [
+                  createElementVNode("td", mergeProps({
                     colspan: $options.columnsLength - 1
-                  }, [
+                  }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
                     (openBlock(), createBlock(resolveDynamicComponent($props.templates['groupfooter']), {
                       data: rowData,
                       index: $options.getRowIndex(index)
                     }, null, 8, ["data", "index"]))
-                  ], 8, _hoisted_6$2)
-                ]))
+                  ], 16, _hoisted_6)
+                ], 16))
               : createCommentVNode("", true)
           ], 64))
         }), 256))
-      : (openBlock(), createElementBlock("tr", _hoisted_7$1, [
-          createElementVNode("td", { colspan: $options.columnsLength }, [
+      : (openBlock(), createElementBlock("tr", mergeProps({
+          key: 1,
+          class: "p-datatable-emptymessage",
+          role: "row"
+        }, _ctx.ptm('emptyMessage')), [
+          createElementVNode("td", mergeProps({ colspan: $options.columnsLength }, { ...$options.getColumnPTOptions('root'), ...$options.getColumnPTOptions('bodyCell') }), [
             ($props.templates.empty)
               ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.empty), { key: 0 }))
               : createCommentVNode("", true)
-          ], 8, _hoisted_8$1)
-        ]))
-  ], 4))
+          ], 16, _hoisted_7)
+        ], 16))
+  ], 16))
 }
 
 script$7.render = render$7;
 
 var script$6 = {
     name: 'FooterCell',
+    extends: BaseComponent,
     props: {
         column: {
             type: Object,
@@ -1509,6 +1575,18 @@ var script$6 = {
         columnProp(prop) {
             return 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');
@@ -1554,16 +1632,16 @@ var script$6 = {
     }
 };
 
-const _hoisted_1$6 = ["colspan", "rowspan"];
+const _hoisted_1$3 = ["colspan", "rowspan"];
 
 function render$6(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("td", {
-    style: normalizeStyle($options.containerStyle),
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("td", 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)
       ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.footer), {
           key: 0,
@@ -1571,13 +1649,14 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
         }, null, 8, ["column"]))
       : createCommentVNode("", true),
     createTextVNode(" " + 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,
     props: {
         columnGroup: {
             type: null,
@@ -1592,6 +1671,30 @@ var script$5 = {
         columnProp(col, prop) {
             return 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 = [];
 
@@ -1645,23 +1748,20 @@ var script$5 = {
     }
 };
 
-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 = resolveComponent("DTFooterCell");
 
   return ($options.hasFooter)
-    ? (openBlock(), createElementBlock("tfoot", _hoisted_1$5, [
+    ? (openBlock(), createElementBlock("tfoot", mergeProps({
+        key: 0,
+        class: "p-datatable-tfoot",
+        role: "rowgroup"
+      }, { ..._ctx.ptm('tfoot'), ...$options.getColumnGroupPTOptions('root') }), [
         (!$props.columnGroup)
-          ? (openBlock(), createElementBlock("tr", _hoisted_2$5, [
+          ? (openBlock(), createElementBlock("tr", mergeProps({
+              key: 0,
+              role: "row"
+            }, _ctx.ptm('footerRow')), [
               (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
                 return (openBlock(), createElementBlock(Fragment, {
                   key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -1669,17 +1769,18 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                   (!$options.columnProp(col, 'hidden'))
                     ? (openBlock(), createBlock(_component_DTFooterCell, {
                         key: 0,
-                        column: col
-                      }, null, 8, ["column"]))
+                        column: col,
+                        pt: _ctx.pt
+                      }, null, 8, ["column", "pt"]))
                     : createCommentVNode("", true)
                 ], 64))
               }), 128))
-            ]))
+            ], 16))
           : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($options.getFooterRows(), (row, i) => {
-              return (openBlock(), createElementBlock("tr", {
+              return (openBlock(), createElementBlock("tr", mergeProps({
                 key: i,
                 role: "row"
-              }, [
+              }, $options.getRowPTOptions(row, 'root')), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($options.getFooterColumns(row), (col, j) => {
                   return (openBlock(), createElementBlock(Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
@@ -1687,14 +1788,15 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
                     (!$options.columnProp(col, 'hidden'))
                       ? (openBlock(), createBlock(_component_DTFooterCell, {
                           key: 0,
-                          column: col
-                        }, null, 8, ["column"]))
+                          column: col,
+                          pt: _ctx.pt
+                        }, null, 8, ["column", "pt"]))
                       : createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ]))
+              ], 16))
             }), 128))
-      ]))
+      ], 16))
     : createCommentVNode("", true)
 }
 
@@ -1702,6 +1804,7 @@ script$5.render = render$5;
 
 var script$4 = {
     name: 'ColumnFilter',
+    extends: BaseComponent,
     emits: ['filter-change', 'filter-apply', 'operator-change', 'matchmode-change', 'constraint-add', 'constraint-remove', 'filter-clear', 'apply-click'],
     props: {
         field: {
@@ -1807,7 +1910,8 @@ var script$4 = {
         filterInputProps: {
             type: null,
             default: null
-        }
+        },
+        column: null
     },
     data() {
         return {
@@ -1843,6 +1947,18 @@ var script$4 = {
         }
     },
     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 };
 
@@ -2215,24 +2331,9 @@ var script$4 = {
     }
 };
 
-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__*/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 = resolveComponent("CFDropdown");
@@ -2240,14 +2341,12 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_Portal = resolveComponent("Portal");
   const _directive_focustrap = resolveDirective("focustrap");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass)
-  }, [
+  return (openBlock(), createElementBlock("div", mergeProps({ class: $options.containerClass }, $options.getColumnPTOptions('columnFilter')), [
     ($props.display === 'row')
       ? (openBlock(), createElementBlock("div", mergeProps({
           key: 0,
           class: "p-fluid p-column-filter-element"
-        }, $props.filterInputProps), [
+        }, { ...$props.filterInputProps, ...$options.getColumnPTOptions('filterInput') }), [
           (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
             field: $props.field,
             filterModel: $props.filters[$props.field],
@@ -2256,30 +2355,30 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         ], 16))
       : createCommentVNode("", true),
     ($options.showMenuButton)
-      ? (openBlock(), createElementBlock("button", {
+      ? (openBlock(), createElementBlock("button", mergeProps({
           key: 1,
           ref: "icon",
           type: "button",
-          class: 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')), [
           (openBlock(), createBlock(resolveDynamicComponent($props.filterIconTemplate || 'FilterIcon')))
-        ], 42, _hoisted_1$4))
+        ], 16, _hoisted_1$2))
       : createCommentVNode("", true),
     ($props.showClearButton && $props.display === 'row')
-      ? (openBlock(), createElementBlock("button", {
+      ? (openBlock(), createElementBlock("button", mergeProps({
           key: 2,
-          class: 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()))
-        }, [
-          (openBlock(), createBlock(resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon')))
-        ], 2))
+        }, $options.getColumnPTOptions('headerFilterClearButton')), [
+          (openBlock(), createBlock(resolveDynamicComponent($props.filterClearIconTemplate || 'FilterSlashIcon'), normalizeProps(guardReactiveProps($options.getColumnPTOptions('filterClearIcon'))), null, 16))
+        ], 16))
       : createCommentVNode("", true),
     createVNode(_component_Portal, null, {
       default: withCtx(() => [
@@ -2291,49 +2390,55 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
         }, {
           default: withCtx(() => [
             ($data.overlayVisible)
-              ? withDirectives((openBlock(), createElementBlock("div", {
+              ? withDirectives((openBlock(), createElementBlock("div", mergeProps({
                   key: 0,
                   ref: $options.overlayRef,
                   id: $options.overlayId,
                   "aria-modal": $data.overlayVisible,
                   role: "dialog",
-                  class: normalizeClass($options.overlayClass),
+                  class: $options.overlayClass,
                   onKeydown: _cache[10] || (_cache[10] = 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')), [
                   (openBlock(), createBlock(resolveDynamicComponent($props.filterHeaderTemplate), {
                     field: $props.field,
                     filterModel: $props.filters[$props.field],
                     filterCallback: $options.filterCallback
                   }, null, 8, ["field", "filterModel", "filterCallback"])),
                   ($props.display === 'row')
-                    ? (openBlock(), createElementBlock("ul", _hoisted_3$3, [
+                    ? (openBlock(), createElementBlock("ul", mergeProps({
+                        key: 0,
+                        class: "p-column-filter-row-items"
+                      }, $options.getColumnPTOptions('filterRowItems')), [
                         (openBlock(true), createElementBlock(Fragment, null, renderList($options.matchModes, (matchMode, i) => {
-                          return (openBlock(), createElementBlock("li", {
+                          return (openBlock(), createElementBlock("li", mergeProps({
                             key: matchMode.label,
-                            class: 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))),
                               withKeys(withModifiers($event => ($options.onRowMatchModeChange(matchMode.value)), ["prevent"]), ["enter"])
                             ],
                             tabindex: i === 0 ? '0' : null
-                          }, toDisplayString(matchMode.label), 43, _hoisted_4$2))
+                          }, $options.getColumnPTOptions('filterRowItem')), toDisplayString(matchMode.label), 17, _hoisted_3))
                         }), 128)),
-                        _hoisted_5$2,
-                        createElementVNode("li", {
+                        createElementVNode("li", mergeProps({ class: "p-column-filter-separator" }, $options.getColumnPTOptions('filterInput')), null, 16),
+                        createElementVNode("li", 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] = withKeys($event => (_ctx.onRowClearItemClick()), ["enter"]))
                           ]
-                        }, toDisplayString($options.noFilterLabel), 33)
-                      ]))
+                        }, $options.getColumnPTOptions('filterRowItem')), toDisplayString($options.noFilterLabel), 17)
+                      ], 16))
                     : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
                         ($options.isShowOperator)
-                          ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
+                          ? (openBlock(), createElementBlock("div", mergeProps({
+                              key: 0,
+                              class: "p-column-filter-operator"
+                            }, $options.getColumnPTOptions('filterOperator')), [
                               createVNode(_component_CFDropdown, {
                                 options: $options.operatorOptions,
                                 modelValue: $options.operator,
@@ -2341,16 +2446,17 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                 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))
                           : createCommentVNode("", true),
-                        createElementVNode("div", _hoisted_7, [
+                        createElementVNode("div", mergeProps({ class: "p-column-filter-constraints" }, $options.getColumnPTOptions('filterConstraints')), [
                           (openBlock(true), createElementBlock(Fragment, null, renderList($options.fieldConstraints, (fieldConstraint, i) => {
-                            return (openBlock(), createElementBlock("div", {
+                            return (openBlock(), createElementBlock("div", mergeProps({
                               key: i,
                               class: "p-column-filter-constraint"
-                            }, [
+                            }, $options.getColumnPTOptions('filterConstraint')), [
                               ($options.isShowMatchModes)
                                 ? (openBlock(), createBlock(_component_CFDropdown, {
                                     key: 0,
@@ -2360,8 +2466,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                     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"]))
                                 : createCommentVNode("", true),
                               ($props.display === 'menu')
                                 ? (openBlock(), createBlock(resolveDynamicComponent($props.filterElement), {
@@ -2371,54 +2478,60 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                     filterCallback: $options.filterCallback
                                   }, null, 8, ["field", "filterModel", "filterCallback"]))
                                 : createCommentVNode("", true),
-                              createElementVNode("div", null, [
+                              createElementVNode("div", normalizeProps(guardReactiveProps($options.getColumnPTOptions('filterRemove'))), [
                                 ($options.showRemoveIcon)
                                   ? (openBlock(), 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: withCtx((iconProps) => [
-                                        (openBlock(), createBlock(resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), {
-                                          class: normalizeClass(iconProps.class)
-                                        }, null, 8, ["class"]))
+                                        (openBlock(), createBlock(resolveDynamicComponent($props.filterRemoveIconTemplate || 'TrashIcon'), mergeProps({
+                                          class: iconProps.class
+                                        }, $options.getColumnPTOptions('filterRemoveButton')['icon']), null, 16, ["class"]))
                                       ]),
                                       _: 2
-                                    }, 1032, ["onClick", "label"]))
+                                    }, 1032, ["onClick", "label", "pt"]))
                                   : createCommentVNode("", true)
-                              ])
-                            ]))
+                              ], 16)
+                            ], 16))
                           }), 128))
-                        ]),
+                        ], 16),
                         ($options.isShowAddConstraint)
-                          ? (openBlock(), createElementBlock("div", _hoisted_8, [
+                          ? (openBlock(), createElementBlock("div", mergeProps({
+                              key: 1,
+                              class: "p-column-filter-add-rule"
+                            }, $options.getColumnPTOptions('filterAddRule')), [
                               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: withCtx((iconProps) => [
-                                  (openBlock(), createBlock(resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), {
-                                    class: normalizeClass(iconProps.class)
-                                  }, null, 8, ["class"]))
+                                  (openBlock(), createBlock(resolveDynamicComponent($props.filterAddIconTemplate || 'PlusIcon'), mergeProps({
+                                    class: iconProps.class
+                                  }, $options.getColumnPTOptions('filterAddRuleButton')['icon']), null, 16, ["class"]))
                                 ]),
                                 _: 1
-                              }, 8, ["label"])
-                            ]))
+                              }, 8, ["label", "pt"])
+                            ], 16))
                           : createCommentVNode("", true),
-                        createElementVNode("div", _hoisted_9, [
+                        createElementVNode("div", mergeProps({ class: "p-column-filter-buttonbar" }, $options.getColumnPTOptions('filterButtonbar')), [
                           (!$props.filterClearTemplate && $props.showClearButton)
                             ? (openBlock(), 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"]))
                             : (openBlock(), createBlock(resolveDynamicComponent($props.filterClearTemplate), {
                                 key: 1,
                                 field: $props.field,
@@ -2428,13 +2541,13 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                           ($props.showApplyButton)
                             ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
                                 (!$props.filterApplyTemplate)
-                                  ? (openBlock(), createBlock(_component_CFButton, {
+                                  ? (openBlock(), createBlock(_component_CFButton, 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"]))
                                   : (openBlock(), createBlock(resolveDynamicComponent($props.filterApplyTemplate), {
                                       key: 1,
                                       field: $props.field,
@@ -2443,14 +2556,14 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
                                     }, null, 8, ["field", "filterModel", "filterCallback"]))
                               ], 64))
                             : createCommentVNode("", true)
-                        ])
+                        ], 16)
                       ], 64)),
                   (openBlock(), createBlock(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 }]
                 ])
               : createCommentVNode("", true)
@@ -2460,17 +2573,19 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       ]),
       _: 1
     })
-  ], 2))
+  ], 16))
 }
 
 script$4.render = render$4;
 
 var script$3 = {
     name: 'HeaderCheckbox',
+    extends: BaseComponent,
     emits: ['change'],
     props: {
         checked: null,
         disabled: null,
+        column: null,
         headerCheckboxIconTemplate: {
             type: Function,
             default: null
@@ -2482,6 +2597,23 @@ var script$3 = {
         };
     },
     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', {
@@ -2509,19 +2641,18 @@ var script$3 = {
     }
 };
 
-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 = resolveComponent("CheckIcon");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass(['p-checkbox p-component', { 'p-checkbox-focused': $data.focused, 'p-disabled': $props.disabled }]),
+  return (openBlock(), createElementBlock("div", 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] = withKeys(withModifiers((...args) => ($options.onClick && $options.onClick(...args)), ["prevent"]), ["space"]))
-  }, [
-    createElementVNode("div", _hoisted_1$3, [
-      createElementVNode("input", {
+  }, $options.getColumnPTOptions('headerCheckboxWrapper')), [
+    createElementVNode("div", mergeProps({ class: "p-hidden-accessible" }, $options.getColumnPTOptions('hiddenHeaderInputWrapper')), [
+      createElementVNode("input", mergeProps({
         ref: "input",
         type: "checkbox",
         checked: $props.checked,
@@ -2530,30 +2661,31 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
         "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)
-    ]),
-    createElementVNode("div", {
+      }, $options.getColumnPTOptions('hiddenHeaderInput')), null, 16, _hoisted_1$1)
+    ], 16),
+    createElementVNode("div", mergeProps({
       ref: "box",
-      class: 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)
         ? (openBlock(), createBlock(resolveDynamicComponent($props.headerCheckboxIconTemplate), {
             key: 0,
             checked: $props.checked,
             class: "p-checkbox-icon"
           }, null, 8, ["checked"]))
-        : (openBlock(), createBlock(_component_CheckIcon, {
+        : (openBlock(), createBlock(_component_CheckIcon, 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,
     emits: [
         'column-click',
         'column-mousedown',
@@ -2661,6 +2793,18 @@ var script$2 = {
         columnProp(prop) {
             return 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 });
         },
@@ -2812,25 +2956,15 @@ var script$2 = {
     }
 };
 
-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 = resolveComponent("DTHeaderCheckbox");
   const _component_DTColumnFilter = resolveComponent("DTColumnFilter");
 
-  return (openBlock(), createElementBlock("th", {
-    style: normalizeStyle($options.containerStyle),
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("th", mergeProps({
+    style: $options.containerStyle,
+    class: $options.containerClass,
     tabindex: $options.columnProp('sortable') ? '0' : null,
     role: "columnheader",
     colspan: $options.columnProp('colspan'),
@@ -2843,15 +2977,15 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     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'))
-      ? (openBlock(), createElementBlock("span", {
+      ? (openBlock(), createElementBlock("span", 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))
       : createCommentVNode("", true),
-    createElementVNode("div", _hoisted_2$2, [
+    createElementVNode("div", mergeProps({ class: "p-column-header-content" }, $options.getColumnPTOptions('headerContent')), [
       ($props.column.children && $props.column.children.header)
         ? (openBlock(), createBlock(resolveDynamicComponent($props.column.children.header), {
             key: 0,
@@ -2859,19 +2993,25 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
           }, null, 8, ["column"]))
         : createCommentVNode("", true),
       ($options.columnProp('header'))
-        ? (openBlock(), createElementBlock("span", _hoisted_3$2, toDisplayString($options.columnProp('header')), 1))
+        ? (openBlock(), createElementBlock("span", mergeProps({
+            key: 1,
+            class: "p-column-title"
+          }, $options.getColumnPTOptions('headerTitle')), toDisplayString($options.columnProp('header')), 17))
         : createCommentVNode("", true),
       ($options.columnProp('sortable'))
-        ? (openBlock(), createElementBlock("span", _hoisted_4$1, [
+        ? (openBlock(), createElementBlock("span", normalizeProps(mergeProps({ key: 2 }, $options.getColumnPTOptions('sort'))), [
             (openBlock(), createBlock(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))
         : createCommentVNode("", true),
       ($options.isMultiSorted())
-        ? (openBlock(), createElementBlock("span", _hoisted_5$1, toDisplayString($options.getBadgeValue()), 1))
+        ? (openBlock(), createElementBlock("span", mergeProps({
+            key: 3,
+            class: "p-sortable-column-badge"
+          }, $options.getColumnPTOptions('sortBadge')), toDisplayString($options.getBadgeValue()), 17))
         : createCommentVNode("", true),
       ($options.columnProp('selectionMode') === 'multiple' && $props.filterDisplay !== 'row')
         ? (openBlock(), createBlock(_component_DTHeaderCheckbox, {
@@ -2879,8 +3019,10 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             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"]))
         : createCommentVNode("", true),
       ($props.filterDisplay === 'menu' && $props.column.children && $props.column.children.filter)
         ? (openBlock(), createBlock(_component_DTColumnFilter, {
@@ -2916,17 +3058,20 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
             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"]))
         : createCommentVNode("", true)
-    ])
-  ], 46, _hoisted_1$2))
+    ], 16)
+  ], 16, _hoisted_1))
 }
 
 script$2.render = render$2;
 
 var script$1 = {
     name: 'TableHeader',
+    extends: BaseComponent,
     emits: [
         'column-click',
         'column-mousedown',
@@ -3023,6 +3168,42 @@ var script$1 = {
         columnProp(col, prop) {
             return 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',
@@ -3073,25 +3254,18 @@ var script$1 = {
     }
 };
 
-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 = resolveComponent("DTHeaderCell");
   const _component_DTHeaderCheckbox = resolveComponent("DTHeaderCheckbox");
   const _component_DTColumnFilter = resolveComponent("DTColumnFilter");
 
-  return (openBlock(), createElementBlock("thead", _hoisted_1$1, [
+  return (openBlock(), createElementBlock("thead", mergeProps({
+    class: "p-datatable-thead",
+    role: "rowgroup"
+  }, { ..._ctx.ptm('thead'), ...$options.getColumnGroupPTOptions('root') }), [
     (!$props.columnGroup)
       ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("tr", _hoisted_2$1, [
+          createElementVNode("tr", mergeProps({ role: "row" }, _ctx.ptm('headerRow')), [
             (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
               return (openBlock(), createElementBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
@@ -3129,31 +3303,37 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       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"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
-          ]),
+          ], 16),
           ($props.filterDisplay === 'row')
-            ? (openBlock(), createElementBlock("tr", _hoisted_3$1, [
+            ? (openBlock(), createElementBlock("tr", mergeProps({
+                key: 0,
+                role: "row"
+              }, _ctx.ptm('headerRow')), [
                 (openBlock(true), createElementBlock(Fragment, null, renderList($props.columns, (col, i) => {
                   return (openBlock(), createElementBlock(Fragment, {
                     key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || i
                   }, [
                     (!$options.columnProp(col, 'hidden') && ($props.rowGroupMode !== 'subheader' || $props.groupRowsBy !== $options.columnProp(col, 'field')))
-                      ? (openBlock(), createElementBlock("th", {
+                      ? (openBlock(), createElementBlock("th", mergeProps({
                           key: 0,
-                          style: normalizeStyle($options.getFilterColumnHeaderStyle(col)),
-                          class: 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')
                             ? (openBlock(), 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"]))
                             : createCommentVNode("", true),
                           (col.children && col.children.filter)
                             ? (openBlock(), createBlock(_component_DTColumnFilter, {
@@ -3189,21 +3369,23 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                                 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"]))
                             : createCommentVNode("", true)
-                        ], 6))
+                        ], 16))
                       : createCommentVNode("", true)
                   ], 64))
                 }), 128))
-              ]))
+              ], 16))
             : createCommentVNode("", true)
         ], 64))
       : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList($options.getHeaderRows(), (row, i) => {
-          return (openBlock(), createElementBlock("tr", {
+          return (openBlock(), createElementBlock("tr", mergeProps({
             key: i,
             role: "row"
-          }, [
+          }, $options.getRowPTOptions(row, 'root')), [
             (openBlock(true), createElementBlock(Fragment, null, renderList($options.getHeaderColumns(row), (col, j) => {
               return (openBlock(), createElementBlock(Fragment, {
                 key: $options.columnProp(col, 'columnKey') || $options.columnProp(col, 'field') || j
@@ -3233,20 +3415,22 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                       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"]))
                   : createCommentVNode("", true)
               ], 64))
             }), 128))
-          ]))
+          ], 16))
         }), 128))
-  ]))
+  ], 16))
 }
 
 script$1.render = render$1;
 
 var script = {
     name: 'DataTable',
+    extends: BaseComponent,
     emits: [
         'value-change',
         'update:first',
@@ -5298,36 +5482,6 @@ var script = {
     }
 };
 
-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 = resolveComponent("SpinnerIcon");
   const _component_DTPaginator = resolveComponent("DTPaginator");
@@ -5336,13 +5490,16 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_DTTableFooter = resolveComponent("DTTableFooter");
   const _component_DTVirtualScroller = resolveComponent("DTVirtualScroller");
 
-  return (openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
+  return (openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
     "data-scrollselectors": ".p-datatable-wrapper"
-  }, [
+  }, _ctx.ptm('root')), [
     renderSlot(_ctx.$slots, "default"),
     ($props.loading)
-      ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          class: "p-datatable-loading-overlay p-component-overlay"
+        }, _ctx.ptm('loadingOverlay')), [
           (_ctx.$slots.loading)
             ? renderSlot(_ctx.$slots, "loading", { key: 0 })
             : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
@@ -5352,22 +5509,25 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                       class: "p-datatable-loading-icon"
                     }))
                   : ($props.loadingIcon)
-                    ? (openBlock(), createElementBlock("i", {
+                    ? (openBlock(), createElementBlock("i", mergeProps({
                         key: 1,
-                        class: normalizeClass(['p-datatable-loading-icon pi-spin', $props.loadingIcon])
-                      }, null, 2))
-                    : (openBlock(), createBlock(_component_SpinnerIcon, {
+                        class: ['p-datatable-loading-icon pi-spin', $props.loadingIcon]
+                      }, _ctx.ptm('loadingIcon')), null, 16))
+                    : (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
                         key: 2,
                         spin: "",
                         class: "p-datatable-loading-icon"
-                      }))
+                      }, _ctx.ptm('loadingIcon')), null, 16))
               ], 64))
-        ]))
+        ], 16))
       : createCommentVNode("", true),
     (_ctx.$slots.header)
-      ? (openBlock(), createElementBlock("div", _hoisted_2, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 1,
+          class: "p-datatable-header"
+        }, _ctx.ptm('header')), [
           renderSlot(_ctx.$slots, "header")
-        ]))
+        ], 16))
       : createCommentVNode("", true),
     ($options.paginatorTop)
       ? (openBlock(), createBlock(_component_DTPaginator, {
@@ -5381,7 +5541,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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')
         }, createSlots({ _: 2 }, [
           (_ctx.$slots.paginatorstart)
             ? {
@@ -5437,13 +5598,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: "5"
               }
             : undefined
-        ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
+        ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow", "pt"]))
       : createCommentVNode("", true),
-    createElementVNode("div", {
+    createElementVNode("div", mergeProps({
       class: "p-datatable-wrapper",
-      style: normalizeStyle({ maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' })
-    }, [
-      createVNode(_component_DTVirtualScroller, mergeProps({ ref: "virtualScroller" }, $props.virtualScrollerOptions, {
+      style: { maxHeight: $options.virtualScrollerDisabled ? $props.scrollHeight : '' }
+    }, _ctx.ptm('wrapper')), [
+      createVNode(_component_DTVirtualScroller, mergeProps({ ref: "virtualScroller" }, { ...$props.virtualScrollerOptions, ..._ctx.ptm('virtualScroller') }, {
         items: $options.processedData,
         columns: $options.columns,
         style: $props.scrollHeight !== 'flex' ? { height: $props.scrollHeight } : undefined,
@@ -5460,7 +5621,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             role: "table",
             class: $options.tableStyleClass,
             style: [$props.tableStyle, slotProps.spacerStyle]
-          }, $props.tableProps), [
+          }, { ...$props.tableProps, ..._ctx.ptm('table') }), [
             createVNode(_component_DTTableHeader, {
               columnGroup: $options.headerColumnGroup,
               columns: slotProps.columns,
@@ -5489,8 +5650,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               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)
               ? (openBlock(), createBlock(_component_DTTableBody, {
                   key: 0,
@@ -5603,28 +5765,33 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               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))
-              ? (openBlock(), createElementBlock("tbody", {
+              ? (openBlock(), createElementBlock("tbody", mergeProps({
                   key: 1,
-                  style: 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))
               : createCommentVNode("", true),
             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)
-      ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 3,
+          class: "p-datatable-footer"
+        }, _ctx.ptm('footer')), [
           renderSlot(_ctx.$slots, "footer")
-        ]))
+        ], 16))
       : createCommentVNode("", true),
     ($options.paginatorBottom)
       ? (openBlock(), createBlock(_component_DTPaginator, {
@@ -5638,7 +5805,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           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')
         }, createSlots({ _: 2 }, [
           (_ctx.$slots.paginatorstart)
             ? {
@@ -5694,20 +5862,34 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                 key: "5"
               }
             : undefined
-        ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow"]))
+        ]), 1032, ["rows", "first", "totalRecords", "pageLinkSize", "template", "rowsPerPageOptions", "currentPageReportTemplate", "alwaysShow", "pt"]))
       : createCommentVNode("", true),
-    createElementVNode("div", _hoisted_4, null, 512),
+    createElementVNode("div", mergeProps({
+      ref: "resizeHelper",
+      class: "p-column-resizer-helper",
+      style: {"display":"none"}
+    }, _ctx.ptm('resizeHelper')), null, 16),
     ($props.reorderableColumns)
-      ? (openBlock(), createElementBlock("span", _hoisted_5, [
+      ? (openBlock(), createElementBlock("span", mergeProps({
+          key: 5,
+          ref: "reorderIndicatorUp",
+          class: "p-datatable-reorder-indicator-up",
+          style: {"position":"absolute","display":"none"}
+        }, _ctx.ptm('reorderIndicatorUp')), [
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.reorderindicatorupicon || 'ArrowDownIcon')))
-        ], 512))
+        ], 16))
       : createCommentVNode("", true),
     ($props.reorderableColumns)
-      ? (openBlock(), createElementBlock("span", _hoisted_6, [
+      ? (openBlock(), createElementBlock("span", mergeProps({
+          key: 6,
+          ref: "reorderIndicatorDown",
+          class: "p-datatable-reorder-indicator-down",
+          style: {"position":"absolute","display":"none"}
+        }, _ctx.ptm('reorderIndicatorDown')), [
           (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.reorderindicatordownicon || 'ArrowUpIcon')))
-        ], 512))
+        ], 16))
       : createCommentVNode("", true)
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {