DataTable: Virtual scrolling doesn't work when rowGroup mode is enabled

[Tamas-hi]

Describe the bug

As the title says, I'have used your official example (https://primevue.org/datatable/#rowgroup_subheader), but added :virtualScrollerOptions="{ itemSize: 46 }" to the DataTable. After that rowGroup is messed up when we scroll.

Reproducer

https://stackblitz.com/edit/43cdnh?file=src%2Fservice%2FCustomerService.js,src%2FApp.vue

PrimeVue version

3.29.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[NaturesRadar]

I ran into the same problem.

    <DataTable :value="importedPlots" scrollable scrollHeight="calc(100vh - 180px)" v-model:selection="selectedRow"
        selectionMode="single" showGridlines @rowSelect="onRowSelect" resizableColumns columnResizeMode="expand"
        class="mt-3 p-datatable-sm" dataKey="featureId" rowGroupMode="subheader" groupRowsBy="filename"
        sortMode="single" sortField="filename" :sortOrder="1" :virtualScrollerOptions="{ itemSize: 50 }">

The rows are messed up and have a big gap, also row group is missing when scrolling after 50 items. It looks like the row group header is trying to set itself inside after every row.

I believe this is more than an enhancement it is a big problem for the performance of the browser with big datasets.

PrimeVue Version 3.52.0