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

Templating for header and footer

pull/14/head
cagataycivici 2019-07-02 13:46:06 +03:00
parent ae31391bb6
commit f242f75904
2 changed files with 26 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/datatable/DataTable.vue
View File

@ -18,11 +18,20 @@
<thead class="p-datatable-thead"> <thead class="p-datatable-thead">
<tr> <tr>
<th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)"> <th v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" :class="getColumnHeaderClass(col)" @click="onColumnHeaderClick($event, col)">
<ColumnSlot :column="col" type="header" v-if="col.$scopedSlots.header" />
<span class="p-column-title" v-if="col.header">{{col.header}}</span> <span class="p-column-title" v-if="col.header">{{col.header}}</span>
<span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span> <span v-if="col.sortable" :class="getSortableColumnIcon(col)"></span>
</th> </th>
</tr> </tr>
</thead> </thead>
<tfoot class="p-datatable-tfoot" v-if="hasFooter">
<tr>
<td v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.footerStyle" :class="col.footerClass">
<ColumnSlot :column="col" type="footer" v-if="col.$scopedSlots.footer" />
{{col.footer}}
</td>
</tr>
</tfoot>
<tbody class="p-datatable-tbody"> <tbody class="p-datatable-tbody">
<template v-if="!empty"> <template v-if="!empty">
<tr class="p-datatable-row" v-for="(rowData, index) of data" :key="getRowKey(rowData, index)"> <tr class="p-datatable-row" v-for="(rowData, index) of data" :key="getRowKey(rowData, index)">
@ -249,7 +258,7 @@ export default {
} }
}, },
sortSingle(value) { sortSingle(value) {
let data = [...this.value]; let data = [...value];
data.sort((data1, data2) => { data.sort((data1, data2) => {
let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField); let value1 = ObjectUtils.resolveFieldData(data1, this.d_sortField);
@ -273,7 +282,7 @@ export default {
return data; return data;
}, },
sortMultiple(value) { sortMultiple(value) {
let data = [...this.value]; let data = [...value];
data.sort((data1, data2) => { data.sort((data1, data2) => {
return this.multisortField(data1, data2, 0); return this.multisortField(data1, data2, 0);
@ -410,6 +419,18 @@ export default {
}, },
sorted() { sorted() {
return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0); return this.d_sortField || (this.d_multiSortMeta && this.d_multiSortMeta.length > 0);
},
hasFooter() {
let hasFooter = false;
for (let col of this.columns) {
if (col.footer || col.$scopedSlots.footer) {
hasFooter = true;
break;
}
}
return hasFooter;
} }
}, },
components: { components: {

3
src/views/datatable/DataTableTemplatingDemo.vue
View File

@ -26,6 +26,9 @@
</Column> </Column>
<Column field="color" header="Color"></Column> <Column field="color" header="Color"></Column>
<Column headerStyle="width: 8em" bodyStyle="text-align: center"> <Column headerStyle="width: 8em" bodyStyle="text-align: center">
<template #header>
<Button type="button" icon="pi pi-cogs"></Button>
</template>
<template #body="slotProps"> <template #body="slotProps">
<Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button> <Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"></Button>
<Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button> <Button type="button" icon="pi pi-pencil" class="p-button-warning"></Button>