search

pnp / sp-dev-fx-controls-react

Reusable React controls for SPFx solutions
https://pnp.github.io/sp-dev-fx-controls-react/
MIT License
384 stars 379 forks source link

ListView header scrolling #1678

Open hdmal opened 1 year ago

hdmal commented 1 year ago

[ ] Question

Version

Please specify what version of the library you are using: [ 3.15.0 ]

Expected / Desired Behavior / Question

When there are a lot of items and columns that can not be fitted into the default height and width of the "ListView" control, vertical and horizontal scrollbars should be displayed. Header should be sticky only for vertical scroller, while horizonal scroller should allow the users to scroll the columns together with the values. Should be similar to what SharePoint Online does.

image

Observed Behavior

Header remains sticky for both vertical and horizontal scrolls. Tried using "className" and "listClassName" with no luck.

Configuration: image

image

The output: image

image

We have followed the issue #1065, but it doesn't explain what exactly we should do to achieve this.

Steps to Reproduce

Create a new SPFx webpart. Import the "ListView" control. Set "stickyHeader" property to "True" Create several ViewFields to exceed the width of the ListView. Bind the control with sample data to exceed the default height of the ListView. Use the vertical and horizontal scroll.

Is there a way to set the "stickyHeader" option, so that vertical scroller shows all the records, while the horizontal scroller allows the users to scroll horizontally to view all the field values with the header columns?

Thanks!

ghost commented 1 year ago

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.