vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-09 08:52:34 +00:00
Code Issues Projects Releases Packages Wiki Activity

Refactor #3965 - For DataTable & Column & ColumnGroup & Row

Browse source
This commit is contained in:
Tuğçe Küçükoğlu 2023-06-02 09:52:13 +03:00
parent ea9062ae3a
commit 2669fd5925
16 changed files with 1127 additions and 920 deletions
Download patch file Download diff file Expand all files Collapse all files

31
components/lib/datatable/HeaderCell.vue
View file

@ -15,15 +15,21 @@
@dragleave="onDragLeave"
@drop="onDrop"
v-bind="{ ...getColumnPTOptions('root'), ...getColumnPTOptions('headerCell') }"
:data-p-sortable-column="columnProp('sortable')"
:data-p-resizable-column="resizableColumns"
:data-p-highlight="isColumnSorted()"
:data-p-filter-column="filterColumn"
:data-p-frozen-column="columnProp('frozen')"
:data-p-reorderable-column="reorderableColumns"
>
<span v-if="resizableColumns && !columnProp('frozen')" class="p-column-resizer" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<div class="p-column-header-content" v-bind="getColumnPTOptions('headerContent')">
<span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPTOptions('columnResizer')"></span>
<div :class="cx('headerContent')" v-bind="getColumnPTOptions('headerContent')">
<component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
<span v-if="columnProp('header')" class="p-column-title" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPTOptions('headerTitle')">{{ columnProp('header') }}</span>
<span v-if="columnProp('sortable')" v-bind="getColumnPTOptions('sort')">
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" class="p-sortable-column-icon" />
<component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" />
</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
<span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPTOptions('sortBadge')">{{ getBadgeValue() }}</span>
<DTHeaderCheckbox
v-if="columnProp('selectionMode') === 'multiple' && filterDisplay !== 'row'"
:checked="allRowsSelected"
@ -209,7 +215,7 @@ export default {
this.$emit('column-click', { originalEvent: event, column: this.column });
},
onKeyDown(event) {
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.hasClass(event.currentTarget, 'p-sortable-column')) {
if ((event.code === 'Enter' || event.code === 'Space') && event.currentTarget.nodeName === 'TH' && DomHandler.getAttribute(event.currentTarget, 'data-p-sortable-column')) {
this.$emit('column-click', { originalEvent: event, column: this.column });
event.preventDefault();
}
@ -286,18 +292,7 @@ export default {
},
computed: {
containerClass() {
return [
this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'),
this.columnProp('class'),
{
'p-sortable-column': this.columnProp('sortable'),
'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(),
'p-filter-column': this.filterColumn,
'p-frozen-column': this.columnProp('frozen'),
'p-reorderable-column': this.reorderableColumns
}
];
return [this.cx('headerCell'), this.filterColumn ? this.columnProp('filterHeaderClass') : this.columnProp('headerClass'), this.columnProp('class')];
},
containerStyle() {
let headerStyle = this.filterColumn ? this.columnProp('filterHeaderStyle') : this.columnProp('headerStyle');