pnp / pnp/sp-dev-fx-controls-react

ListView header scrolling

Open
#1,678 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted type:question
Dominant language
TypeScript
Stars
433
Forks
418
Avg merge
5d 6m
Merged PRs (30d)
19

Description

[ ] 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!

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the ListView control's stickyHeader option and reproduce the behavior using several ViewFields and enough sample data to require both scrollbars. Verify that vertical scrolling keeps the header visible while horizontal scrolling moves the header columns together with the field values.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.