Refactor #3924 - For DataTable & Column

components/lib/column/Column.d.ts

@@ -10,9 +10,22 @@
  */
 
 import { VNode } from 'vue';
+import { ButtonPassThroughOptionType } from '../button';
+import { DropdownPassThroughOptionType } from '../dropdown';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 import { VirtualScrollerLoaderOptions } from '../virtualscroller';
 
+export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes | ((options: ColumnPassThroughMethodOptions) => ColumnPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ColumnPassThroughMethodOptions {
+    props: ColumnProps;
+    state: ColumnState;
+    context: ColumnContext;
+}
+
 /**
  * Filter model metadata.
  */
@@ -68,6 +81,292 @@ export interface ColumnLoadingOptions extends VirtualScrollerLoaderOptions {
     field: string;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ColumnProps.pt}
+ */
+export interface ColumnPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header cell's DOM element.
+     */
+    headerCell?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column resizer's DOM element.
+     */
+    columnResizer?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header content's DOM element.
+     */
+    headerContent?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header title's DOM element.
+     */
+    headerTitle?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sort's DOM element.
+     */
+    sort?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the sort badge's DOM element.
+     */
+    sortBadge?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    headerCheckboxWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox's DOM element.
+     */
+    headerCheckbox?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header checkbox icon's DOM element.
+     */
+    headerCheckboxIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column filter's DOM element.
+     */
+    columnFilter?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter input's DOM element.
+     */
+    filterInput?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter menu button's DOM element.
+     */
+    filterMenuButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header filter clear button's DOM element.
+     */
+    headerFilterClearButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter clear icon's DOM element.
+     */
+    filterClearIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter overlay's DOM element.
+     */
+    filterOverlay?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter row items' DOM element.
+     */
+    filterRowItems?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter row item's DOM element.
+     */
+    filterRowItem?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter separator's DOM element.
+     */
+    filterSeparator?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter operator's DOM element.
+     */
+    filterOperator?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    filterOperatorDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter constraints' DOM element.
+     */
+    filterConstraints?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter constraint's DOM element.
+     */
+    filterConstraint?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Dropdown component.
+     * @see {@link DropdownPassThroughOptionType}
+     */
+    filterMatchModeDropdown?: DropdownPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter remove button container's DOM element.
+     */
+    filterRemove?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterRemoveButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter add rule's DOM element.
+     */
+    filterAddRule?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterAddRuleButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the filter buttonbar's DOM element.
+     */
+    filterButtonbar?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterClearButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptionType}
+     */
+    filterApplyButton?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body cell's DOM element.
+     */
+    bodyCell?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup toggler's DOM element.
+     */
+    rowGroupToggler?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
+     */
+    rowGroupTogglerIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the column title's DOM element.
+     */
+    columnTitle?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton wrapper's DOM element.
+     */
+    radiobuttonWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton's DOM element.
+     */
+    radiobutton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the radiobutton icon's DOM element.
+     */
+    radiobuttonIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox wrapper's DOM element.
+     */
+    checkboxWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox's DOM element.
+     */
+    checkbox?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the checkbox icon's DOM element.
+     */
+    checkboxIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowtoggler's DOM element.
+     */
+    rowToggler?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the rowtoggler icon's DOM element.
+     */
+    rowTogglerIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor init button's DOM element.
+     */
+    rowEditorInitButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor init icon's DOM element.
+     */
+    rowEditorInitIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor edit button's DOM element.
+     */
+    rowEditorEditButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor edit icon's DOM element.
+     */
+    rowEditorEditIcon?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor cancel button's DOM element.
+     */
+    rowEditorCancelButton?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the row editor cancel icon's DOM element.
+     */
+    rowEditorCancelIcon?: ColumnPassThroughOptionType;
+
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenHeaderInputWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenHeaderInput?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input wrapper's DOM element.
+     */
+    hiddenInputWrapper?: ColumnPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the hidden input's DOM element.
+     */
+    hiddenInput?: ColumnPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ColumnPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Column component.
+ */
+export interface ColumnState {
+    d_editing: boolean;
+    /**
+     * Current style of the body cell.
+     */
+    styleObject: object;
+    /**
+     * Current filter overlay visible as a boolean.
+     */
+    overlayVisible: boolean;
+    /**
+     * Current filter match mode.
+     */
+    defaultMatchMode: string;
+    /**
+     * Current filter operator.
+     */
+    defaultOperator: string;
+    /**
+     * Current focused state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current style of the rowgroup header.
+     */
+    rowGroupHeaderStyleObject: object;
+}
+
+/**
+ * Defines current options in Column component.
+ */
+export interface ColumnContext {
+    /**
+     * Current checked state of row as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current focused state of row as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current disabled state of row as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
 /**
  * Defines valid properties in Column component.
  */
@@ -569,9 +868,9 @@ export interface ColumnEmits {}
 /**
  * **PrimeVue - Column**
  *
- * _Column is a helper component for DataTable and TreeTable._
+ * _Column is a helper component for Column and TreeTable._
  *
- * [Live Demo](https://www.primevue.org/datatable/)
+ * [Live Demo](https://www.primevue.org/Column/)
  * --- ---
  * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
  *

components/lib/column/Column.vue

@@ -1,6 +1,9 @@
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Column',
+    extends: BaseComponent,
     props: {
         columnKey: {
             type: null,

components/lib/datatable/BodyCell.vue

@@ -1,9 +1,9 @@
 <template>
-    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="ptm('bodyCell')">
+    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
         <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
     </td>
-    <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="ptm('bodyCell')">
+    <td v-else :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
-        <span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="ptm('columnTitle')">{{ columnProp('header') }}</span>
+        <span v-if="responsiveLayout === 'stack'" class="p-column-title" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
         <component v-if="column.children && column.children.body && !d_editing" :is="column.children.body" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :editorInitCallback="editorInitCallback" />
         <component
             v-else-if="column.children && column.children.editor && d_editing"
@@ -18,7 +18,7 @@
         />
         <component v-else-if="column.children && column.children.body && !column.children.editor && d_editing" :is="column.children.body" :data="editingRowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" />
         <template v-else-if="columnProp('selectionMode')">
-            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :pt="pt" />
+            <DTRadioButton v-if="columnProp('selectionMode') === 'single'" :value="rowData" :name="name" :checked="selected" @change="toggleRowWithRadio($event, rowIndex)" :column="column" :pt="pt" />
             <DTCheckbox
                 v-else-if="columnProp('selectionMode') === 'multiple'"
                 :value="rowData"
@@ -26,6 +26,7 @@
                 :rowCheckboxIconTemplate="column.children && column.children.rowcheckboxicon"
                 :aria-selected="selected ? true : undefined"
                 @change="toggleRowWithCheckbox($event, rowIndex)"
+                :column="column"
                 :pt="pt"
             />
         </template>
@@ -33,25 +34,25 @@
             <component :is="column.children && column.children.rowreordericon ? column.children.rowreordericon : columnProp('rowReorderIcon') ? 'i' : 'BarsIcon'" :class="['p-datatable-reorderablerow-handle', columnProp('rowReorderIcon')]" />
         </template>
         <template v-else-if="columnProp('expander')">
-            <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="ptm('rowToggler')">
+            <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
                 <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
                 <template v-else>
                     <span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
-                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowTogglerIcon')" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
                     <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
-                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowTogglerIcon')" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
                 </template>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
-            <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="ptm('rowEditorInitButton')">
+            <button v-if="!d_editing" v-ripple class="p-row-editor-init p-link" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
-                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="ptm('rowEditorInitIcon')" />
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" class="p-row-editor-init-icon" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="ptm('rowEditorEditButton')">
+            <button v-if="d_editing" v-ripple class="p-row-editor-save p-link" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorEditButton')">
-                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="ptm('rowEditorEditIcon')" />
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" class="p-row-editor-save-icon" v-bind="getColumnPTOptions(column, 'rowEditorEditIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="ptm('rowEditorCancelButton')">
+            <button v-if="d_editing" v-ripple class="p-row-editor-cancel p-link" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
-                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="ptm('rowEditorCancelIcon')" />
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" class="p-row-editor-cancel-icon" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -187,6 +188,18 @@ export default {
         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);
         },

components/lib/datatable/ColumnFilter.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="containerClass" v-bind="ptm('columnFilter')">
+    <div :class="containerClass" v-bind="getColumnPTOptions('columnFilter')">
-        <div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...ptm('filterInput') }">
+        <div v-if="display === 'row'" class="p-fluid p-column-filter-element" v-bind="{ ...filterInputProps, ...getColumnPTOptions('filterInput') }">
             <component :is="filterElement" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
         </div>
         <button
@@ -15,12 +15,12 @@
             :class="{ 'p-column-filter-menu-button-open': overlayVisible, 'p-column-filter-menu-button-active': hasFilter() }"
             @click="toggleMenu()"
             @keydown="onToggleButtonKeyDown($event)"
-            v-bind="ptm('filterMenuButton')"
+            v-bind="getColumnPTOptions('filterMenuButton')"
         >
             <component :is="filterIconTemplate || 'FilterIcon'" />
         </button>
-        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()" v-bind="ptm('headerFilterClearButton')">
+        <button v-if="showClearButton && display === 'row'" :class="{ 'p-hidden-space': !hasRowFilter() }" type="button" class="p-column-filter-clear-button p-link" @click="clearFilter()" v-bind="getColumnPTOptions('headerFilterClearButton')">
-            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="ptm('filterClearIcon')" />
+            <component :is="filterClearIconTemplate || 'FilterSlashIcon'" v-bind="getColumnPTOptions('filterClearIcon')" />
         </button>
         <Portal>
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -35,11 +35,11 @@
                     @keydown.escape="hide"
                     @click="onContentClick"
                     @mousedown="onContentMouseDown"
-                    v-bind="ptm('filterOverlay')"
+                    v-bind="getColumnPTOptions('filterOverlay')"
                 >
                     <component :is="filterHeaderTemplate" :field="field" :filterModel="filters[field]" :filterCallback="filterCallback" />
                     <template v-if="display === 'row'">
-                        <ul class="p-column-filter-row-items" v-bind="ptm('filterRowItems')">
+                        <ul class="p-column-filter-row-items" v-bind="getColumnPTOptions('filterRowItems')">
                             <li
                                 v-for="(matchMode, i) of matchModes"
                                 :key="matchMode.label"
@@ -49,16 +49,18 @@
                                 @keydown.enter.prevent="onRowMatchModeChange(matchMode.value)"
                                 :class="{ 'p-highlight': isRowMatchModeSelected(matchMode.value) }"
                                 :tabindex="i === 0 ? '0' : null"
-                                v-bind="ptm('filterRowItem')"
+                                v-bind="getColumnPTOptions('filterRowItem')"
                             >
                                 {{ matchMode.label }}
                             </li>
-                            <li class="p-column-filter-separator" v-bind="ptm('filterSeparator')"></li>
+                            <li class="p-column-filter-separator" v-bind="getColumnPTOptions('filterInput')"></li>
-                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="ptm('filterRowItem')">{{ noFilterLabel }}</li>
+                            <li class="p-column-filter-row-item" @click="clearFilter()" @keydown="onRowMatchModeKeyDown($event)" @keydown.enter="onRowClearItemClick()" v-bind="getColumnPTOptions('filterRowItem')">
+                                {{ noFilterLabel }}
+                            </li>
                         </ul>
                     </template>
                     <template v-else>
-                        <div v-if="isShowOperator" class="p-column-filter-operator" v-bind="ptm('filterOperator')">
+                        <div v-if="isShowOperator" class="p-column-filter-operator" v-bind="getColumnPTOptions('filterOperator')">
                             <CFDropdown
                                 :options="operatorOptions"
                                 :modelValue="operator"
@@ -67,11 +69,11 @@
                                 optionLabel="label"
                                 optionValue="value"
                                 @update:modelValue="onOperatorChange($event)"
-                                :pt="ptm('filterOperatorDropdown')"
+                                :pt="getColumnPTOptions('filterOperatorDropdown')"
                             ></CFDropdown>
                         </div>
-                        <div class="p-column-filter-constraints" v-bind="ptm('filterConstraints')">
+                        <div class="p-column-filter-constraints" v-bind="getColumnPTOptions('filterConstraints')">
-                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="ptm('filterConstraint')">
+                            <div v-for="(fieldConstraint, i) of fieldConstraints" :key="i" class="p-column-filter-constraint" v-bind="getColumnPTOptions('filterConstraint')">
                                 <CFDropdown
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
@@ -81,37 +83,37 @@
                                     optionValue="value"
                                     :aria-label="filterConstraintAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
-                                    :pt="ptm('filterMatchModeDropdown')"
+                                    :pt="getColumnPTOptions('filterMatchModeDropdown')"
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" />
-                                <div v-bind="ptm('filterRemove')">
+                                <div v-bind="getColumnPTOptions('filterRemove')">
                                     <CFButton
                                         v-if="showRemoveIcon"
                                         type="button"
                                         class="p-column-filter-remove-button p-button-text p-button-danger p-button-sm"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
-                                        :pt="ptm('filterRemoveButton')"
+                                        :pt="getColumnPTOptions('filterRemoveButton')"
                                     >
                                         <template #icon="iconProps">
-                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="ptm('filterRemoveButton')['icon']" />
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterRemoveButton')['icon']" />
                                         </template>
                                     </CFButton>
                                 </div>
                             </div>
                         </div>
-                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="ptm('filterAddRule')">
+                        <div v-if="isShowAddConstraint" class="p-column-filter-add-rule" v-bind="getColumnPTOptions('filterAddRule')">
-                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="ptm('filterAddRuleButton')">
+                            <CFButton type="button" :label="addRuleButtonLabel" iconPos="left" class="p-column-filter-add-button p-button-text p-button-sm" @click="addConstraint()" :pt="getColumnPTOptions('filterAddRuleButton')">
                                 <template #icon="iconProps">
-                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="ptm('filterAddRuleButton')['icon']" />
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPTOptions('filterAddRuleButton')['icon']" />
                                 </template>
                             </CFButton>
                         </div>
-                        <div class="p-column-filter-buttonbar" v-bind="ptm('filterButtonbar')">
+                        <div class="p-column-filter-buttonbar" v-bind="getColumnPTOptions('filterButtonbar')">
-                            <CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="ptm('filterClearButton')"></CFButton>
+                            <CFButton v-if="!filterClearTemplate && showClearButton" type="button" class="p-button-outlined p-button-sm" :label="clearButtonLabel" @click="clearFilter" :pt="getColumnPTOptions('filterClearButton')"></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="ptm('filterApplyButton')"></CFButton>
+                                <CFButton v-if="!filterApplyTemplate" type="button" class="p-button-sm" :label="applyButtonLabel" @click="applyFilter()" v-bind="getColumnPTOptions('filterApplyButton')"></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
@@ -245,7 +247,8 @@ export default {
         filterInputProps: {
             type: null,
             default: null
-        }
+        },
+        column: null
     },
     data() {
         return {
@@ -281,6 +284,18 @@ export default {
         }
     },
     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 };
 

components/lib/datatable/DataTable.d.ts

@@ -8,8 +8,6 @@
  *
  */
 import { InputHTMLAttributes, TableHTMLAttributes, VNode } from 'vue';
-import { ButtonPassThroughOptionType } from '../button';
-import { DropdownPassThroughOptionType } from '../dropdown';
 import { PaginatorPassThroughOptionType } from '../paginator';
 import { ClassComponent, GlobalComponentConstructor, Nullable } from '../ts-helpers';
 import { VirtualScrollerPassThroughOptionType, VirtualScrollerProps } from '../virtualscroller';
@@ -22,7 +20,6 @@ export declare type DataTablePassThroughOptionType = DataTablePassThroughAttribu
 export interface DataTablePassThroughMethodOptions {
     props: DataTableProps;
     state: DataTableState;
-    context: DataTableContext;
 }
 
 /**
@@ -590,128 +587,6 @@ export interface DataTablePassThroughOptions {
      * Uses to pass attributes to the header row's DOM element.
      */
     headerRow?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header cell's DOM element.
-     */
-    headerCell?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the column resizer's DOM element.
-     */
-    columnResizer?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header content's DOM element.
-     */
-    headerContent?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header title's DOM element.
-     */
-    headerTitle?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the sort's DOM element.
-     */
-    sort?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the sort badge's DOM element.
-     */
-    sortBadge?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header checkbox's DOM element.
-     */
-    headerCheckbox?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header checkbox icon's DOM element.
-     */
-    headerCheckboxIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the column filter's DOM element.
-     */
-    columnFilter?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter input's DOM element.
-     */
-    filterInput?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter menu button's DOM element.
-     */
-    filterMenuButton?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header filter clear button's DOM element.
-     */
-    headerFilterClearButton?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter clear icon's DOM element.
-     */
-    filterClearIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter overlay's DOM element.
-     */
-    filterOverlay?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter row items' DOM element.
-     */
-    filterRowItems?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter row item's DOM element.
-     */
-    filterRowItem?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter separator's DOM element.
-     */
-    filterSeparator?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter operator's DOM element.
-     */
-    filterOperator?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptionType}
-     */
-    filterOperatorDropdown?: DropdownPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter constraints' DOM element.
-     */
-    filterConstraints?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter constraint's DOM element.
-     */
-    filterConstraint?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the Dropdown component.
-     * @see {@link DropdownPassThroughOptionType}
-     */
-    filterMatchModeDropdown?: DropdownPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter remove button container's DOM element.
-     */
-    filterRemove?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
-     */
-    filterRemoveButton?: ButtonPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter add rule's DOM element.
-     */
-    filterAddRule?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
-     */
-    filterAddRuleButton?: ButtonPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the filter buttonbar's DOM element.
-     */
-    filterButtonbar?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
-     */
-    filterClearButton?: ButtonPassThroughOptionType;
-    /**
-     * Uses to pass attributes to the Button component.
-     * @see {@link ButtonPassThroughOptionType}
-     */
-    filterApplyButton?: ButtonPassThroughOptionType;
     /**
      * Uses to pass attributes to the tbody's DOM element.
      */
