Fixed #380 - Datatable with RowGroup and Scroll scrollbar misplaced

src/components/datatable/DataTable.vue

@@ -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"

src/components/datatable/ScrollableView.vue

@@ -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: {