From 9c2d39313fd4d82c9cab5a65f3b5b88fe90b9033 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Fri, 2 Jun 2023 14:10:18 +0300
Subject: [PATCH] Refactor #3983 - For DataTable

---
 components/lib/column/Column.d.ts           | 49 +++++++++++----------
 components/lib/columngroup/ColumnGroup.d.ts | 11 +++++
 components/lib/datatable/BodyCell.vue       | 41 +++++++++--------
 components/lib/datatable/DataTable.d.ts     |  4 +-
 components/lib/datatable/FooterCell.vue     | 17 +++++--
 components/lib/datatable/HeaderCell.vue     | 27 ++++++++----
 components/lib/datatable/TableBody.vue      |  2 +-
 components/lib/datatable/TableFooter.vue    | 28 ++++++++----
 components/lib/datatable/TableHeader.vue    | 40 ++++++++++++-----
 components/lib/row/Row.d.ts                 | 11 +++++
 10 files changed, 152 insertions(+), 78 deletions(-)

diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index 7cbe89a5b..5d11ee453 100755
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -23,9 +23,8 @@ export declare type ColumnPassThroughOptionType = ColumnPassThroughAttributes |
  */
 export interface ColumnPassThroughMethodOptions {
     props: ColumnProps;
-    state: ColumnState;
-    context: ColumnContext;
     parent: DataTablePassThroughOptions;
+    context: ColumnContext;
 }
 
 /**
@@ -348,27 +347,6 @@ export interface ColumnState {
     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.
  */
@@ -579,6 +557,31 @@ export interface ColumnProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines current options in Column component.
+ */
+export interface ColumnContext {
+    /**
+     * Current index of the column.
+     */
+    index: number;
+    /**
+     * 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 slots in Column component.
  */
diff --git a/components/lib/columngroup/ColumnGroup.d.ts b/components/lib/columngroup/ColumnGroup.d.ts
index 443c3c055..65360f7cf 100755
--- a/components/lib/columngroup/ColumnGroup.d.ts
+++ b/components/lib/columngroup/ColumnGroup.d.ts
@@ -16,6 +16,7 @@ export declare type ColumnGroupPassThroughOptionType = ColumnGroupPassThroughAtt
 export interface ColumnGroupPassThroughMethodOptions {
     props: ColumnGroupProps;
     parent: DataTablePassThroughOptions;
+    context: ColumnGroupContext;
 }
 
 /**
@@ -56,6 +57,16 @@ export interface ColumnGroupProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines current options in ColumnGroup component.
+ */
+export interface ColumnGroupContext {
+    /**
+     * Current type of the column group.
+     */
+    type: string;
+}
+
 /**
  * Defines valid slots in ColumnGroup component.
  */
diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index 2aacba596..7dba51f84 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -1,5 +1,5 @@
 <template>
-    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }">
+    <td v-if="loading" :style="containerStyle" :class="containerClass" role="cell" v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }">
         <component :is="column.children.loading" :data="rowData" :column="column" :field="field" :index="rowIndex" :frozenRow="frozenRow" :loadingOptions="loadingOptions" />
     </td>
     <td
@@ -9,13 +9,13 @@
         @click="onClick"
         @keydown="onKeyDown"
         role="cell"
-        v-bind="{ ...getColumnPTOptions(column, 'root'), ...getColumnPTOptions(column, 'bodyCell') }"
+        v-bind="{ ...getColumnPT('root'), ...getColumnPT('bodyCell') }"
         :data-p-selection-column="columnProp('selectionMode') != null"
         :data-p-editable-column="isEditable()"
         :data-p-cell-editing="d_editing"
         :data-p-frozen-column="columnProp('frozen')"
     >
-        <span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPTOptions(column, 'columnTitle')">{{ columnProp('header') }}</span>
+        <span v-if="responsiveLayout === 'stack'" :class="cx('columnTitle')" v-bind="getColumnPT('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"
@@ -48,25 +48,25 @@
             <BarsIcon v-else :class="cx('rowReorderIcon')" data-pc-section="rowreordericon" />
         </template>
         <template v-else-if="columnProp('expander')">