@@ -720,18 +595,6 @@ export interface DataTablePassThroughOptions {
      * Uses to pass attributes to the rowgroup header's DOM element.
      */
     rowgroupHeader?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the body cell's DOM element.
-     */
-    bodyCell?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the rowgroup toggler's DOM element.
-     */
-    rowGroupToggler?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the rowgroup toggler icon's DOM element.
-     */
-    rowGroupTogglerIcon?: DataTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the row's DOM element.
      */
@@ -748,66 +611,6 @@ export interface DataTablePassThroughOptions {
      * Uses to pass attributes to the empty message's DOM element.
      */
     emptyMessage?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the column title's DOM element.
-     */
-    columnTitle?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the radiobutton wrapper's DOM element.
-     */
-    radiobuttonWrapper?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the radiobutton's DOM element.
-     */
-    radiobutton?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the radiobutton icon's DOM element.
-     */
-    radiobuttonIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the checkbox wrapper's DOM element.
-     */
-    checkboxWrapper?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the checkbox's DOM element.
-     */
-    checkbox?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the checkbox icon's DOM element.
-     */
-    checkboxIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the rowtoggler's DOM element.
-     */
-    rowToggler?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the rowtoggler icon's DOM element.
-     */
-    rowTogglerIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the row editor init button's DOM element.
-     */
-    rowEditorInitButton?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the row editor init icon's DOM element.
-     */
-    rowEditorInitIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the row editor edit button's DOM element.
-     */
-    rowEditorEditButton?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the row editor edit icon's DOM element.
-     */
-    rowEditorEditIcon?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the row editor cancel button's DOM element.
-     */
-    rowEditorCancelButton?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the row editor cancel icon's DOM element.
-     */
-    rowEditorCancelIcon?: DataTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the tfoot's DOM element.
      */
@@ -832,22 +635,6 @@ export interface DataTablePassThroughOptions {
      * Uses to pass attributes to the reorder indicator down's DOM element.
      */
     reorderIndicatorDown?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the hidden input wrapper's DOM element.
-     */
-    hiddenHeaderInputWrapper?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the hidden input's DOM element.
-     */
-    hiddenHeaderInput?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the hidden input wrapper's DOM element.
-     */
-    hiddenInputWrapper?: DataTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the hidden input's DOM element.
-     */
-    hiddenInput?: DataTablePassThroughOptionType;
 }
 
 /**
@@ -914,52 +701,6 @@ export interface DataTableState {
      * @defaultValue false
      */
     d_editing: boolean;
-    /**
-     * Current style of the body cell.
-     */
-    styleObject: object;
-    /**
-     * Current filter overlay visible as a boolean.
-     */
-    overlayVisible: boolean;
-    /**
-     * Current filter match mode.
-     */
-    defaultMatchMode: string;
-    /**
-     * Current filter operator.
-     */
-    defaultOperator: string;
-    /**
-     * Current focused state as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
-    /**
-     * Current style of the rowgroup header.
-     */
-    rowGroupHeaderStyleObject: object;
-}
-
-/**
- * Defines current options in DataTable component.
- */
-export interface DataTableContext {
-    /**
-     * Current checked state of row as a boolean.
-     * @defaultValue false
-     */
-    checked: boolean;
-    /**
-     * Current focused state of row as a boolean.
-     * @defaultValue false
-     */
-    focused: boolean;
-    /**
-     * Current disabled state of row as a boolean.
-     * @defaultValue false
-     */
-    disabled: boolean;
 }
 
 /**

components/lib/datatable/DataTable.vue

@@ -231,7 +231,7 @@
             class="p-paginator-bottom"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
-            v-bind="ptm('paginator')"
+            :pt="ptm('paginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>

components/lib/datatable/FooterCell.vue

@@ -1,5 +1,5 @@
 <template>
-    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="ptm('footerCell')">
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
         {{ columnProp('footer') }}
     </td>
@@ -37,6 +37,18 @@ export default {
         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');

components/lib/datatable/HeaderCell.vue

@@ -14,22 +14,23 @@
         @dragover="onDragOver"
         @dragleave="onDragLeave"
         @drop="onDrop"
-        v-bind="ptm('headerCell')"
+        v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="ptm('columnResizer')"></span>
+        <span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
-        <div class="p-column-header-content" v-bind="ptm('headerContent')">
+        <div class="p-column-header-content" v-bind="getColumnPTOptions('headerContent')">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-            <span v-if="columnProp('header')" class="p-column-title" v-bind="ptm('headerTitle')">{{ columnProp('header') }}</span>
+            <span v-if="columnProp('header')" class="p-column-title" v-bind="{ ...getColumnPTOptions('headerTitle') }">{{ columnProp('header') }}</span>
-            <span v-if="columnProp('sortable')" v-bind="ptm('sort')">
+            <span v-if="columnProp('sortable')" v-bind="{ ...getColumnPTOptions('sort') }">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
             </span>
-            <span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="ptm('sortBadge')">{{ getBadgeValue() }}</span>
+            <span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="{ ...getColumnPTOptions('sortBadge') }">{{ getBadgeValue() }}</span>
             <DTHeaderCheckbox
                 v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
                 :checked="allRowsSelected"
                 @change="onHeaderCheckboxChange"
                 :disabled="empty"
                 :headerCheckboxIconTemplate="headerCheckboxIconTemplate"
+                :column="column"
                 :pt="pt"
             />
             <DTColumnFilter
@@ -67,6 +68,7 @@
                 @constraint-remove="$emit('constraint-remove', $event)"
                 @apply-click="$emit('apply-click', $event)"
                 :pt="pt"
+                :column="column"
             />
         </div>
     </th>
@@ -191,6 +193,18 @@ export default {
         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 });
         },

components/lib/datatable/HeaderCheckbox.vue

@@ -1,11 +1,21 @@
 <template>
-    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="ptm('headerCheckbox')">
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused, 'p-disabled': disabled }]" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('headerCheckboxWrapper')">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenHeaderInputWrapper')">
+        <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenHeaderInputWrapper')">
-            <input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" v-bind="ptm('hiddenHeaderInput')" />
+            <input
+                ref="input"
+                type="checkbox"
+                :checked="checked"
+                :disabled="disabled"
+                :tabindex="disabled ? null : '0'"
+                :aria-label="headerCheckboxAriaLabel"
+                @focus="onFocus($event)"
+                @blur="onBlur($event)"
+                v-bind="getColumnPTOptions('hiddenHeaderInput')"
+            />
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getPTOptions('checkbox')">
+        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('headerCheckbox')">
             <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
-            <CheckIcon v-else class="p-checkbox-icon" v-bind="getPTOptions('headerCheckboxIcon')" />
+            <CheckIcon v-else class="p-checkbox-icon" v-bind="getColumnPTOptions('headerCheckboxIcon')" />
         </div>
     </div>
 </template>
@@ -22,6 +32,7 @@ export default {
     props: {
         checked: null,
         disabled: null,
+        column: null,
         headerCheckboxIconTemplate: {
             type: Function,
             default: null
@@ -33,8 +44,13 @@ export default {
         };
     },
     methods: {
-        getPTOptions(key) {
+        getColumnPTOptions(key) {
-            return this.ptm(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,
@@ -42,6 +58,9 @@ export default {
                 }
             });
         },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             if (!this.disabled) {
                 this.$emit('change', {

components/lib/datatable/RowCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="ptm('checkboxWrapper')">
+    <div :class="['p-checkbox p-component', { 'p-checkbox-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('checkboxWrapper')">
-        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
+        <div class="p-hidden-accessible" v-bind="getColumnPTOptions('hiddenInputWrapper')">
             <input
                 ref="input"
                 type="checkbox"
@@ -14,9 +14,9 @@
                 v-bind="ptm('hiddenInput')"
             />
         </div>
-        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getPTOptions('checkbox')">
+        <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('checkbox')">
             <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
-            <CheckIcon v-else class="p-checkbox-icon" v-bind="getPTOptions('checkboxIcon')" />
+            <CheckIcon v-else class="p-checkbox-icon" v-bind="getColumnPTOptions('checkboxIcon')" />
         </div>
     </div>
 </template>
@@ -33,6 +33,7 @@ export default {
     props: {
         value: null,
         checked: null,
+        column: null,
         rowCheckboxIconTemplate: {
             type: Function,
             default: null
@@ -44,8 +45,13 @@ export default {
         };
     },
     methods: {
-        getPTOptions(key) {
+        getColumnPTOptions(key) {
-            return this.ptm(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,
@@ -53,6 +59,9 @@ export default {
                 }
             });
         },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             if (!this.$attrs.disabled) {
                 this.$emit('change', {

components/lib/datatable/RowRadioButton.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="ptm('radiobuttonWrapper')">
+    <div :class="['p-radiobutton p-component', { 'p-radiobutton-focused': focused }]" @click="onClick" v-bind="getColumnPTOptions('radiobuttonWrapper')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')">
-            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="ptm('hiddenInput')" />
+            <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPTOptions('hiddenInput')" />
         </div>
-        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="ptm('radiobutton')">
+        <div ref="box" :class="['p-radiobutton-box p-component', { 'p-highlight': checked, 'p-disabled': $attrs.disabled, 'p-focus': focused }]" v-bind="getColumnPTOptions('radiobutton')">
-            <div class="p-radiobutton-icon" v-bind="ptm('radiobuttonIcon')"></div>
+            <div class="p-radiobutton-icon" v-bind="getColumnPTOptions('radiobuttonIcon')"></div>
         </div>
     </div>
 </template>
@@ -21,7 +21,8 @@ export default {
     props: {
         value: null,
         checked: null,
-        name: null
+        name: null,
+        column: null
     },
     data() {
         return {
@@ -29,8 +30,13 @@ export default {
         };
     },
     methods: {
-        getPTOptions(key) {
+        getColumnPTOptions(key) {
-            return this.ptm(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,
@@ -38,6 +44,9 @@ export default {
                 }
             });
         },
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
+        },
         onClick(event) {
             if (!this.disabled) {
                 if (!this.checked) {

components/lib/datatable/TableBody.vue

@@ -10,14 +10,14 @@
                     role="row"
                     v-bind="ptm('rowgroupHeader')"
                 >
-                    <td :colspan="columnsLength - 1" v-bind="ptm('bodyCell')">
+                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
-                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="ptm('rowGroupToggler')">
+                        <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button" v-bind="getColumnPTOptions('rowGroupToggler')">
                             <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
                             <template v-else>
                                 <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
-                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowGroupTogglerIcon')" />
+                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
                                 <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
-                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="ptm('rowGroupTogglerIcon')" />
+                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" v-bind="getColumnPTOptions('rowGroupTogglerIcon')" />
                             </template>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
@@ -87,7 +87,7 @@
                     role="row"
                     v-bind="ptm('rowExpansion')"
                 >
-                    <td :colspan="columnsLength">
+                    <td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                         <component :is="templates['expansion']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
@@ -98,14 +98,14 @@
                     role="row"
                     v-bind="ptm('rowgroupFooter')"
                 >
-                    <td :colspan="columnsLength - 1">
+                    <td :colspan="columnsLength - 1" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                         <component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
                     </td>
                 </tr>
             </template>
         </template>
         <tr v-else class="p-datatable-emptymessage" role="row" v-bind="ptm('emptyMessage')">
-            <td :colspan="columnsLength">
+            <td :colspan="columnsLength" v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('bodyCell') }">
                 <component v-if="templates.empty" :is="templates.empty" />
             </td>
         </tr>
@@ -301,6 +301,18 @@ export default {
         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];

components/lib/datatable/TableHeader.vue

@@ -42,8 +42,13 @@
             </tr>
             <tr v-if="filterDisplay === 'row'" role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
-                    <th v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))" :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)" v-bind="ptm('headerCell')">
+                    <th
-                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :pt="pt" />
+                        v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
+                        :style="getFilterColumnHeaderStyle(col)"
+                        :class="getFilterColumnHeaderClass(col)"
+                        v-bind="{ ...getColumnPTOptions(col, 'root'), ...getColumnPTOptions(col, 'headerCell') }"
+                    >
+                        <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
                         <DTColumnFilter
                             v-if="col.children && col.children.filter"
                             :field="columnProp(col, 'filterField') || columnProp(col, 'field')"
@@ -79,6 +84,7 @@
                             @constraint-remove="$emit('constraint-remove', $event)"
                             @apply-click="$emit('apply-click', $event)"
                             :pt="pt"
+                            :column="col"
                         />
                     </th>
                 </template>
@@ -226,6 +232,18 @@ export default {
         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
+        },
         getFilterColumnHeaderClass(column) {
             return [
                 'p-filter-column',