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

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

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

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

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

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

@ -271,7 +271,7 @@ export default {
}
}
else {
return true;
return !this.columnProp(column, 'hidden');
}
},
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">
<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>

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

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

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

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

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

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

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

@ -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>

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

@ -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>