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

Fixed #226 - Move column filters to their own row

pull/227/head
cagataycivici 2020-03-05 11:59:07 +03:00
parent a1d0d309f5
commit cd9877aebe
3 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,31 @@
<template>
<thead class="p-datatable-thead">
<tr v-if="!columnGroup">
<template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :tabindex="col.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
:key="col.columnKey||col.field||i" :style="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.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
<span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
<DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
<DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
</th>
</template>
</tr>
<template v-if="!columnGroup">
<tr>
<template v-for="(col,i) of columns">
<th v-if="rowGroupMode !== 'subheader' || (groupRowsBy !== col.field)" :tabindex="col.sortable ? '0' : null" @keydown="onColumnKeyDown($event, col)"
:key="col.columnKey||col.field||i" :style="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.colspan" :rowspan="col.rowspan" :aria-sort="getAriaSort(col)">
<span class="p-column-resizer p-clickable" @mousedown="onColumnResizeStart($event)" v-if="resizableColumns"></span>
<DTColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="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.field)" :key="col.columnKey||col.field||i"
:class="getFilterColumnClass(col)" :style="col.filterStyle">
<DTColumnSlot :column="col" type="filter" v-if="col.$scopedSlots.filter" />
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange($event)" :disabled="empty" v-if="col.selectionMode ==='multiple'" />
</th>
</template>
</tr>
</template>
<template v-else>
<tr v-for="(row,i) of columnGroup.rows" :key="i">
<th v-for="(col,i) of row.columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" :tabindex="col.sortable ? '0' : null"
@ -94,6 +104,9 @@ export default {
{'p-highlight': sorted}
];
},
getFilterColumnClass(column) {
return ['p-filter-column', column.filterClass];
},
getSortableColumnIcon(column) {
let sorted = false;
let sortOrder = null;
@ -173,6 +186,17 @@ export default {
else {
return null;
}
},
hasColumnFilter() {
if (this.columns) {
for (let col of this.columns) {
if (col.$scopedSlots.filter) {
return true;
}
}
}
return false;
}
},
components: {

10
src/views/datatable/DataTableDemo.vue
View File

@ -21,7 +21,7 @@
<InputText v-model="filters['global']" placeholder="Global Search" />
</div>
</template>
<Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"></Column>
<Column selectionMode="multiple" headerStyle="width: 3em"></Column>
<Column field="name" header="Name" :sortable="true">
<template #body="slotProps">
<span class="p-column-title">Name</span>
@ -86,9 +86,6 @@
</template>
</Column>
<Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible">
<template #header>
<Button type="button" icon="pi pi-cog" class="p-button-secondary" style="margin-top: 1em"></Button>
</template>
<template #body>
<Button type="button" icon="pi pi-cog" class="p-button-secondary"></Button>
</template>
@ -245,7 +242,6 @@ export default {
}
/deep/ .p-column-filter {
margin-top: 1em;
display: block;
input {
@ -285,6 +281,10 @@ export default {
.p-datatable-thead > tr > th {
border: 0 none;
text-align: left;
&.p-filter-column {
border-top: 1px solid #c8c8c8;
}
}
.p-datatable-tbody > tr > td {

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

@ -2323,7 +2323,7 @@ export default {
&lt;InputText v-model="filters['global']" placeholder="Global Search" /&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3em; padding-top: 2.75em"&gt;&lt;/Column&gt;
&lt;Column selectionMode="multiple" headerStyle="width: 3em"&gt;&lt;/Column&gt;
&lt;Column field="name" header="Name" :sortable="true"&gt;
&lt;template #body="slotProps"&gt;
&lt;span class="p-column-title"&gt;Name&lt;/span&gt;
@ -2388,9 +2388,6 @@ export default {
&lt;/template&gt;
&lt;/Column&gt;
&lt;Column headerStyle="width: 8em; text-align: center" bodyStyle="text-align: center; overflow: visible"&gt;
&lt;template #header&gt;
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary" style="margin-top: 1em"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;template #body&gt;
&lt;Button type="button" icon="pi pi-cog" class="p-button-secondary"&gt;&lt;/Button&gt;
&lt;/template&gt;
@ -2537,7 +2534,6 @@ export default {
}
/deep/ .p-column-filter {
margin-top: 1em;
display: block;
input {
@ -2577,6 +2573,10 @@ export default {
.p-datatable-thead > tr > th {
border: 0 none;
text-align: left;
&.p-filter-column {
border-top: 1px solid #c8c8c8;
}
}
.p-datatable-tbody > tr > td {