Refactor #4149 - Column & TreeTable

components/lib/column/Column.d.ts

@@ -594,6 +594,21 @@ export interface ColumnContext {
      * @defaultValue false
      */
     disabled: boolean;
+    /**
+     * Current sort state of the column as a boolean.
+     * @defaultValue false
+     */
+    sorted: boolean;
+    /**
+     * Current frozen state of the column as a boolean.
+     * @defaultValue false
+     */
+    frozen: boolean;
+    /**
+     * Current resizable state of the column as a boolean.
+     * @defaultValue false
+     */
+    resizable: boolean;
 }
 
 /**

components/lib/treetable/BodyCell.vue

@@ -113,7 +113,10 @@ export default {
                     state: this.$data
                 },
                 context: {
-                    index: this.index
+                    index: this.index,
+                    selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,
+                    selected: this.$parent.selected,
+                    frozen: this.columnProp('frozen')
                 }
             };
 

components/lib/treetable/FooterCell.vue

@@ -51,7 +51,8 @@ export default {
                     state: this.$data
                 },
                 context: {
-                    index: this.index
+                    index: this.index,
+                    frozen: this.columnProp('frozen')
                 }
             };
 

components/lib/treetable/HeaderCell.vue

@@ -17,7 +17,7 @@
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
         <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" data-pc-section="sorticon" :class="cx('sortIcon')" />
+            <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
         </span>
         <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
@@ -93,7 +93,10 @@ export default {
                     state: this.$data
                 },
                 context: {
-                    index: this.index
+                    index: this.index,
+                    sorted: this.isColumnSorted(),
+                    frozen: this.columnProp('frozen'),
+                    resizable: this.resizableColumns
                 }
             };
 

components/lib/treetable/TreeTable.d.ts

@@ -23,6 +23,7 @@ export interface TreeTablePassThroughMethodOptions {
     instance: any;
     props: TreeTableProps;
     state: TreeTableState;
+    context: TreeTableContext;
 }
 
 /**
@@ -213,14 +214,6 @@ export interface TreeTablePassThroughOptions {
      * Uses to pass attributes to the header row's DOM element.
      */
     headerRow?: TreeTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header filter row's DOM element.
-     */
-    headerFilterRow?: TreeTablePassThroughOptionType;
-    /**
-     * Uses to pass attributes to the header filter cell's DOM element.
-     */
-    headerFilterCell?: TreeTablePassThroughOptionType;
     /**
      * Uses to pass attributes to the tbody's DOM element.
      */
@@ -330,6 +323,31 @@ export interface TreeTableState {
     d_editing: boolean;
 }
 
+/**
+ * Defines current options in TreeTable component.
+ */
+export interface TreeTableContext {
+    /**
+     * Current index state of the item.
+     */
+    index: number;
+    /**
+     * Current frozen state of the row as a boolean.
+     * @defaultValue false
+     */
+    frozen: boolean;
+    /**
+     * Current selectable state of the row as a boolean.
+     * @defaultValue false
+     */
+    selectable: boolean;
+    /**
+     * Current selected state of the row as a boolean.
+     * @defaultValue false
+     */
+    selected: boolean;
+}
+
 /**
  * Defines valid properties in TreeTable component.
  */

components/lib/treetable/TreeTable.vue

@@ -65,9 +65,9 @@
                             ></TTHeaderCell>
                         </template>
                     </tr>
-                    <tr v-if="hasColumnFilter()" v-bind="ptm('headerFilterRow')">
+                    <tr v-if="hasColumnFilter()" 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')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerFilterCell')">
+                            <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="[columnProp(col, 'style'), columnProp(col, 'filterHeaderStyle')]" v-bind="ptm('headerCell', ptHeaderCellOptions(col))">
                                 <component v-if="col.children && col.children.filter" :is="col.children.filter" :column="col" :index="i" />
                             </th>
                         </template>
@@ -231,6 +231,13 @@ export default {
         columnProp(col, prop) {
             return ObjectUtils.getVNodeProp(col, prop);
         },
+        ptHeaderCellOptions(column) {
+            return {
+                context: {
+                    frozen: this.columnProp(column, 'frozen')
+                }
+            };
+        },
         onNodeToggle(node) {
             const key = node.key;
 

components/lib/treetable/TreeTableRow.vue

@@ -14,7 +14,7 @@
         @click="onClick"
         @keydown="onKeyDown"
         @touchend="onTouchEnd"
-        v-bind="ptm('row')"
+        v-bind="ptm('row', ptmOptions)"
         :data-p-highlight="selected"
     >
         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
@@ -413,6 +413,14 @@ export default {
         },
         getAriaSelected() {
             return this.selectionMode === 'single' || this.selectionMode === 'multiple' ? this.selected : null;
+        },
+        ptmOptions() {
+            return {
+                context: {
+                    selectable: this.$parentInstance.rowHover || this.$parentInstance.rowSelectionMode,
+                    selected: this.selected
+                }
+            };
         }
     },
     components: {