-            <button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPTOptions(column, 'rowToggler')">
+            <button v-ripple :class="cx('rowToggler')" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow" v-bind="getColumnPT('rowToggler')">
                 <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
                 <template v-else>
                     <span v-if="isRowExpanded && expandedRowIcon" :class="[cx('rowTogglerIcon'), expandedRowIcon]" />
-                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
                     <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="[cx('rowTogglerIcon'), collapsedRowIcon]" />
-                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPTOptions(column, 'rowTogglerIcon')" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
                 </template>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
-            <button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPTOptions(column, 'rowEditorInitButton')">
-                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPTOptions(column, 'rowEditorInitIcon')" />
+            <button v-if="!d_editing" v-ripple :class="cx('rowEditorInitButton')" type="button" :aria-label="initButtonAriaLabel" @click="onRowEditInit" v-bind="getColumnPT('rowEditorInitButton')">
+                <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="cx('rowEditorInitIcon')" v-bind="getColumnPT('rowEditorInitIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPTOptions(column, 'rowEditorSaveButton')">
-                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPTOptions(column, 'rowEditorSaveIcon')" />
+            <button v-if="d_editing" v-ripple :class="cx('rowEditorSaveButton')" type="button" :aria-label="saveButtonAriaLabel" @click="onRowEditSave" v-bind="getColumnPT('rowEditorSaveButton')">
+                <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="cx('rowEditorSaveIcon')" v-bind="getColumnPT('rowEditorSaveIcon')" />
             </button>
-            <button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPTOptions(column, 'rowEditorCancelButton')">
-                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPTOptions(column, 'rowEditorCancelIcon')" />
+            <button v-if="d_editing" v-ripple :class="cx('rowEditorCancelButton')" type="button" :aria-label="cancelButtonAriaLabel" @click="onRowEditCancel" v-bind="getColumnPT('rowEditorCancelButton')">
+                <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="cx('rowEditorCancelIcon')" v-bind="getColumnPT('rowEditorCancelIcon')" />
             </button>
         </template>
         <template v-else>{{ resolveFieldData() }}</template>
@@ -202,17 +202,22 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
-        getColumnPTOptions(column, key) {
-            return this.ptmo(this.getColumnProp(column), key, {
-                props: column.props,
+        getColumnPT(key) {
+            const columnMetaData = {
+                props: this.column.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index: this.index
                 }
-            });
+            };
+
+            return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
         },
