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

TreeTable: Slot for custom column header in 2.x (#2942) 

* Added slot for custom header

* Updated treetable doc

---------

Co-authored-by: Kirill Uryvaev <kirill.u@nsysgroup.com>
pull/4587/head
Kirill Uryvaev 2023-10-05 14:45:55 +02:00 committed by GitHub
parent 5c727bb7a7
commit 1598c11055
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 7 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/treetable/HeaderCell.vue
View File

@ -2,6 +2,7 @@
<th :style="containerStyle" :class="containerClass" @click="onClick" @keydown="onKeyDown"
:tabindex="columnProp('sortable') ? '0' : null" :aria-sort="ariaSort">
<span class="p-column-resizer" @mousedown="onResizeStart" v-if="resizableColumns && !columnProp('frozen')"></span>
<TTColumnSlot :column="column" type="header" v-if="column.$scopedSlots.header"/>
<TTColumnSlot :column="column" v-if="column.children && column.children.header" />
<span class="p-column-title" v-if="columnProp('header')">{{columnProp('header')}}</span>
<span v-if="columnProp('sortable')" :class="sortableColumnIcon"></span>

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

@ -17,6 +17,9 @@
<Column field="size" header="Size"></Column>
<Column field="type" header="Type"></Column>
<Column :headerStyle="{'width': '10rem'}" headerClass="text-center" bodyClass="text-center">
<template #header>
<Button type="button" icon="pi pi-cog"></Button>
</template>
<template #body>
<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>
@ -44,6 +47,9 @@
&lt;Column field="size" header="Size"&gt;&lt;/Column&gt;
&lt;Column field="type" header="Type"&gt;&lt;/Column&gt;
&lt;Column headerStyle="width: 8em" bodyStyle="text-align: center"&gt;
&lt;template #header&gt;
&lt;Button type="button" icon="pi pi-cog"&gt;&lt;/Button&gt;
&lt;/template&gt;
&lt;template #body="slotProps"&gt;
&lt;Button type="button" icon="pi pi-search" class="p-button-success" style="margin-right: .5em"&gt;&lt;/Button&gt;
&lt;Button type="button" icon="pi pi-pencil" class="p-button-warning"&gt;&lt;/Button&gt;