vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #956 - Possibility to define column visibility

pull/1196/head^2
Cagatay Civici 2021-05-14 15:30:49 +03:00
parent feb3187d68
commit cfa4b06c03
10 changed files with 68 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
api-generator/components/column.js
View File

@ -232,7 +232,14 @@ const ColumnProps = [
type: "boolean", type: "boolean",
default: "true", default: "true",
description: "Whether the column is included in data export." description: "Whether the column is included in data export."
},
{
name: "hidden",
type: "boolean",
default: "false",
description: "Whether the column is rendered."
} }
]; ];
const ColumnSlots = [ const ColumnSlots = [

1
src/components/column/Column.d.ts vendored
View File

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

4
src/components/column/Column.vue
View File

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

4
src/components/datatable/TableBody.vue
View File

@ -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" @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"> @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"> <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" :rowTogglerIcon="columnProp(col,'expander') ? rowTogglerIcon(rowData): null" :frozenRow="frozenRow"
:rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null" :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
:editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout" :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)" :responsiveLayout="responsiveLayout"
@ -271,7 +271,7 @@ export default {
} }
} }
else { else {
return true; return !this.columnProp(column, 'hidden');
} }
}, },
calculateRowGroupSize(value, column, index) { calculateRowGroupSize(value, column, index) {

4
src/components/datatable/TableFooter.vue
View File

@ -2,13 +2,13 @@
<tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup"> <tfoot class="p-datatable-tfoot" v-if="hasFooter" role="rowgroup">
<tr v-if="!columnGroup" role="row"> <tr v-if="!columnGroup" role="row">
<template v-for="(col,i) of columns" :key="columnProp(col,'columnKey')||columnProp(col,'field')||i" > <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> </template>
</tr> </tr>
<template v-else> <template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row"> <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"> <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> </template>
</tr> </tr>
</template> </template>

6
src/components/datatable/TableHeader.vue
View File

@ -3,7 +3,7 @@
<template v-if="!columnGroup"> <template v-if="!columnGroup">
<tr role="row"> <tr role="row">
<template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"> <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-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)" @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)" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
@ -16,7 +16,7 @@
</tr> </tr>
<tr v-if="filterDisplay === 'row'" role="row"> <tr v-if="filterDisplay === 'row'" role="row">
<template v-for="(col,i) of columns" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||i"> <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'" /> <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" <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" :showMenu="columnProp(col,'showFilterMenu')" :filterElement="col.children && col.children.filter"
@ -34,7 +34,7 @@
<template v-else> <template v-else>
<tr v-for="(row,i) of columnGroup.children.default()" :key="i" role="row"> <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"> <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)" @column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
:sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta" :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)" :allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"

36
src/components/treetable/TreeTable.vue
View File

@ -21,27 +21,33 @@
<table ref="table"> <table ref="table">
<thead class="p-treetable-thead"> <thead class="p-treetable-thead">
<tr> <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">
:tabindex="columnProp(col, 'sortable') ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)"> <th v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'headerStyle')" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"
<span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span> :tabindex="columnProp(col, 'sortable') ? '0' : null" :aria-sort="getAriaSort(col)" @keydown="onColumnKeyDown($event, col)">
<component :is="col.children.header" :column="col" v-if="col.children && col.children.header" /> <span class="p-column-resizer" @mousedown="onColumnResizeStart" v-if="resizableColumns"></span>
<span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span> <component :is="col.children.header" :column="col" v-if="col.children && col.children.header" />
<span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span> <span class="p-column-title" v-if="columnProp(col, 'header')">{{columnProp(col, 'header')}}</span>
<span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span> <span v-if="columnProp(col, 'sortable')" :class="getSortableColumnIcon(col)"></span>
</th> <span v-if="isMultiSorted(col)" class="p-sortable-column-badge">{{getMultiSortMetaIndex(col) + 1}}</span>
</th>
</template>
</tr> </tr>
<tr v-if="hasColumnFilter()"> <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">
<component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/> <th v-if="!columnProp(col, 'hidden')" :class="getFilterColumnHeaderClass(col)" :style="columnProp(col, 'filterHeaderStyle')">
</th> <component :is="col.children.filter" :column="col" v-if="col.children && col.children.filter"/>
</th>
</template>
</tr> </tr>
</thead> </thead>
<tfoot class="p-treetable-tfoot" v-if="hasFooter"> <tfoot class="p-treetable-tfoot" v-if="hasFooter">
<tr> <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">
<component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer" /> <td v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'footerStyle')" :class="columnProp(col, 'footerClass')">
{{columnProp(col, 'footer')}} <component :is="col.children.footer" :column="col" v-if="col.children && col.children.footer" />
</td> {{columnProp(col, 'footer')}}
</td>
</template>
</tr> </tr>
</tfoot> </tfoot>
<tbody class="p-treetable-tbody"> <tbody class="p-treetable-tbody">

30
src/components/treetable/TreeTableRow.vue
View File

@ -1,20 +1,22 @@
<template> <template>
<tr :class="containerClass" @click="onClick" @keydown="onKeyDown" @touchend="onTouchEnd" :style="node.style" tabindex="0"> <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">
<button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp(col, 'expander')" :style="togglerStyle" tabindex="-1" v-ripple> <td v-if="!columnProp(col, 'hidden')" :style="columnProp(col, 'bodyStyle')" :class="columnProp(col, 'bodyClass')">
<i :class="togglerIcon"></i> <button type="button" class="p-treetable-toggler p-link" @click="toggle" v-if="columnProp(col, 'expander')" :style="togglerStyle" tabindex="-1" v-ripple>
</button> <i :class="togglerIcon"></i>
<div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp(col, 'expander')" role="checkbox" :aria-checked="checked"> </button>
<div class="p-hidden-accessible"> <div class="p-checkbox p-treetable-checkbox p-component" @click="toggleCheckbox" v-if="checkboxSelectionMode && columnProp(col, 'expander')" role="checkbox" :aria-checked="checked">
<input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" /> <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>
<div ref="checkboxEl" :class="checkboxClass"> <component :is="col.children.body" :node="node" :column="col" v-if="col.children && col.children.body" />
<span :class="checkboxIcon"></span> <template v-else><span>{{resolveFieldData(node.data, columnProp(col, 'field'))}}</span></template>
</div> </td>
</div> </template>
<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>
</tr> </tr>
<template v-if="expanded && node.children && node.children.length"> <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" <TreeTableRow v-for="childNode of node.children" :key="childNode.key" :columns="columns" :node="childNode" :parentNode="node" :level="level + 1"

6
src/views/datatable/DataTableDoc.vue
View File

@ -372,6 +372,12 @@ export default {
<td>null</td> <td>null</td>
<td>Defines the filtering algorithm to use when searching the options.</td> <td>Defines the filtering algorithm to use when searching the options.</td>
</tr> </tr>
<tr>
<td>hidden</td>
<td>boolean</td>
<td>false</td>
<td>Whether the column is rendered.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>

6
src/views/treetable/TreeTableDoc.vue
View File

@ -618,6 +618,12 @@ export default {
<td>false</td> <td>false</td>
<td>Whether to exclude from global filtering or not.</td> <td>Whether to exclude from global filtering or not.</td>
</tr> </tr>
<tr>
<td>hidden</td>
<td>boolean</td>
<td>false</td>
<td>Whether the column is rendered.</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>