From cfa4b06c036790ef6ceb004fe3d966275a1bb71e Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 14 May 2021 15:30:49 +0300
Subject: [PATCH] Fixed #956 - Possibility to define column visibility

---
 api-generator/components/column.js        |  7 +++++
 src/components/column/Column.d.ts         |  1 +
 src/components/column/Column.vue          |  4 +++
 src/components/datatable/TableBody.vue    |  4 +--
 src/components/datatable/TableFooter.vue  |  4 +--
 src/components/datatable/TableHeader.vue  |  6 ++--
 src/components/treetable/TreeTable.vue    | 36 +++++++++++++----------
 src/components/treetable/TreeTableRow.vue | 30 ++++++++++---------
 src/views/datatable/DataTableDoc.vue      |  6 ++++
 src/views/treetable/TreeTableDoc.vue      |  6 ++++
 10 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/api-generator/components/column.js b/api-generator/components/column.js
index 6c7775830..8df610148 100644
--- a/api-generator/components/column.js
+++ b/api-generator/components/column.js
@@ -232,7 +232,14 @@ const ColumnProps = [
         type: "boolean",
         default: "true",
         description: "Whether the column is included in data export."
+    },
+    {
+        name: "hidden",
+        type: "boolean",
+        default: "false",
+        description: "Whether the column is rendered."
     }
+
 ];
 
 const ColumnSlots = [
diff --git a/src/components/column/Column.d.ts b/src/components/column/Column.d.ts
index 5831a2fa2..be3b315ed 100755
--- a/src/components/column/Column.d.ts
+++ b/src/components/column/Column.d.ts
@@ -40,6 +40,7 @@ interface ColumnProps {
     alignFrozen?: string;
     exportable?: boolean;
     filterMatchMode?: string;
+    hidden?: boolean;
 }
 
 declare class Column {
diff --git a/src/components/column/Column.vue b/src/components/column/Column.vue
index b4c6548b2..b557e8522 100755
--- a/src/components/column/Column.vue
+++ b/src/components/column/Column.vue
@@ -165,6 +165,10 @@ export default {
         filterMatchMode: {
             type: String,
             default: null
+        },
+        hidden: {
+            type: Boolean,
+            default: false
         }
     },
     render() {
diff --git a/src/components/datatable/TableBody.vue b/src/components/datatable/TableBody.vue
index 792b363fd..0c7c1d739 100755
--- a/src/components/datatable/TableBody.vue
+++ b/src/components/datatable/TableBody.vue
@@ -15,7 +15,7 @@
                     @click="onRowClick($event, rowData, index)" @dblclick="onRowDblClick($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)" role="row">
                     <template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i">
-                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)"  :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
+                        <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
                             :rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
                             :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
@@ -271,7 +271,7 @@ export default {
                 }
             }
             else {
-                return true;
+                return !this.columnProp(column, 'hidden');
             }
         },
         calculateRowGroupSize(value, column, index) {
diff --git a/src/components/datatable/TableFooter.vue b/src/components/datatable/TableFooter.vue
index 192302b18..0e993c4ce 100755
--- a/src/components/datatable/TableFooter.vue
+++ b/src/components/datatable/TableFooter.vue
@@ -2,13 +2,13 @@
     <tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup">
         <tr v-if="!columnGroup" role="row">
             <template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" >
-                <DTFooterCell :column="col" />
+                <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
             </template>
         </tr>
         <template v-else>
             <tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row">
                 <template v-for="(col,j) of row.children.default()" :key="columnProp(col,'columnKey')||columnProp(col,'field')||j">
-                    <DTFooterCell :column="col" />
+                    <DTFooterCell :column="col" v-if="!columnProp(col,'hidden')"/>
                 </template>
             </tr>
         </template>
diff --git a/src/components/datatable/TableHeader.vue b/src/components/datatable/TableHeader.vue
index cb8b7c130..e3de5f5f0 100755
--- a/src/components/datatable/TableHeader.vue
+++ b/src/components/datatable/TableHeader.vue
@@ -3,7 +3,7 @@
         <template v-if="!columnGroup">
             <tr role="row">
                 <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"
+                    <DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))" :column="col"
                     @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
                     @column-dragstart="$emit('column-dragstart', $event)" @column-dragover="$emit('column-dragover', $event)" @column-dragleave="$emit('column-dragleave', $event)" @column-drop="$emit('column-drop', $event)"
                     :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
@@ -16,7 +16,7 @@
             </tr>
             <tr v-if="filterDisplay === 'row'" role="row">
                 <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
