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

Fixed #1345 - DataTable row group and sortable columns are not working together

pull/1533/head
mertsincan 2021-08-27 13:51:49 +03:00
parent b6ab976e82
commit bede50d494
3 changed files with 44 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@
<div class="p-datatable-wrapper" :style="{maxHeight: scrollHeight}">
<table ref="table" role="table" class="p-datatable-table">
<DTTableHeader :columnGroup="headerColumnGroup" :columns="columns" :rowGroupMode="rowGroupMode"
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :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)"
@ -323,6 +323,7 @@ export default {
d_sortField: this.sortField,
d_sortOrder: this.sortOrder,
d_multiSortMeta: this.multiSortMeta ? [...this.multiSortMeta] : [],
d_groupRowsSortMeta: null,
d_selectionKeys: null,
d_expandedRowKeys: null,
d_columnOrder: null,
@ -484,6 +485,15 @@ export default {
}
},
sortSingle(value) {
if (this.groupRowsBy && this.groupRowsBy === this.sortField) {
this.d_multiSortMeta = [
{field: this.sortField, order: this.sortOrder || this.defaultSortOrder},
{field: this.d_sortField, order: this.d_sortOrder}
];
return this.sortMultiple(value);
}
let data = [...value];
data.sort((data1, data2) => {
@ -509,6 +519,15 @@ export default {
return data;
},
sortMultiple(value) {
if (this.groupRowsBy && (this.d_groupRowsSortMeta || (this.d_multiSortMeta.length && this.groupRowsBy === this.d_multiSortMeta[0].field))) {
const firstSortMeta = this.d_multiSortMeta[0];
!this.d_groupRowsSortMeta && (this.d_groupRowsSortMeta = firstSortMeta);
if (firstSortMeta.field !== this.d_groupRowsSortMeta.field) {
this.d_multiSortMeta = [this.d_groupRowsSortMeta, ...this.d_multiSortMeta];
}
}
let data = [...value];
data.sort((data1, data2) => {
@ -1818,6 +1837,9 @@ export default {
},
attributeSelector() {
return UniqueComponentId();
},
groupRowSortField() {
return this.sortMode === 'single' ? this.sortField : (this.d_groupRowsSortMeta ? this.d_groupRowsSortMeta.field : null);
}
},
components: {

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

@ -8,7 +8,7 @@
<component :is="column.children.header" :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>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getMultiSortMetaIndex() + 1}}</span>
<span v-if="isMultiSorted()" class="p-sortable-column-badge">{{getBadgeValue()}}</span>
<DTHeaderCheckbox :checked="allRowsSelected" @change="onHeaderCheckboxChange" :disabled="empty" v-if="columnProp('selectionMode') ==='multiple' && filterDisplay !== 'row'" />
<DTColumnFilter v-if="filterDisplay === 'menu' && column.children && column.children.filter" :field="columnProp('filterField')||columnProp('field')" :type="columnProp('dataType')" display="menu"
:showMenu="columnProp('showFilterMenu')" :filterElement="column.children && column.children.filter"
@ -41,10 +41,18 @@ export default {
type: Boolean,
default: false
},
groupRowsBy: {
type: [Array,String],
default: null
},
sortMode: {
type: String,
default: 'single'
},
groupRowSortField: {
type: [String, Function],
default: null
},
sortField: {
type: [String, Function],
default: null
@ -128,20 +136,15 @@ export default {
this.$emit('column-resizestart', event);
},
getMultiSortMetaIndex() {
let index = -1;
return this.multiSortMeta.findIndex(meta => (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')));
},
getBadgeValue() {
let index = this.getMultiSortMetaIndex();
for (let i = 0; i < this.multiSortMeta.length; i++) {
let meta = this.multiSortMeta[i];
if (meta.field === this.columnProp('field') || meta.field === this.columnProp('sortField')) {
index = i;
break;
}
}
return index;
return (this.groupRowsBy && this.groupRowsBy === this.groupRowSortField) && index > -1 ? index : index + 1;
},
isMultiSorted() {
return this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
return this.sortMode === 'multiple' && this.columnProp('sortable') && this.getMultiSortMetaIndex() > -1
},
isColumnSorted() {
return this.sortMode === 'single' ? (this.sortField && (this.sortField === this.columnProp('field') || this.sortField === this.columnProp('sortField'))) : this.isMultiSorted();

8
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)"
:resizableColumns="resizableColumns" @column-resizestart="$emit('column-resizestart', $event)"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :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')"
@ -36,7 +36,7 @@
<template v-for="(col,j) of row.children.default()" :key="columnProp(col, 'columnKey')||columnProp(col, 'field')||j">
<DTHeaderCell v-if="!columnProp(col, 'hidden') && (rowGroupMode !== 'subheader' || (groupRowsBy !== columnProp(col, 'field'))) && (typeof col.children !== 'string')" :column="col"
@column-click="$emit('column-click', $event)" @column-mousedown="$emit('column-mousedown', $event)"
:sortMode="sortMode" :sortField="sortField" :sortOrder="sortOrder" :multiSortMeta="multiSortMeta"
:groupRowsBy="groupRowsBy" :groupRowSortField="groupRowSortField" :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')"
@operator-change="$emit('operator-change',$event)" @matchmode-change="$emit('matchmode-change', $event)" @constraint-add="$emit('constraint-add', $event)"
@ -90,6 +90,10 @@ export default {
type: String,
default: 'single'
},
groupRowSortField: {
type: [String, Function],
default: null
},
sortField: {
type: [String, Function],
default: null