From bfb5e58e0df6debb70fed1c1227eaed94bd6b90c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Tue, 2 Feb 2021 16:21:10 +0300
Subject: [PATCH] Fixed #913 - Refactor chain operator

---
 src/components/accordion/Accordion.vue      |  8 ++--
 src/components/datatable/BodyCell.vue       | 37 +++++++-------
 src/components/datatable/DataTable.vue      | 41 ++++++++--------
 src/components/datatable/ScrollableView.vue | 13 +++--
 src/components/datatable/TableBody.vue      | 23 +++++----
 src/components/datatable/TableFooter.vue    | 19 +++++---
 src/components/datatable/TableHeader.vue    | 47 +++++++++---------
 src/components/tabview/TabView.vue          |  8 ++--
 src/components/treetable/TreeTable.vue      | 53 +++++++++++----------
 src/components/treetable/TreeTableRow.vue   | 11 +++--
 10 files changed, 143 insertions(+), 117 deletions(-)

diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index ceaf5e761..52454bc22 100755
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -5,8 +5,8 @@
                 <a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
                     :aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
                     <span :class="getHeaderIcon(i)"></span>
-                    <span class="p-accordion-header-text" v-if="tab.props?.header">{{tab.props?.header}}</span>
-                    <component :is="tab.children.header" v-if="tab.children?.header"></component>
+                    <span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
+                    <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
                 </a>
             </div>
             <transition name="p-toggleable-content">
