DataTable CSS and responsive structure improvements (#3684)

* DataTable CSS and responsive structure improvements

Fixed #3682 and #3683

* Update DataTable.vue
This commit is contained in:
mertsincan 2023-02-28 10:33:00 +00:00 committed by GitHub
parent 2f4afc71be
commit 16833178f1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 348 additions and 212 deletions

View file

@ -67,7 +67,9 @@
</td>
</tr>
<tr v-if="templates['groupfooter'] && rowGroupMode === 'subheader' && shouldRenderRowGroupFooter(value, rowData, getRowIndex(index))" :key="getRowKey(rowData, getRowIndex(index)) + '_subfooter'" class="p-rowgroup-footer" role="row">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
<td :colspan="columnsLength - 1">
<component :is="templates['groupfooter']" :data="rowData" :index="getRowIndex(index)" />
</td>
</tr>
</template>
</template>
@ -238,13 +240,6 @@ export default {
isARowSelected: false
};
},
watch: {
virtualScrollerContentProps(newValue, oldValue) {
if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical') && this.getVirtualScrollerProp('itemSize', oldValue) !== this.getVirtualScrollerProp('itemSize', newValue)) {
this.updateVirtualScrollerPosition();
}
}
},
mounted() {
if (this.frozenRow) {
this.updateFrozenRowStickyPosition();
@ -253,10 +248,6 @@ export default {
if (this.scrollable && this.rowGroupMode === 'subheader') {
this.updateFrozenRowGroupHeaderStickyPosition();
}
if (!this.isVirtualScrollerDisabled && this.getVirtualScrollerProp('vertical')) {
this.updateVirtualScrollerPosition();
}
},
updated() {
if (this.frozenRow) {
@ -538,11 +529,6 @@ export default {
this.rowGroupHeaderStyleObject.top = tableHeaderHeight + 'px';
},
updateVirtualScrollerPosition() {
const tableHeaderHeight = DomHandler.getOuterHeight(this.$el.previousElementSibling);
this.$el.style.top = (this.$el.style.top || 0) + tableHeaderHeight + 'px';
},
getVirtualScrollerProp(option, options) {
options = options || this.virtualScrollerContentProps;