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

Fixed #2001 - Improve resizable structure on DataTable

pull/2005/head
Tuğçe Küçükoğlu 2022-01-17 17:10:27 +03:00 committed by Tuğçe Küçükoğlu
parent 363a225aad
commit 5748ae7ec0
1 changed files with 18 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1106,15 +1106,7 @@ export default {
let nextColumnWidth = nextColumn.offsetWidth - delta; let nextColumnWidth = nextColumn.offsetWidth - delta;
if (newColumnWidth > 15 && nextColumnWidth > 15) { if (newColumnWidth > 15 && nextColumnWidth > 15) {
if (!this.scrollable) { this.resizeTableCells(newColumnWidth, nextColumnWidth);
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') {
@ -1122,10 +1114,7 @@ export default {
this.$refs.table.style.width = tableWidth; this.$refs.table.style.width = tableWidth;
this.$refs.table.style.minWidth = tableWidth; this.$refs.table.style.minWidth = tableWidth;
if (!this.scrollable) this.resizeTableCells(newColumnWidth);
this.resizeColumnElement.style.width = newColumnWidth + 'px';
else
this.resizeTableCells(newColumnWidth);
} }
this.$emit('column-resize-end', { this.$emit('column-resize-end', {
@ -1154,18 +1143,18 @@ export default {
this.createStyleElement(); this.createStyleElement();
let innerHTML = ''; let innerHTML = '';
widths.forEach((width,index) => { widths.forEach((width, index) => {
let colWidth = index === colIndex ? newColumnWidth : (nextColumnWidth && index === colIndex + 1) ? nextColumnWidth : width; let colWidth = index === colIndex ? newColumnWidth : (nextColumnWidth && index === colIndex + 1) ? nextColumnWidth : width;
let style = this.scrollable ? `flex: 1 1 ${colWidth}px !important` : `width: ${colWidth}px !important`;
innerHTML += ` innerHTML += `
.p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index+1}) { .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
flex: 0 0 ${colWidth}px !important; .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
} .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
${style}
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index+1}) {
flex: 0 0 ${colWidth}px !important;
} }
` `
}); });
this.styleElement.innerHTML = innerHTML; this.styleElement.innerHTML = innerHTML;
}, },
bindColumnResizeEvents() { bindColumnResizeEvents() {
@ -1195,7 +1184,7 @@ export default {
if (this.documentColumnResizeEndListener) { if (this.documentColumnResizeEndListener) {
document.removeEventListener('document', this.documentColumnResizeEndListener); document.removeEventListener('document', this.documentColumnResizeEndListener);
this.documentColumnResizeEndListener = null; this.documentColumnResizeEndListener = null;
} }
}, },
onColumnHeaderMouseDown(e) { onColumnHeaderMouseDown(e) {
@ -1588,27 +1577,23 @@ export default {
this.$el.style.width = this.tableWidthState; this.$el.style.width = this.tableWidthState;
} }
this.createStyleElement(); if (ObjectUtils.isNotEmpty(widths)) {
this.createStyleElement();
if (this.scrollable && widths && widths.length > 0) {
let innerHTML = ''; let innerHTML = '';
widths.forEach((width,index) => { widths.forEach((width, index) => {
let style = this.scrollable ? `flex: 1 1 ${width}px !important` : `width: ${width}px !important`;
innerHTML += ` innerHTML += `
.p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index+1}) { .p-datatable[${this.attributeSelector}] .p-datatable-thead > tr > th:nth-child(${index + 1}),
flex: 0 0 ${width}px; .p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index + 1}),
} .p-datatable[${this.attributeSelector}] .p-datatable-tfoot > tr > td:nth-child(${index + 1}) {
${style}
.p-datatable[${this.attributeSelector}] .p-datatable-tbody > tr > td:nth-child(${index+1}) {
flex: 0 0 ${width}px;
} }
` `
}); });
this.styleElement.innerHTML = innerHTML; this.styleElement.innerHTML = innerHTML;
} }
else {
DomHandler.find(this.$refs.table, '.p-datatable-thead > tr > th').forEach((header, index) => header.style.width = widths[index] + 'px');
}
} }
}, },
onCellEditInit(event) { onCellEditInit(event) {