DataTable: Horizontal Virtual Scroll in DataTable Displays Unexpected Behavior

[minnnn7716]

Describe the bug

When using the 'horizontal' or 'both' virtual scroll options in the DataTable component, the display does not behave as expected. The virtual scroll works normally when using only the 'vertical' option, but issues arise when enabling 'horizontal' or 'both'. The problems include one or both of the following scenarios:

virtualScrollerOptions={{
  itemSize: [46, 100],
  orientation: 'both',
  scrollWidth: 'auto',
}}

Details are described in the Steps to reproduce the behavior section below.
Could you please investigate this issue or provide guidance on how to resolve it? Thank you!

Reproducer

1. Missing part of the data: Stackblitz demo
2. Column misalignment: Stackblitz demo

System Information

primereact: 10.8.5
react: 18.3.1

Steps to reproduce the behavior

1. Missing part of the data: Some data rows or columns are not displayed.
To simulate a large number of columns, I duplicated the dataset five times with columns: Vin, Year, Brand, and Color. Below is an example of the structure

In the problematic scenario, when scrolling horizontally to the end, some columns are missing while others are displayed. For example, it may only show the second set of columns, while parts of the other sets are missing.Here's a Stackblitz demo demonstrating the issue. Note that this problem's behavior varies based on the window size and may sometimes result in the Column misalignment issue described below.

---

2. Column misalignment: Columns become dislocated or misaligned.
I adjusted all columns and cells to a uniform width of 100px using CSS. While this fixed the issue of missing data, it resulted in column misalignment instead. You can see this behavior in another Stackblitz demo.

Expected behavior

Ｗhen scrolling, all data should be displayed, and the column positions should remain correct.

[sja-cslab]

In Your first reproducer, just change your property to virtualScrollerOptions={{ itemSize: 46 }}.
The reason your columns are missing is because of your itemSize you set. You've to make sure, that set itemSize always fits your items in width and height.

The same applies to the second StackBlitz the itemsSizes aren't those you give to the virtualScroller.

Edit: even my virtualScrollerOptions={{ itemSize: 46 }} wont work for all items in height here because in your screenshots, the height of the items aren't 46

[minnnn7716]

Hi, sja-cslab

Thank you for your response, and I appreciate your suggestion. Apologies for not adjusting the itemSize parameter to fit the height of my cells earlier. Initially, I only had a single row with a height smaller than 46, and the issue still occurred. Later, I added a "round #" to help identify the column groups, which caused the height of the items to exceed 46.

I have now adjusted the itemSize to 65. However, if I set virtualScrollerOptions={{ itemSize: 65 }} instead of virtualScrollerOptions={{ itemSize: [65, 100] }}, the virtual scrolling only works in the vertical direction. I need it to work in both directions (horizontal and vertical).

[sja-cslab]

Did you remove orientation and scrollWidth? works fine for me then:

[minnnn7716]

Thank you for following up. Yes, I've tried removing both the orientation and scrollWidth parameters. While this does resolve the display issues (showing full data without misalignment), it only enables vertical virtualization.

I verified this using DevTools - the component now correctly virtualizes vertically by rendering only about 15 rows at a time (out of 10,000 total rows), but horizontally it still renders all 29 columns at once. The horizontal virtualization should work similarly to the vertical one, only rendering the visible columns rather than the entire set. This is why I need to maintain the orientation: 'both' setting to achieve virtualization in both directions.

[sja-cslab]

I see your point my friend but did you notice the following in the datatable docs?

[melloware]

Thanks @sja-cslab closing as "By Design"

[minnnn7716]

Hi, sja-cslab,

Thank you for pointing that out, and I sincerely apologize for not noticing that line in the documentation. I saw that the VirtualScrollerProps interface allows passing the parameter, so I mistakenly assumed it was supported.

I truly appreciate your response and assistance. I'm sorry for wasting your time due to my oversight. Thank you again for your help!