@@ -81,10 +81,10 @@ export default {
                 return index === this.d_activeIndex;
         },
         getKey(tab, i) {
-            return tab.props?.header ? tab.props.header : i;
+            return (tab.props && tab.props.header) ? tab.props.header : i;
         },
         isTabDisabled(tab) {
-            return tab.props?.disabled;
+            return tab.props && tab.props.disabled;
         },
         getTabClass(i) {
             return ['p-accordion-tab', {'p-accordion-tab-active': this.isTabActive(i)}];
diff --git a/src/components/datatable/BodyCell.vue b/src/components/datatable/BodyCell.vue
index 2f7ec18c8..c5037aaac 100755
--- a/src/components/datatable/BodyCell.vue
+++ b/src/components/datatable/BodyCell.vue
@@ -1,20 +1,20 @@
 <template>
-    <td :style="column.props?.bodyStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown">
+    <td :style="columnProp('bodyStyle')" :class="containerClass" @click="onClick" @keydown="onKeyDown">
         <component :is="column.children.body" :data="rowData" :column="column" :index="index" v-if="column.children && column.children.body && !d_editing" />
         <component :is="column.children.editor" :data="rowData" :column="column" :index="index" v-else-if="column.children && column.children.editor && d_editing" />
-        <template v-else-if="column.props?.selectionMode">
-            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props?.selectionMode === 'single'" />
-            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props?.selectionMode ==='multiple'" />
+        <template v-else-if="columnProp('selectionMode')">
+            <DTRadioButton :value="rowData" :checked="selected" @change="toggleRowWithRadio" v-if="column.props.selectionMode === 'single'" />
+            <DTCheckbox :value="rowData" :checked="selected" @change="toggleRowWithCheckbox" v-else-if="column.props.selectionMode ==='multiple'" />
         </template>
-        <template v-else-if="column.props?.rowReorder">
-            <i :class="['p-datatable-reorderablerow-handle', (column.props?.rowReorderIcon || 'pi pi-bars')]"></i>
+        <template v-else-if="columnProp('rowReorder')">
+            <i :class="['p-datatable-reorderablerow-handle', (columnProp('rowReorderIcon') || 'pi pi-bars')]"></i>
         </template>
-        <template v-else-if="column.props?.expander">
+        <template v-else-if="columnProp('expander')">
             <button class="p-row-toggler p-link" @click="toggleRow" type="button" v-ripple>
                 <span :class="rowTogglerIcon"></span>
             </button>
         </template>
-        <template v-else-if="editMode === 'row' && column.props?.rowEditor">
+        <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <button class="p-row-editor-init p-link" v-if="!d_editing" @click="onRowEditInit" type="button" v-ripple>
                 <span class="p-row-editor-init-icon pi pi-fw pi-pencil"></span>
             </button>
@@ -92,8 +92,11 @@ export default {
         }
     },
     methods: {
+        columnProp(prop) {
+            return this.column.props ? this.column.props[prop] : null;
+        },
         resolveFieldData() {
-            return ObjectUtils.resolveFieldData(this.rowData, this.column.props?.field);
+            return ObjectUtils.resolveFieldData(this.rowData, this.columnProp('field'));
         },
         toggleRow(event) {
             this.$emit('row-toggle', {
@@ -143,7 +146,7 @@ export default {
                 if (!this.d_editing) {
                     this.d_editing = true;
                     this.bindDocumentEditListener();
-                    this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+                    this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
                 }
             }
         },
@@ -151,7 +154,7 @@ export default {
             let completeEvent = {
                 originalEvent: event,
                 data: this.rowData,
-                field: this.column.props?.field,
+                field: this.columnProp('field'),
                 index: this.index,
                 type: type,
                 defaultPrevented: false,
@@ -175,7 +178,7 @@ export default {
 
                     case 27:
                         this.switchCellToViewMode();
-                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+                        this.$emit('cell-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
                     break;
 
                     case 9:
@@ -264,19 +267,19 @@ export default {
             return (DomHandler.find(this.$el, '.p-invalid').length === 0);
         },
         onRowEditInit(event) {
-            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+            this.$emit('row-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
         },
         onRowEditSave(event) {
-            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+            this.$emit('row-edit-save', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
         },
         onRowEditCancel(event) {
-            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.column.props?.field, index: this.index});
+            this.$emit('row-edit-cancel', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
         }
     },
     computed: {
         containerClass() {
-            return [this.column.props?.bodyClass, {
-                'p-selection-column': this.column.props?.selectionMode != null,
+            return [this.columnProp('bodyClass'), {
+                'p-selection-column': this.columnProp('selectionMode') != null,
                 'p-editable-column': this.isEditable(),
                 'p-cell-editing': this.d_editing
             }];
diff --git a/src/components/datatable/DataTable.vue b/src/components/datatable/DataTable.vue
index 663e80d59..d3d74f619 100755
--- a/src/components/datatable/DataTable.vue
+++ b/src/components/datatable/DataTable.vue
@@ -438,7 +438,7 @@ export default {
     mounted() {
         if (this.reorderableColumns) {
             let columnOrder = [];
-            this.columns.forEach(col => columnOrder.push(col.props?.columnKey||col.props?.field));
+            this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
             this.d_columnOrder = columnOrder;
         }
     },
@@ -456,6 +456,9 @@ export default {
         }
     },
     methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        },
         onPage(event) {
             this.d_first = event.first;
             this.d_rows = event.rows;
@@ -472,9 +475,9 @@ export default {
             const event = e.originalEvent;
             const column = e.column;
 
-            if (column.props?.sortable) {
+            if (this.columnProp(column, 'sortable')) {
                 const targetNode = event.target;
-                const columnField = column.props?.sortField || column.props?.field;
+                const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
                 if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@@ -591,13 +594,13 @@ export default {
 
                 for(let j = 0; j < this.columns.length; j++) {
                     let col = this.columns[j];
-                    let columnField = col.props?.filterField || col.props?.field;
+                    let columnField = this.columnProp(col, 'filterField') || this.columnProp(col, 'field');
 
                     //local
                     if (Object.prototype.hasOwnProperty.call(this.filters, columnField)) {
                         let filterValue = this.filters[columnField];
                         let dataFieldValue = ObjectUtils.resolveFieldData(data[i], columnField);
-                        let filterConstraint = col.props?.filterMatchMode === 'custom' ? col.props?.filterFunction : FilterUtils[col.props?.filterMatchMode||'startsWith'];
+                        let filterConstraint = this.columnProp(col, 'filterMatchMode') === 'custom' ? (col.props && col.props.filterFunction) : FilterUtils[this.columnProp(col, 'filterMatchMode')||'startsWith'];
                         if (!filterConstraint(dataFieldValue, filterValue, this.filterLocale)) {
                             localMatch = false;
                         }
@@ -607,7 +610,7 @@ export default {
                         }
                     }
 
-                    if (!col.props?.excludeGlobalFilter && this.hasGlobalFilter() && !globalMatch) {
+                    if (!this.columnProp(col, 'excludeGlobalFilter') && this.hasGlobalFilter() && !globalMatch) {
                         globalMatch = FilterUtils.contains(ObjectUtils.resolveFieldData(data[i], columnField), this.filters['global'], this.filterLocale);
                     }
                 }
@@ -943,13 +946,13 @@ export default {
             for (let i = 0; i < this.columns.length; i++) {
                 let column = this.columns[i];
 
-                if (column.props?.exportable !== false && column.props?.field) {
+                if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
                     if (headerInitiated)
                         csv += this.csvSeparator;
                     else
                         headerInitiated = true;
 
-                    csv += '"' + (column.props?.header || column.props?.field) + '"';
+                    csv += '"' + (this.columnProp(column, 'header') || this.columnProp(column, 'field')) + '"';
                 }
             }
 
@@ -960,19 +963,19 @@ export default {
                     let rowInitiated = false;
                     for (let i = 0; i < this.columns.length; i++) {
                         let column = this.columns[i];
-                        if (column.props?.exportable !== false && column.props?.field) {
+                        if (this.columnProp(column, 'exportable') !== false && this.columnProp(column, 'field')) {
                             if (rowInitiated)
                                 csv += this.csvSeparator;
                             else
                                 rowInitiated = true;
 
-                            let cellData = ObjectUtils.resolveFieldData(record, column.props?.field);
+                            let cellData = ObjectUtils.resolveFieldData(record, this.columnProp(column, 'field'));
 
                             if (cellData != null) {
                                 if (this.exportFunction) {
                                     cellData = this.exportFunction({
                                         data: cellData,
-                                        field: column.props?.field
+                                        field: this.columnProp(column, 'field')
                                     });
                                 }
                                 else
@@ -1140,7 +1143,7 @@ export default {
             const event = e.originalEvent;
             const column = e.column;
 
-            if (this.reorderableColumns && column.props?.reorderableColumn !== false) {
+            if (this.reorderableColumns && this.columnProp(column, 'reorderableColumn') !== false) {
                 if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer'))
                     event.currentTarget.draggable = false;
                 else
@@ -1253,7 +1256,7 @@ export default {
             if (columns && columns.length) {
                 for (let i = 0; i < columns.length; i++) {
                     let column = columns[i];
-                    if (column.props?.columnKey === key || column.props?.field === key) {
+                    if (this.columnProp(column, 'columnKey') === key || this.columnProp(column, 'field') === key) {
                         return column;
                     }
                 }
@@ -1700,7 +1703,7 @@ export default {
             let frozenColumns = [];
 
             for(let col of this.columns) {
-                if(col.props?.frozen) {
+                if(this.columnProp(col, 'frozen')) {
                     frozenColumns = frozenColumns||[];
                     frozenColumns.push(col);
                 }
@@ -1712,7 +1715,7 @@ export default {
             let scrollableColumns = [];
 
             for(let col of this.columns) {
-                if(!col.props?.frozen) {
+                if(!this.columnProp(col, 'frozen')) {
                     scrollableColumns = scrollableColumns||[];
                     scrollableColumns.push(col);
                 }
@@ -1727,7 +1730,7 @@ export default {
             const children = this.getChildren();
             if (children) {
                 for (let child of children) {
-                    if (child.type.name === 'columngroup' && child.props?.type === 'header') {
+                    if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'header') {
                         return child;
                     }
                 }
@@ -1739,7 +1742,7 @@ export default {
             const children = this.getChildren();
             if (children) {
                 for (let child of children) {
-                    if (child.type.name === 'columngroup' && child.props?.type === 'frozenheader') {
+                    if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'frozenheader') {
                         return child;
                     }
                 }
@@ -1751,7 +1754,7 @@ export default {
             const children = this.getChildren();
             if (children) {
                 for (let child of children) {
-                    if (child.type.name === 'columngroup' && child.props?.type === 'footer') {
+                    if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'footer') {
                         return child;
                     }
                 }
@@ -1763,7 +1766,7 @@ export default {
            const children = this.getChildren();
             if (children) {
                 for (let child of children) {
-                    if (child.type.name === 'columngroup' && child.props?.type === 'frozenfooter') {
+                    if (child.type.name === 'columngroup' && this.columnProp(child, 'type') === 'frozenfooter') {
                         return child;
                     }
                 }
diff --git a/src/components/datatable/ScrollableView.vue b/src/components/datatable/ScrollableView.vue
index a37f14c49..dec4a46d5 100755
--- a/src/components/datatable/ScrollableView.vue
+++ b/src/components/datatable/ScrollableView.vue
@@ -5,7 +5,7 @@
                 <table class="p-datatable-scrollable-header-table">
                     <colgroup>
                         <template v-for="(col,i) of columns">
-                            <col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" />
+                            <col v-if="shouldRenderCol(col)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'headerStyle')" />
                         </template>
                     </colgroup>
                     <slot name="header" :columns="columns" :columnGroup="headerColumnGroup"></slot>
@@ -17,14 +17,14 @@
             <table ref="scrollTable" :class="bodyTableClass" :style="bodyTableStyle">
                 <colgroup>
                     <template v-for="(col,i) of columns">
-                        <col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle || col.props?.headerStyle" />
+                        <col v-if="shouldRenderCol(col)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'bodyStyle') || columnProp(col,'headerStyle')" />
                     </template>
                 </colgroup>
                 <slot name="body" :columns="columns"></slot>
             </table>
             <table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll">
                 <colgroup>
-                    <col v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle || col.props?.headerStyle" />
+                    <col v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'bodyStyle') || columnProp(col,'headerStyle')" />
                 </colgroup>
                 <DTTableLoadingBody :columns="columns" :rows="rows" />
             </table>
@@ -35,7 +35,7 @@
                 <table class="p-datatable-scrollable-footer-table">
                     <colgroup>
                         <template v-for="(col,i) of columns">
-                            <col v-if="shouldRenderCol(col)" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle || col.props?.headerStyle" />
+                            <col v-if="shouldRenderCol(col)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :style="columnProp(col,'footerStyle') || columnProp(col,'headerStyle')" />
                         </template>
                     </colgroup>
                     <slot name="footer" :columns="columns" :columnGroup="footerColumnGroup"></slot>
@@ -126,6 +126,9 @@ export default {
         }
     },
     methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        },
         onHeaderScroll() {
             this.$refs.scrollHeader.scrollLeft = 0;
         },
@@ -184,7 +187,7 @@ export default {
         },
         shouldRenderCol(column) {
             if (this.rowGroupMode && this.rowGroupMode === 'subheader') {
-                return this.groupRowsBy !== column.props?.field;
+                return this.groupRowsBy !== this.columnProp(column, 'field');
             }
 
             return true;
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index c30325807..61162b80a 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -15,8 +15,8 @@
                     @click="onRowClick($event, rowData, index)" @contextmenu="onRowRightClick($event, rowData, index)" @touchend="onRowTouchEnd($event)" @keydown="onRowKeyDown($event, rowData, index)" :tabindex="selectionMode || contextMenu ? '0' : null"
                     @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                     <template v-for="(col,i) of columns">
-                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.props?.columnKey||col.props?.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
-                            :rowTogglerIcon="col.props?.expander ? rowTogglerIcon(rowData): null"
+                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
+                            :rowTogglerIcon="columnProp(col,'expanded') ? rowTogglerIcon(rowData): null"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
                             :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
                             @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
@@ -151,6 +151,9 @@ export default {
         }
     },
     methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        },
         shouldRenderRowGroupHeader(value, rowData, i) {
             let currentRowFieldData = ObjectUtils.resolveFieldData(rowData, this.groupRowsBy);
             let prevRowData = value[i - 1];
@@ -212,14 +215,14 @@ export default {
         shouldRenderBodyCell(value, column, i) {
             if (this.rowGroupMode) {
                 if (this.rowGroupMode === 'subheader') {
-                    return this.groupRowsBy !== column.props?.field;
+                    return this.groupRowsBy !== this.columnProp(column, 'field');
                 }
                 else if (this.rowGroupMode === 'rowspan') {
                     if (this.isGrouped(column)) {
                         let prevRowData = value[i - 1];
                         if (prevRowData) {
-                            let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], column.props?.field);
-                            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, column.props?.field);
+                            let currentRowFieldData = ObjectUtils.resolveFieldData(value[i], this.columnProp(column, 'field'));
+                            let previousRowFieldData = ObjectUtils.resolveFieldData(prevRowData, this.columnProp(column, 'field'));
                             return currentRowFieldData !== previousRowFieldData;
                         }
                         else {
@@ -237,7 +240,7 @@ export default {
         },
         calculateRowGroupSize(value, column, index) {
             if (this.isGrouped(column)) {
-                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], column.props?.field);
+                let currentRowFieldData = ObjectUtils.resolveFieldData(value[index], this.columnProp(column, 'field'));
                 let nextRowFieldData = currentRowFieldData;
                 let groupRowSpan = 0;
 
@@ -245,7 +248,7 @@ export default {
                     groupRowSpan++;
                     let nextRowData = value[++index];
                     if (nextRowData) {
-                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, column.props?.field);
+                        nextRowFieldData = ObjectUtils.resolveFieldData(nextRowData, this.columnProp(column, 'field'));
                     }
                     else {
                         break;
@@ -267,11 +270,11 @@ export default {
             return ['p-row-toggler-icon pi', icon];
         },
         isGrouped(column) {
-            if (this.groupRowsBy) {
+            if (this.groupRowsBy && this.columnProp(column, 'field')) {
                 if (Array.isArray(this.groupRowsBy))
-                    return this.groupRowsBy.indexOf(column.props?.field) > -1;
+                    return this.groupRowsBy.indexOf(column.props.field) > -1;
                 else
-                    return this.groupRowsBy === column.props?.field;
+                    return this.groupRowsBy === column.props.field;
             }
             else {
                 return false;
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
index 2ca780f7f..4f5c19387 100755
--- a/src/components/datatable/TableFooter.vue
+++ b/src/components/datatable/TableFooter.vue
@@ -1,18 +1,18 @@
 <template>
     <tfoot class="p-datatable-tfoot" v-if="hasFooter">
         <tr v-if="!columnGroup">
-            <td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass"
-                :colspan="col.props?.colspan" :rowspan="col.props?.rowspan">
+            <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')"
+                :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')">
                 <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
-                {{col.props?.footer}}
+                {{columnProp(col, 'footer')}}
             </td>
         </tr>
         <template v-else>
             <tr v-for="(row,i) of columnGroup.children.default()" :key="i">
-                <td v-for="(col,i) of row.children.default()" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass"
-                    :colspan="col.props?.colspan" :rowspan="col.props?.rowspan">
+                <td v-for="(col,i) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')"
+                    :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')">
                     <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer"/>
-                    {{col.props?.footer}}
+                    {{columnProp(col, 'footer')}}
                 </td>
             </tr>
         </template>
@@ -31,6 +31,11 @@ export default {
             default: null
         },
     },
+    methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        }
+    },
     computed: {
         hasFooter() {
             let hasFooter = false;
@@ -40,7 +45,7 @@ export default {
             }
             else if (this.columns) {
                 for (let col of this.columns) {
-                    if (col.props?.footer || (col.children && col.children.footer)) {
+                    if (this.columnProp(col, 'footer') || (col.children && col.children.footer)) {
                         hasFooter = true;
                         break;
                     }
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index fd638165a..e51c34efb 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -3,41 +3,41 @@
         <template v-if="!columnGroup">
             <tr>
                 <template v-for="(col,i) of columns">
-                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props?.field)" :tabindex="col.props?.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
-                        :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)"
+                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :tabindex="columnProp(col, 'sortable') ? '0' : null" @keydown="onColumnKeyDown($event, col)"
+                        :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)"
                         @click="onColumnHeaderClick($event, col)" @mousedown="onColumnHeaderMouseDown($event, col)"
                         @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
-                        :colspan="col.props?.colspan" :rowspan="col.props?.rowspan" :aria-sort="getAriaSort(col)">
+                        :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
                         <span class="p-column-resizer" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
                         <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
-                        <span class="p-column-title" v-if="col.props?.header">{{col.props?.header}}</span>
-                        <span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span>
+                        <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
+                        <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
                         <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
-                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple' && !hasColumnFilter()" />
+                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple' && !hasColumnFilter()" />
                     </th>
                 </template>
             </tr>
             <tr v-if="hasColumnFilter()">
                 <template v-for="(col,i) of columns">
-                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.props?.field)" :key="col.props?.columnKey||col.props?.field||i"
-                        :class="getFilterColumnHeaderClass(col)" :style="col.props?.filterHeaderStyle">
+                    <th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"
+                        :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
                         <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
-                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple'" />
+                        <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode')==='multiple'" />
                     </th>
                 </template>
             </tr>
         </template>
         <template v-else>
             <tr v-for="(row,i) of columnGroup.children.default()" :key="i">
-                <th v-for="(col,i) of row.children.default()" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.props?.sortable ? '0' : null"
+                <th v-for="(col,i) of row.children.default()" :key="columnProp(col, 'columnKeuy')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" :tabindex="columnProp(col, 'sortable') ? '0' : null"
                     @click="onColumnHeaderClick($event, col)" @keydown="onColumnKeyDown($event, col)" @dragstart="onColumnHeaderDragStart($event)" @dragover="onColumnHeaderDragOver($event)" @dragleave="onColumnHeaderDragLeave($event)" @drop="onColumnHeaderDrop($event)"
-                    :colspan="col.props?.colspan" :rowspan="col.props?.rowspan" :aria-sort="getAriaSort(col)">
+                    :colspan="columnProp(col, 'colspan')" :rowspan="columnProp(col, 'rowspan')" :aria-sort="getAriaSort(col)">
                    <component :is="col.children.header" :column="col" v-if="col.children && col.children.header"/>
-                    <span class="p-column-title" v-if="col.props?.header">{{col.props?.header}}</span>
-                    <span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span>
+                    <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
+                    <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
                     <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                     <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
-                    <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.props?.selectionMode ==='multiple'" />
+                    <DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple'" />
                 </th>
             </tr>
         </template>
@@ -98,28 +98,31 @@ export default {
         }
     },
     methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        },
         isMultiSorted(column) {
-            return column.props?.sortable && this.getMultiSortMetaIndex(column) > -1
+            return this.columnProp(column, 'sortable') && this.getMultiSortMetaIndex(column) > -1
         },
         isColumnSorted(column) {
-            return this.sortMode === 'single' ? (this.sortField && (this.sortField === column.props?.field || this.sortField === column.props?.sortField)) : this.isMultiSorted(column);
+            return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp(column, 'field') || this.sortField === this.columnProp(column, 'sortField'))) : this.isMultiSorted(column);
         },
         getColumnHeaderClass(column) {
-            return [column.props?.headerClass,
-                    {'p-sortable-column': column.props?.sortable},
+            return [this.columnProp(column, 'headerClass'),
+                    {'p-sortable-column': this.columnProp(column, 'sortable')},
                     {'p-resizable-column': this.resizableColumns},
                     {'p-highlight': this.isColumnSorted(column)}
             ];
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', column.props?.filterHeaderClass];
+            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass')];
         },
         getSortableColumnIcon(column) {
             let sorted = false;
             let sortOrder = null;
 
             if (this.sortMode === 'single') {
-                sorted = this.sortField && (this.sortField === column.props?.field || this.sortField === column.props?.sortField);
+                sorted = this.sortField && (this.sortField === this.columnProp(column, 'field') || this.sortField === this.columnProp(column, 'sortField'));
                 sortOrder = sorted ? this.sortOrder: 0;
             }
             else if (this.sortMode === 'multiple') {
@@ -143,7 +146,7 @@ export default {
 
             for (let i = 0; i < this.multiSortMeta.length; i++) {
                 let meta = this.multiSortMeta[i];
-                if (meta.field === column.props?.field || meta.field === column.props?.sortField) {
+                if (meta.field === this.columnProp(column, 'field') || meta.field === this.columnProp(column, 'sortField')) {
                     index = i;
                     break;
                 }
@@ -181,7 +184,7 @@ export default {
             }
         },
         getAriaSort(column) {
-            if (column.props?.sortable) {
+            if (this.columnProp(column, 'sortable')) {
                 const sortIcon = this.getSortableColumnIcon(column);
                 if (sortIcon[1]['pi-sort-amount-down'])
                     return 'descending';
diff --git a/src/components/tabview/TabView.vue b/src/components/tabview/TabView.vue
index 66d2ea581..b838b8c8b 100755
--- a/src/components/tabview/TabView.vue
+++ b/src/components/tabview/TabView.vue
@@ -3,8 +3,8 @@
         <ul ref="nav" class="p-tabview-nav" role="tablist">
             <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab,i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
                 <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex === i" v-ripple>
-                    <span class="p-tabview-title" v-if="tab.props?.header">{{tab.props?.header}}</span>
-                    <component :is="tab.children.header" v-if="tab.children?.header"></component>
+                    <span class="p-tabview-title" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
+                    <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
                 </a>
             </li>
             <li ref="inkbar" class="p-tabview-ink-bar"></li>
@@ -68,10 +68,10 @@ export default {
             this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
         },
         getKey(tab, i) {
-            return tab.props?.header ? tab.props.header : i;
+            return (tab.props && tab.props.header) ? tab.props.header : i;
         },
         isTabDisabled(tab) {
-            return tab.props?.disabled;
+            return (tab.props && tab.props.disabled);
         },
         isTabPanel(child) {
             return child.type.name === 'tabpanel'
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index fc0fbf9b7..0f68fd1f1 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -21,26 +21,26 @@
             <table ref="table">
                 <thead class="p-treetable-thead">
                     <tr>
-                        <th v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
-                            :tabindex="col.props?.sortable ? '0' : null"  :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
+                        <th v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
+                            :tabindex="columnProp(col, 'sortable') ? '0' : null"  :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
                             <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
                             <component :is="col.children?.header" :column="col" />
-                            <span class="p-column-title" v-if="col.props?.header">{{col.props?.header}}</span>
-                            <span v-if="col.props?.sortable" :class="getSortableColumnIcon(col)"></span>
+                            <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
+                            <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
                             <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
                         </th>
                     </tr>
                     <tr v-if="hasColumnFilter()">
-                        <th  v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :class="getFilterColumnHeaderClass(col)" :style="col.props?.filterHeaderStyle">
+                        <th  v-for="(col,i) of columns" :key="columnProp(col, 'columnKeuy')||columnProp(col, 'field')||i" :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
                             <component :is="col.children?.filter" :column="col" v-if="col.children?.filter"/>
                         </th>
                     </tr>
                 </thead>
                 <tfoot class="p-treetable-tfoot" v-if="hasFooter">
                     <tr>
-                        <td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.footerStyle" :class="col.props?.footerClass">
+                        <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')">
                             <component :is="col.children?.footer" :column="col" />
-                            {{col.props?.footer}}
+                            {{columnProp(col, 'footer')}}
                         </td>
                     </tr>
                 </tfoot>
@@ -249,6 +249,9 @@ export default {
         }
     },
     methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        },
         onNodeToggle(node) {
             const key = node.key;
 
@@ -368,31 +371,31 @@ export default {
             this.$emit('update:first', this.d_first);
         },
         isMultiSorted(column) {
-            return column.props?.sortable && this.getMultiSortMetaIndex(column) > -1
+            return this.columnProp(column, 'sortable') && this.getMultiSortMetaIndex(column) > -1
         },
         isColumnSorted(column) {
-            if (column.props?.sortable) {
-                return this.sortMode === 'single' ? (this.d_sortField === (column.props?.field || column.props?.sortField)) : this.getMultiSortMetaIndex(column) > -1;
+            if (this.columnProp(column, 'sortable')) {
+                return this.sortMode === 'single' ? (this.d_sortField === (this.columnProp(column, 'field') || this.columnProp(column, 'sortField'))) : this.getMultiSortMetaIndex(column) > -1;
             }
 
             return false;
         },
         getColumnHeaderClass(column) {
-            return [column.props?.headerClass,
-                    {'p-sortable-column': column.props?.sortable},
+            return [this.columnProp(column, 'headerClass'),
+                    {'p-sortable-column': this.columnProp(column, 'sortable')},
                     {'p-resizable-column': this.resizableColumns},
                     {'p-highlight': this.isColumnSorted(column)}
             ];
         },
         getFilterColumnHeaderClass(column) {
-            return ['p-filter-column', column.props?.filterHeaderClass];
+            return ['p-filter-column', this.columnProp(column, 'filterHeaderClass')];
         },
         getSortableColumnIcon(column) {
             let sorted = false;
             let sortOrder = null;
 
             if (this.sortMode === 'single') {
-                sorted =  this.d_sortField === (column.props?.field || column.props?.sortField);
+                sorted =  this.d_sortField === (this.columnProp(column, 'field')|| this.columnProp(column, 'sortField'));
                 sortOrder = sorted ? this.d_sortOrder: 0;
             }
             else if (this.sortMode === 'multiple') {
@@ -416,7 +419,7 @@ export default {
 
             for (let i = 0; i < this.d_multiSortMeta.length; i++) {
                 let meta = this.d_multiSortMeta[i];
-                if (meta.field === (column.props?.field || column.props?.sortField)) {
+                if (meta.field === (this.columnProp(column, 'field')|| this.columnProp(column, 'sortField'))) {
                     index = i;
                     break;
                 }
@@ -425,9 +428,9 @@ export default {
             return index;
         },
         onColumnHeaderClick(event, column) {
-            if (column.props?.sortable) {
+            if (this.columnProp(column, 'sortable')) {
                 const targetNode = event.target;
-                const columnField = column.props?.sortField || column.props?.field;
+                const columnField = this.columnProp(column, 'sortField') || this.columnProp(column, 'field');
 
                 if (DomHandler.hasClass(targetNode, 'p-sortable-column') || DomHandler.hasClass(targetNode, 'p-column-title')
                     || DomHandler.hasClass(targetNode, 'p-sortable-column-icon') || DomHandler.hasClass(targetNode.parentElement, 'p-sortable-column-icon')) {
@@ -555,12 +558,12 @@ export default {
 
                 for (let j = 0; j < this.columns.length; j++) {
                     let col = this.columns[j];
-                    let filterField = col.props?.field;
+                    let filterField = this.columnProp(column, 'field');
 
                     //local
-                    if (Object.prototype.hasOwnProperty.call(this.filters, col.props?.field)) {
-                        let filterMatchMode = col.props?.filterMatchMode || 'startsWith';
-                        let filterValue = this.filters[col.props?.field];
+                    if (Object.prototype.hasOwnProperty.call(this.filters, this.columnProp(column, 'field'))) {
+                        let filterMatchMode = this.columnProp(column, 'filterMatchMode') || 'startsWith';
+                        let filterValue = this.filters[this.columnProp(column, 'field')];
                         let filterConstraint = FilterUtils[filterMatchMode];
                         let paramsWithoutNode = {filterField, filterValue, filterConstraint, strict};
 
@@ -649,8 +652,8 @@ export default {
             if (this.hasFilters()) {
                 filterMatchModes = {};
                 this.columns.forEach(col => {
-                    if (col.props?.field) {
-                        filterMatchModes[col.props?.field] = col.props?.filterMatchMode;
+                    if (this.columnProp(column, 'field')) {
+                        filterMatchModes[col.props.field] = this.columnProp(column, 'filterMatchMode');
                     }
                 });
             }
@@ -754,7 +757,7 @@ export default {
             }
         },
         getAriaSort(column) {
-            if (column.props?.sortable) {
+            if (this.columnProp(column, 'sortable')) {
                 const sortIcon = this.getSortableColumnIcon(column);
                 if (sortIcon[1]['pi-sort-amount-down'])
                     return 'descending';
@@ -855,7 +858,7 @@ export default {
             let hasFooter = false;
 
             for (let col of this.columns) {
-                if (col.props?.footer || col.children?.footer) {
+                if (this.columnProp(column, 'footer')|| col.children?.footer) {
                     hasFooter = true;
                     break;
                 }
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index 8746c9866..b17fe9ab7 100755
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -1,10 +1,10 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
-        <td v-for="(col,i) of columns" :key="col.props?.columnKey||col.props?.field||i" :style="col.props?.bodyStyle" :class="col.props?.bodyClass">
-            <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="col.props?.expander" :style="togglerStyle" tabindex="-1" v-ripple>
+        <td v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i" :style="columnProp(col, 'bodyStyle')" :class="columnProp(col, 'bodyClass')">
+            <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp(col, 'expander')" :style="togglerStyle" tabindex="-1" v-ripple>
                 <i :class="togglerIcon"></i>
             </button>
-            <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && col.props?.expander" role="checkbox" :aria-checked="checked">
+            <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp(col, 'expander')" role="checkbox" :aria-checked="checked">
                 <div class="p-hidden-accessible">
                     <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
                 </div>
@@ -13,7 +13,7 @@
                 </div>
             </div>
             <component :is="col.children?.body" :node="node" :column="col" v-if="col.children?.body" />
-            <template v-else><span>{{resolveFieldData(node.data, col.props?.field)}}</span></template>
+            <template v-else><span>{{resolveFieldData(node.data, columnProp(col, 'field'))}}</span></template>
         </td>
     </tr>
     <template v-if="expanded && node.children && node.children.length">
@@ -72,6 +72,9 @@ export default {
     },
     nodeTouched: false,
     methods: {
+        columnProp(col, prop) {
+            return col.props ? col.props[prop] : null;
+        },
         resolveFieldData(rowData, field) {
             return ObjectUtils.resolveFieldData(rowData, field);
         },