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

Fixed #380 - Datatable with RowGroup and Scroll scrollbar misplaced

pull/388/head
cagataycivici 2020-07-10 16:23:36 +03:00
parent 75f6d90959
commit caa7b09155
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -39,7 +39,8 @@
</table>
</div>
<div class="p-datatable-scrollable-wrapper" v-else>
<DTScrollableView v-if="hasFrozenColumns" :scrollHeight="scrollHeight" :columns="frozenColumns" :frozenWidth="frozenWidth" :frozen="true">
<DTScrollableView v-if="hasFrozenColumns" :scrollHeight="scrollHeight" :columns="frozenColumns" :frozenWidth="frozenWidth" :frozen="true"
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy">
<template #header>
<DTTableHeader :columnGroup="frozenHeaderColumnGroup" :columns="frozenColumns" :rowGroupMode="rowGroupMode"
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"
@ -75,7 +76,8 @@
</template>
</DTScrollableView>
<DTScrollableView :scrollHeight="scrollHeight" :columns="scrollableColumns" :frozenWidth="frozenWidth" :rows="rows"
:virtualScroll="virtualScroll" :virtualRowHeight="virtualRowHeight" :totalRecords="totalRecordsLength" @virtual-scroll="onVirtualScroll">
:virtualScroll="virtualScroll" :virtualRowHeight="virtualRowHeight" :totalRecords="totalRecordsLength" @virtual-scroll="onVirtualScroll"
:rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy">
<template #header>
<DTTableHeader :columnGroup="headerColumnGroup" :columns="scrollableColumns" :rowGroupMode="rowGroupMode"
:groupRowsBy="groupRowsBy" :resizableColumns="resizableColumns" :allRowsSelected="allRowsSelected" :empty="empty"

29
src/components/datatable/ScrollableView.vue
View File

@ -4,7 +4,9 @@
<div class="p-datatable-scrollable-header-box" ref="scrollHeaderBox">
<table class="p-datatable-scrollable-header-table">
<colgroup class="p-datatable-scrollable-colgroup">
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
<template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
</template>
</colgroup>
<slot name="header"></slot>
<slot name="frozenbody"></slot>
@ -14,13 +16,15 @@
<div class="p-datatable-scrollable-body" ref="scrollBody" @scroll="onBodyScroll" :style="{maxHeight: scrollHeight !== 'flex' ? scrollHeight: null}">
<table ref="scrollTable" :class="bodyTableClass" :style="bodyTableStyle">
<colgroup class="p-datatable-scrollable-colgroup">
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
<template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.columnKey||col.field||i" :style="col.bodyStyle" />
</template>
</colgroup>
<slot name="body"></slot>
</table>
<table ref="loadingTable" :style="{top:'0', display: 'none'}" class="p-datatable-scrollable-body-table p-datatable-loading-virtual-table p-datatable-virtual-table" v-if="virtualScroll">
<colgroup class="p-datatable-scrollable-colgroup">
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.bodyStyle" />
</colgroup>
<DTTableLoadingBody :columns="columns" :rows="rows" />
</table>
@ -30,7 +34,9 @@
<div class="p-datatable-scrollable-footer-box" ref="scrollFooterBox">
<table class="p-datatable-scrollable-footer-table">
<colgroup class="p-datatable-scrollable-colgroup">
<col v-for="(col,i) of columns" :key="col.columnKey||col.field||i" :style="col.headerStyle" />
<template v-for="(col,i) of columns">
<col v-if="shouldRenderCol(col)" :key="col.columnKey||col.field||i" :style="col.footerStyle" />
</template>
</colgroup>
<slot name="footer"></slot>
</table>
@ -76,6 +82,14 @@ export default {
totalRecords: {
type: Number,
default: 0
},
rowGroupMode: {
type: String,
default: null
},
groupRowsBy: {
type: [Array,String],
default: null
}
},
virtualScrollCallback: null,
@ -178,6 +192,13 @@ export default {
else {
return null;
}
},
shouldRenderCol(column) {
if (this.rowGroupMode && this.rowGroupMode === 'subheader') {
return this.groupRowsBy !== column.field;
}
return true;
}
},
computed: {