-        getColumnProp(column) {
-            return column.props && column.props.pt ? column.props.pt : undefined; //@todo
+        getColumnProp() {
+            return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
         },
         resolveFieldData() {
             return ObjectUtils.resolveFieldData(this.rowData, this.field);
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 486cec708..278f921d7 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -596,9 +596,9 @@ export interface DataTablePassThroughOptions {
      */
     rowgroupHeader?: DataTablePassThroughOptionType;
     /**
-     * Uses to pass attributes to the row's DOM element.
+     * Uses to pass attributes to the body row's DOM element.
      */
-    row?: DataTablePassThroughOptionType;
+    bodyRow?: DataTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the row expansion's DOM element.
      */
diff --git a/components/lib/datatable/FooterCell.vue b/components/lib/datatable/FooterCell.vue
index 19907519e..5d9bf4def 100644
--- a/components/lib/datatable/FooterCell.vue
+++ b/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="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('footerCell') }">
+    <td :style="containerStyle" :class="containerClass" role="cell" :colspan="columnProp('colspan')" :rowspan="columnProp('rowspan')" v-bind="{ ...getColumnPT('root'), ...getColumnPT('footerCell') }">
         <component v-if="column.children && column.children.footer" :is="column.children.footer" :column="column" />
         {{ columnProp('footer') }}
     </td>
@@ -16,6 +16,10 @@ export default {
         column: {
             type: Object,
             default: null
+        },
+        index: {
+            type: Number,
+            default: null
         }
     },
     data() {
@@ -37,14 +41,19 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
-        getColumnPTOptions(key) {
-            return this.ptmo(this.getColumnProp(), key, {
+        getColumnPT(key) {
+            const columnMetaData = {
                 props: this.column.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index: this.index
                 }
-            });
+            };
+
+            return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
         },
         getColumnProp() {
             return this.column.props && this.column.props.pt ? this.column.props.pt : undefined;
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index d8a3d9121..dbe498533 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -14,7 +14,7 @@
         @dragover="onDragOver"
         @dragleave="onDragLeave"
         @drop="onDrop"
-        v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
+        v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
         :data-p-sortable-column="columnProp('sortable')"
         :data-p-resizable-column="resizableColumns"
         :data-p-highlight="isColumnSorted()"
@@ -22,14 +22,14 @@
         :data-p-frozen-column="columnProp('frozen')"
         :data-p-reorderable-column="reorderableColumns"
     >
-        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
-        <div :class="cx('headerContent')" v-bind="getColumnPTOptions('headerContent')">
+        <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
+        <div :class="cx('headerContent')" v-bind="getColumnPT('headerContent')">
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
-            <span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
-            <span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
+            <span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
+            <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
                 <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
             </span>
-            <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
+            <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
             <DTHeaderCheckbox
                 v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
                 :checked="allRowsSelected"
@@ -115,6 +115,10 @@ export default {
             type: Object,
             default: null
         },
+        index: {
+            type: Number,
+            default: null
+        },
         resizableColumns: {
             type: Boolean,
             default: false
@@ -199,14 +203,19 @@ export default {
         columnProp(prop) {
             return ObjectUtils.getVNodeProp(this.column, prop);
         },
-        getColumnPTOptions(key) {
-            return this.ptmo(this.getColumnProp(), key, {
+        getColumnPT(key) {
+            const columnMetaData = {
                 props: this.column.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index: this.index
                 }
-            });
+            };
+
+            return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(), key, columnMetaData) };
         },
         getColumnProp() {
             return this.column.props && this.column.props.pt ? this.column.props.pt : undefined; //@todo:
diff --git a/components/lib/datatable/TableBody.vue b/components/lib/datatable/TableBody.vue
index ee7d47317..1493f073b 100755
--- a/components/lib/datatable/TableBody.vue
+++ b/components/lib/datatable/TableBody.vue
@@ -42,7 +42,7 @@
                     @dragleave="onRowDragLeave($event)"
                     @dragend="onRowDragEnd($event)"
                     @drop="onRowDrop($event)"
-                    v-bind="ptm('row')"
+                    v-bind="ptm('bodyRow')"
                     :data-p-selectable-row="selectionMode ? true : false"
                     :data-p-highlight="selection && isSelected(rowData)"
                     :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu(rowData)"
diff --git a/components/lib/datatable/TableFooter.vue b/components/lib/datatable/TableFooter.vue
index 2d7908cd4..850d9b510 100755
--- a/components/lib/datatable/TableFooter.vue
+++ b/components/lib/datatable/TableFooter.vue
@@ -1,14 +1,14 @@
 <template>
-    <tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPTOptions('root') } : ptm('tfoot')" data-pc-section="tfoot">
+    <tfoot v-if="hasFooter" :class="cx('tfoot')" role="rowgroup" v-bind="columnGroup ? { ...ptm('tfoot'), ...getColumnGroupPT('root') } : ptm('tfoot')" data-pc-section="tfoot">
         <tr v-if="!columnGroup" role="row" v-bind="ptm('footerRow')">
             <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                 <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
             </template>
         </tr>
         <template v-else>
-            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="getRowPTOptions(row, 'root')">
+            <tr v-for="(row, i) of getFooterRows()" :key="i" role="row" v-bind="{ ...ptm('footerRow'), ...getRowPT(row, 'root', i) }">
                 <template v-for="(col, j) of getFooterColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
-                    <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :pt="pt" />
+                    <DTFooterCell v-if="!columnProp(col, 'hidden')" :column="col" :index="i" :pt="pt" />
                 </template>
             </tr>
         </template>
@@ -37,26 +37,36 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
-        getColumnGroupPTOptions(key) {
-            return this.ptmo(this.getColumnGroupProps(), key, {
+        getColumnGroupPT(key) {
+            const columnGroupMetaData = {
                 props: this.getColumnGroupProps(),
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    type: 'header'
                 }
-            });
+            };
+
+            return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
         },
         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, {
+        getRowPT(row, key, index) {
+            const rowMetaData = {
                 props: row.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index
                 }
-            });
+            };
+
+            return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
         },
         getRowProp(row) {
             return row.props && row.props.pt ? row.props.pt : undefined; //@todo
diff --git a/components/lib/datatable/TableHeader.vue b/components/lib/datatable/TableHeader.vue
index 11dc7da89..d21b786b9 100755
--- a/components/lib/datatable/TableHeader.vue
+++ b/components/lib/datatable/TableHeader.vue
@@ -1,11 +1,12 @@
 <template>
-    <thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPTOptions('root') } : ptm('thead')" data-pc-section="thead">
+    <thead :class="cx('thead')" role="rowgroup" v-bind="columnGroup ? { ...ptm('thead'), ...getColumnGroupPT('root') } : ptm('thead')" data-pc-section="thead">
         <template v-if="!columnGroup">
             <tr role="row" v-bind="ptm('headerRow')">
                 <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
                     <DTHeaderCell
                         v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field'))"
                         :column="col"
+                        :index="i"
                         @column-click="$emit('column-click', $event)"
                         @column-mousedown="$emit('column-mousedown', $event)"
                         @column-dragstart="$emit('column-dragstart', $event)"
@@ -46,7 +47,7 @@
                         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') }"
+                        v-bind="{ ...getColumnPT(col, 'root', i), ...getColumnPT(col, 'headerCell', i) }"
                     >
                         <DTHeaderCheckbox v-if="columnProp(col, 'selectionMode') === 'multiple'" :checked="allRowsSelected" :disabled="empty" @change="$emit('checkbox-change', $event)" :column="col" :pt="pt" />
                         <DTColumnFilter
@@ -91,7 +92,7 @@
             </tr>
         </template>
         <template v-else>
-            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPTOptions(row, 'root') }">
+            <tr v-for="(row, i) of getHeaderRows()" :key="i" role="row" v-bind="{ ...ptm('headerRow'), ...getRowPT(row, 'root', i) }">
                 <template v-for="(col, j) of getHeaderColumns(row)" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || j">
                     <DTHeaderCell
                         v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || groupRowsBy !== columnProp(col, 'field')) && typeof col.children !== 'string'"
@@ -232,38 +233,53 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
-        getColumnGroupPTOptions(key) {
-            return this.ptmo(this.getColumnGroupProps(), key, {
+        getColumnGroupPT(key) {
+            const columnGroupMetaData = {
                 props: this.getColumnGroupProps(),
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    type: 'header'
                 }
-            });
+            };
+
+            return { ...this.ptm(`columnGroup.${key}`, { columnGroup: columnGroupMetaData }), ...this.ptmo(this.getColumnGroupProps(), key, columnGroupMetaData) };
         },
         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, {
+        getRowPT(row, key, index) {
+            const rowMetaData = {
                 props: row.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index
                 }
-            });
+            };
+
+            return { ...this.ptm(`row.${key}`, { row: rowMetaData }), ...this.ptmo(this.getRowProp(row), key, rowMetaData) };
         },
         getRowProp(row) {
             return row.props && row.props.pt ? row.props.pt : undefined; //@todo
         },
