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

Fixed #2620 - DataTable | new 'p-reorderable-column' class and reorderable columns cursor update

pull/2621/head
Tuğçe Küçükoğlu 2022-06-02 16:28:12 +03:00
parent 66e90451c9
commit aae26c3db1
3 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,7 +22,7 @@
<template #content="slotProps">
<table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
<DTTableHeader :columnGroup="headerColumnGroup" :columns="slotProps.columns" :rowGroupMode="rowGroupMode"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
:sortMode="sortMode" :sortField="d_sortField" :sortOrder="d_sortOrder" :multiSortMeta="d_multiSortMeta" :filters="d_filters" :filtersStore="filters" :filterDisplay="filterDisplay"
@column-click="onColumnHeaderClick($event)" @column-mousedown="onColumnHeaderMouseDown($event)" @filter-change="onFilterChange" @filter-apply="onFilterApply"
@column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
@ -2133,6 +2133,11 @@ export default {
display: none;
}
.p-reorderable-column,
.p-datatable-reorderablerow-handle {
cursor: move;
}
/* Loader */
.p-datatable .p-datatable-loading-overlay {
position: absolute;

9
src/components/datatable/HeaderCell.vue
View File

@ -88,6 +88,10 @@ export default {
filterColumn: {
type: Boolean,
default: false
},
reorderableColumns: {
type: Boolean,
default: false
}
},
data() {
@ -95,7 +99,7 @@ export default {
styleObject: {}
}
},
mounted() {
mounted() {console.log(this.reorderableColumns)
if (this.columnProp('frozen')) {
this.updateStickyPosition();
}
@ -188,7 +192,8 @@ export default {
'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(),
'p-filter-column': this.filterColumn,
'p-frozen-column': this.columnProp('frozen')
'p-frozen-column': this.columnProp('frozen'),
'p-reorderable-column': this.reorderableColumns
}];
},
containerStyle() {

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

@ -6,7 +6,7 @@
<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)"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :reorderableColumns="reorderableColumns" :resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
:sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)"
:filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
@ -118,6 +118,10 @@ export default {
filtersStore: {
type: Object,
default: null
},
reorderableColumns: {
type: Boolean,
default: false
}
},
methods: {