search

primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
8.82k stars 1.09k forks source link

DataTable: Frozen Column Rendering Issue When Columns Automatically Resized #5331

Open incutonez opened 4 months ago

incutonez commented 4 months ago

Describe the bug

When you have a horizontal scrollbar present with frozen columns, and the data changes to make these frozen columns a bit wider, the frozen columns shift when horizontally scrolling.

Reproducer

https://stackblitz.com/edit/3nra9g-l7cch5?file=src%2FApp.vue

PrimeVue version

3.49.x

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Firefox

Steps to reproduce the behavior

  1. Go to https://stackblitz.com/edit/3nra9g-l7cch5?file=src%2FApp.vue
  2. Horizontal scroll and notice the ID columns stay frozen and in their place as expected
  3. Click the Change Data button
  4. Horizontal scroll and notice that the 2nd ID column shifts when you reach a certain point in the scroll

Expected behavior

The 2nd ID column should not shift. Video

sean-dickinson commented 1 week ago

I just want to note this is a common issue when using virtual scrolling. It seems that the frozen column offsets should be recalculated when the cells re-render due to data changes, but this does not happen by default. There isn't currently any event fired when this occurs, so it's very difficult to handle outside the component itself.