Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Tamas-hi opened this issue Jul 6, 2023 · 3 comments
Open
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add

Comments

@Tamas-hi
Copy link
Contributor

Tamas-hi commented Jul 6, 2023

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

@Tamas-hi Tamas-hi added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jul 6, 2023
@tugcekucukoglu tugcekucukoglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add labels Nov 2, 2023
@NaturesRadar
Copy link

NaturesRadar commented May 6, 2024

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

@0xkalle
Copy link

0xkalle commented Dec 18, 2024

Same problem here with 4.2.4. Did someone find a solution for it?

@SevenLab-nl
Copy link

Any plans to fix this? Or did anyone find a workaround?
It has been 1 and a half years since this issue was opened...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

No branches or pull requests

5 participants