primefaces / primevue

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

Datatable: Stateful, resizable, scrollable table could not restore column widths properly #3385

Open klsl2008 opened 1 year ago

klsl2008 commented 1 year ago

Describe the bug

The example is a modified version of "Horizontal and Vertical with Footer" in official website: https://primefaces.org/primevue-v2/#/datatable/scroll

The datatable is configured to be stateful, column resizable to "expand" and horizontally scrollable.

The problem is that after resizing the columns and reloading the page, the columns are not restored to modified widths. Also the table would overflow the container box which is not expected.

Reproducer

https://codesandbox.io/s/primevue2-stateful-scrollable-resizable-datatable-yj23h2?file=/src/App.vue

PrimeVue version

2.10.1

Vue version

2.x

Language

ES6

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

  1. Go to reproducer link
  2. Resize the first column such that the table width should be large than window width and scrollbar appears.
  3. The table should be still inside the black bordered container box and the first column becomes wider.
  4. Press "Reload" button to reload the page.
  5. The first column reverts back to original width and the table overflow the container box.

Note: You can press "Reset State and Reload" to retry from step 1.

Expected behavior

  1. The first column should have the width set to value in step 2.
  2. The table should not overflow the container box.
iuriag commented 2 months ago

Any deadline for when this will be adjusted/released?