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

Scroll+Resize support for TreeTable

pull/1281/head
Cagatay Civici 2021-05-17 15:57:40 +03:00
parent 7e6a0c041f
commit d8c6ab597c
2 changed files with 35 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1103,24 +1103,6 @@ export default {
}
}
},
resizeColGroup(table, resizeColumnIndex, newColumnWidth, nextColumnWidth) {
if(table) {
let colGroup = table.children[0].nodeName === 'COLGROUP' ? table.children[0] : null;
if(colGroup) {
let col = colGroup.children[resizeColumnIndex];
let nextCol = col.nextElementSibling;
col.style.width = newColumnWidth + 'px';
if (nextCol && nextColumnWidth) {
nextCol.style.width = nextColumnWidth + 'px';
}
}
else {
throw new Error("Scrollable tables require a colgroup to support resizable columns");
}
}
},
bindColumnResizeEvents() {
if (!this.documentColumnResizeListener) {
this.documentColumnResizeListener = document.addEventListener('mousemove', () => {

44
src/components/treetable/TreeTable.vue
View File

@ -668,26 +668,35 @@ export default {
this.$refs.resizeHelper.style.display = 'block';
},
onColumnResizeEnd() {
let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
let delta = this.$refs.resizeHelper.offsetLeft - this.lastResizeHelperX;
let columnWidth = this.resizeColumnElement.offsetWidth;
let newColumnWidth = columnWidth + delta;
let minWidth = this.resizeColumnElement.style.minWidth||15;
if(columnWidth + delta > parseInt(minWidth, 10)) {
if(this.columnResizeMode === 'fit') {
if (columnWidth + delta > parseInt(minWidth, 10)) {
if (this.columnResizeMode === 'fit') {
let nextColumn = this.resizeColumnElement.nextElementSibling;
let nextColumnWidth = nextColumn.offsetWidth - delta;
if(newColumnWidth > 15 && nextColumnWidth > 15) {
this.resizeColumnElement.style.width = newColumnWidth + 'px';
if(nextColumn) {
nextColumn.style.width = nextColumnWidth + 'px';
if (newColumnWidth > 15 && nextColumnWidth > 15) {
if (!this.scrollable) {
this.resizeColumnElement.style.width = newColumnWidth + 'px';
if(nextColumn) {
nextColumn.style.width = nextColumnWidth + 'px';
}
}
else {
this.resizeTableCells(newColumnWidth, nextColumnWidth);
}
}
}
else if(this.columnResizeMode === 'expand') {
else if (this.columnResizeMode === 'expand') {
this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px';
this.resizeColumnElement.style.width = newColumnWidth + 'px';
if (!this.scrollable)
this.resizeColumnElement.style.width = newColumnWidth + 'px';
else
this.resizeTableCells(newColumnWidth);
}
this.$emit('column-resize-end', {
@ -702,6 +711,23 @@ export default {
this.unbindColumnResizeEvents();
},
resizeTableCells(newColumnWidth, nextColumnWidth) {
let colIndex = DomHandler.index(this.resizeColumnElement);
let children = this.$refs.table.children;
for (let child of children) {
for (let row of child.children) {
let resizeCell = row.children[colIndex];
resizeCell.style.flex = '0 0 ' + newColumnWidth + 'px';
if (this.columnResizeMode === 'fit') {
let nextCell = resizeCell.nextElementSibling;
if (nextCell) {
nextCell.style.flex = '0 0 ' + nextColumnWidth + 'px';
}
}
}
}
},
bindColumnResizeEvents() {
if (!this.documentColumnResizeListener) {
this.documentColumnResizeListener = document.addEventListener('mousemove', () => {