Fixed #956 - Possibility to define column visibility

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 = [

src/components/column/Column.d.ts

@@ -40,6 +40,7 @@ interface ColumnProps {
     alignFrozen?: string;
     exportable?: boolean;
     filterMatchMode?: string;
+    hidden?: boolean;
 }
 
 declare class Column {

src/components/column/Column.vue

@@ -165,6 +165,10 @@ export default {
         filterMatchMode: {
             type: String,
             default: null
+        },
+        hidden: {
+            type: Boolean,
+            default: false
         }
     },
     render() {

src/components/datatable/TableBody.vue

@@ -271,7 +271,7 @@ export default {
                 }
             }
             else {
-                return true;
+                return !this.columnProp(column, 'hidden');
             }
         },
         calculateRowGroupSize(value, column, index) {

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>

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)"

src/components/treetable/TreeTable.vue

@@ -21,7 +21,8 @@
             <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)"
+                        <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" />
@@ -29,19 +30,24 @@
                                 <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')">
+                        <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')">
+                        <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">

src/components/treetable/TreeTableRow.vue

@@ -1,6 +1,7 @@
 <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')">
+        <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>
@@ -15,6 +16,7 @@
                 <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"

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>

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>