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"> <template #content="slotProps">
<table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]"> <table ref="table" role="table" :class="[tableClass, 'p-datatable-table']" :style="[tableStyle, slotProps.spacerStyle]">
<DTTableHeader :columnGroup="headerColumnGroup" :columns="slotProps.columns" :rowGroupMode="rowGroupMode" <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" :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-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)" @column-dragstart="onColumnHeaderDragStart($event)" @column-dragover="onColumnHeaderDragOver($event)" @column-dragleave="onColumnHeaderDragLeave($event)" @column-drop="onColumnHeaderDrop($event)"
@ -2133,6 +2133,11 @@ export default {
display: none; display: none;
} }
.p-reorderable-column,
.p-datatable-reorderablerow-handle {
cursor: move;
}
/* Loader */ /* Loader */
.p-datatable .p-datatable-loading-overlay { .p-datatable .p-datatable-loading-overlay {
position: absolute; position: absolute;

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

@ -88,6 +88,10 @@ export default {
filterColumn: { filterColumn: {
type: Boolean, type: Boolean,
default: false default: false
},
reorderableColumns: {
type: Boolean,
default: false
} }
}, },
data() { data() {
@ -95,7 +99,7 @@ export default {
styleObject: {} styleObject: {}
} }
}, },
mounted() { mounted() {console.log(this.reorderableColumns)
if (this.columnProp('frozen')) { if (this.columnProp('frozen')) {
this.updateStickyPosition(); this.updateStickyPosition();
} }
@ -188,7 +192,8 @@ export default {
'p-resizable-column': this.resizableColumns, 'p-resizable-column': this.resizableColumns,
'p-highlight': this.isColumnSorted(), 'p-highlight': this.isColumnSorted(),
'p-filter-column': this.filterColumn, 'p-filter-column': this.filterColumn,
'p-frozen-column': this.columnProp('frozen') 'p-frozen-column': this.columnProp('frozen'),
'p-reorderable-column': this.reorderableColumns
}]; }];
}, },
containerStyle() { 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" <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-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)" @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" :sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
:allRowsSelected="allRowsSelected" :empty="empty" @checkbox-change="$emit('checkbox-change', $event)" :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')" :filters="filters" :filterDisplay="filterDisplay" :filtersStore="filtersStore" @filter-change="$emit('filter-change', $event)" @filter-apply="$emit('filter-apply')"
@ -118,6 +118,10 @@ export default {
filtersStore: { filtersStore: {
type: Object, type: Object,
default: null default: null
},
reorderableColumns: {
type: Boolean,
default: false
} }
}, },
methods: { methods: {