-        getColumnPTOptions(column, key) {
-            return this.ptmo(this.getColumnProp(column), key, {
+        getColumnPT(column, key, index) {
+            const columnMetaData = {
                 props: column.props,
                 parent: {
                     props: this.$props,
                     state: this.$data
+                },
+                context: {
+                    index
                 }
-            });
+            };
+
+            return { ...this.ptm(`column.${key}`, { column: columnMetaData }), ...this.ptmo(this.getColumnProp(column), key, columnMetaData) };
         },
         getColumnProp(column) {
             return column.props && column.props.pt ? column.props.pt : undefined; //@todo
diff --git a/components/lib/row/Row.d.ts b/components/lib/row/Row.d.ts
index 54f830268..93e0b73a1 100755
--- a/components/lib/row/Row.d.ts
+++ b/components/lib/row/Row.d.ts
@@ -16,6 +16,7 @@ export declare type RowPassThroughOptionType = RowPassThroughAttributes | ((opti
 export interface RowPassThroughMethodOptions {
     props: RowProps;
     parent: ColumnGroupPassThroughOptions;
+    context: RowContext;
 }
 
 /**
@@ -47,6 +48,16 @@ export interface RowProps {
     unstyled?: boolean;
 }
 
+/**
+ * Defines current options in Row component.
+ */
+export interface RowContext {
+    /**
+     * Current index of the row.
+     */
+    index: number;
+}
+
 /**
  * Defines valid slots in Row component.
  */