-                    <th :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)">
+                    <th :style="getFilterColumnHeaderStyle(col)" :class="getFilterColumnHeaderClass(col)" v-if="!columnProp(col, 'hidden')">
                         <DTHeaderCheckbox :checked="allRowsSelected" @change="$emit('checkbox-change', $event)" :disabled="empty" v-if="columnProp(col, 'selectionMode') ==='multiple'" />
                         <DTColumnFilter v-if="col.children && col.children.filter" :field="columnProp(col,'filterField')||columnProp(col,'field')" :type="columnProp(col,'dataType')" display="row"
                         :showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter"
@@ -34,7 +34,7 @@
         <template v-else>
             <tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row">
                 <template v-for="(col,j) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||j">
-                    <DTHeaderCell v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))" :column="col"
+                    <DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field')))" :column="col"
                     @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
                     :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
                     :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 66e2aadd7..cf2e89355 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -21,27 +21,33 @@
             <table ref="table">
                 <thead class="p-treetable-thead">
                     <tr>
-                        <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" v-if="col.children && col.children.header" />
-                            <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>
+                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
+                            <th v-if="!columnProp(col, 'hidden')" :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" v-if="col.children && col.children.header" />
+                                <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>
+                        </template>
                     </tr>
                     <tr v-if="hasColumnFilter()">
-                        <th  v-for="(col,i) of columns" :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"/>
-                        </th>
+                        <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, 'filterHeaderStyle')">
+                                <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
+                            </th>
+                        </template>
                     </tr>
                 </thead>
                 <tfoot class="p-treetable-tfoot" v-if="hasFooter">
                     <tr>
-                        <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" v-if="col.children && col.children.footer" />
-                            {{columnProp(col, 'footer')}}
-                        </td>
+                        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
+                            <td v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')">
+                                <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer" />
+                                {{columnProp(col, 'footer')}}
+                            </td>
+                        </template>
                     </tr>
                 </tfoot>
                 <tbody class="p-treetable-tbody">
diff --git a/src/components/treetable/TreeTableRow.vue b/src/components/treetable/TreeTableRow.vue
index 9824f82e2..cad7d1a47 100755
--- a/src/components/treetable/TreeTableRow.vue
+++ b/src/components/treetable/TreeTableRow.vue
@@ -1,20 +1,22 @@
 <template>
     <tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0">
-        <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 && columnProp(col, 'expander')" role="checkbox" :aria-checked="checked">
-                <div class="p-hidden-accessible">
-                    <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
+        <template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i">
+            <td v-if="!columnProp(col, 'hidden')" :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 && columnProp(col, 'expander')" role="checkbox" :aria-checked="checked">
+                    <div class="p-hidden-accessible">
+                        <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" />
+                    </div>
+                    <div ref="checkboxEl" :class="checkboxClass">
+                        <span :class="checkboxIcon"></span>
+                    </div>
                 </div>
-                <div ref="checkboxEl" :class="checkboxClass">
-                    <span :class="checkboxIcon"></span>
-                </div>
-            </div>
-            <component :is="col.children.body" :node="node" :column="col" v-if="col.children && col.children.body" />
-            <template v-else><span>{{resolveFieldData(node.data, columnProp(col, 'field'))}}</span></template>
-        </td>
+                <component :is="col.children.body" :node="node" :column="col" v-if="col.children && col.children.body" />
+                <template v-else><span>{{resolveFieldData(node.data, columnProp(col, 'field'))}}</span></template>
+            </td>
+        </template>
     </tr>
     <template v-if="expanded && node.children && node.children.length">
         <TreeTableRow v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node"  :level="level + 1"
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 0550ca1b3..c895fbd72 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -372,6 +372,12 @@ export default {
                             <td>null</td>
                             <td>Defines the filtering algorithm to use when searching the options.</td>
                         </tr>
+                        <tr>
+                            <td>hidden</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether the column is rendered.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>
diff --git a/src/views/treetable/TreeTableDoc.vue b/src/views/treetable/TreeTableDoc.vue
index 4a01266d9..001b8d905 100755
--- a/src/views/treetable/TreeTableDoc.vue
+++ b/src/views/treetable/TreeTableDoc.vue
@@ -618,6 +618,12 @@ export default {
                         <td>false</td>
                         <td>Whether to exclude from global filtering or not.</td>
                     </tr>
+                    <tr>
+                        <td>hidden</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the column is rendered.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>