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

Fixed #1508 and #1521 - DataTable doesn't work as expected when the container is resized.

pull/1544/head
mertsincan 2021-09-15 11:13:04 +03:00
parent 62f3914de2
commit 3151dd896c
1 changed files with 6 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -396,10 +396,6 @@ export default {
} }
}, },
mounted() { mounted() {
if (this.scrollable && (this.scrollDirection !== 'vertical' || this.rowGroupMode === 'subheader' || !this.resizableColumns)) {
this.updateScrollWidth();
}
if (this.responsiveLayout === 'stack' && !this.scrollable) { if (this.responsiveLayout === 'stack' && !this.scrollable) {
this.createResponsiveStyle(); this.createResponsiveStyle();
} }
@ -416,10 +412,6 @@ export default {
if (this.isStateful()) { if (this.isStateful()) {
this.saveState(); this.saveState();
} }
if (this.scrollable && (this.scrollDirection !== 'vertical' || this.rowGroupMode === 'subheader')) {
this.updateScrollWidth();
}
}, },
methods: { methods: {
columnProp(col, prop) { columnProp(col, prop) {
@ -1088,7 +1080,9 @@ export default {
} }
} }
else if (this.columnResizeMode === 'expand') { else if (this.columnResizeMode === 'expand') {
this.$refs.table.style.width = this.$refs.table.offsetWidth + delta + 'px'; const tableWidth = this.$refs.table.offsetWidth + delta + 'px';
this.$refs.table.style.width = tableWidth;
this.$refs.table.style.minWidth = tableWidth;
if (!this.scrollable) if (!this.scrollable)
this.resizeColumnElement.style.width = newColumnWidth + 'px'; this.resizeColumnElement.style.width = newColumnWidth + 'px';
@ -1538,7 +1532,7 @@ export default {
state.columnWidths = widths.join(','); state.columnWidths = widths.join(',');
if (this.columnResizeMode === 'expand') { if (this.columnResizeMode === 'expand') {
state.tableWidth = DomHandler.getOuterWidth(this.$refs.table) + 'px'; state.tableWidth = DomHandler.getOuterWidth(this.$refs.table) + 'px';
} }
}, },
restoreColumnWidths() { restoreColumnWidths() {
@ -1547,6 +1541,7 @@ export default {
if (this.columnResizeMode === 'expand' && this.tableWidthState) { if (this.columnResizeMode === 'expand' && this.tableWidthState) {
this.$refs.table.style.width = this.tableWidthState; this.$refs.table.style.width = this.tableWidthState;
this.$refs.table.style.minWidth = this.tableWidthState;
this.$el.style.width = this.tableWidthState; this.$el.style.width = this.tableWidthState;
} }
@ -1636,16 +1631,6 @@ export default {
this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field'))); this.columns.forEach(col => columnOrder.push(this.columnProp(col, 'columnKey')||this.columnProp(col, 'field')));
this.d_columnOrder = columnOrder; this.d_columnOrder = columnOrder;
}, },
updateScrollWidth() {
let parentElementHeight = DomHandler.width(this.$refs.table.parentElement);
if (this.$refs.table.scrollWidth > parentElementHeight) {
this.$refs.table.style.width = this.$refs.table.scrollWidth + 'px';
}
else {
this.$refs.table.style.width = parentElementHeight - DomHandler.calculateScrollbarWidth() + 'px';
}
},
createResponsiveStyle() { createResponsiveStyle() {
if (!this.styleElement) { if (!this.styleElement) {
this.$el.setAttribute(this.attributeSelector, ''); this.$el.setAttribute(this.attributeSelector, '');
@ -1858,7 +1843,7 @@ export default {
.p-datatable table { .p-datatable table {
border-collapse: collapse; border-collapse: collapse;
width: 100%; min-width: 100%;
table-layout: fixed; table-layout: fixed;
} }
@ -1898,10 +1883,6 @@ export default {
overflow: auto; overflow: auto;
} }
.p-datatable-scrollable .p-datatable-table {
display: block;
}
.p-datatable-scrollable .p-datatable-thead, .p-datatable-scrollable .p-datatable-thead,
.p-datatable-scrollable .p-datatable-tbody, .p-datatable-scrollable .p-datatable-tbody,
.p-datatable-scrollable .p-datatable-tfoot { .p-datatable-scrollable .p-datatable-tfoot {