Skip to content

fix(ui): fix sticky headers in grideditable #93648

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 17, 2025

Conversation

lzhao-sentry
Copy link
Contributor

Changes

Move where the sticky style gets applied to fix issues with sticky header not working with scrolling. Also add a story to cover both sticky headers and scrolling

Before

Screenshot 2025-06-16 at 4 05 50 PM

After

Screenshot 2025-06-16 at 4 06 14 PM

@github-actions github-actions bot added the Scope: Frontend Automatically applied to PRs that change frontend components label Jun 16, 2025
@lzhao-sentry lzhao-sentry requested a review from a team June 16, 2025 20:25
@@ -486,7 +487,7 @@ class GridEditable<
height={height}
ref={this.refGrid}
>
<GridHead>{this.renderGridHead()}</GridHead>
<GridHead sticky={stickyHeader}>{this.renderGridHead()}</GridHead>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it seems like we pass sticky in two places now - to GridHead and to each GridHeadCell:

<GridHeadCell
data-test-id="grid-head-cell"
key={`${i}.${column.key}`}
isFirst={i === 0}
sticky={stickyHeader}

Shouldn’t it be enough to pass it to GridHead now ? Your PR description also mentions you’ve moved where the sticky style gets applied - but I don’t see it being moved, only being added a second time 🤔.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Woops forgot to remove that, thanks for the catch

@lzhao-sentry lzhao-sentry merged commit 013a83f into master Jun 17, 2025
46 checks passed
@lzhao-sentry lzhao-sentry deleted the lzhao/fix-sticky-header-in-grid-editable branch June 17, 2025 13:48
billyvg pushed a commit that referenced this pull request Jun 18, 2025
### Changes
Move where the sticky style gets applied to fix issues with sticky
header not working with scrolling. Also add a story to cover both sticky
headers and scrolling

### Before

![Screenshot 2025-06-16 at 4 05
50 PM](https://github.com/user-attachments/assets/d767a3fe-c416-4a20-aec9-24622d811a24)


### After

![Screenshot 2025-06-16 at 4 06
14 PM](https://github.com/user-attachments/assets/aa699f84-ce42-4d0c-b7ba-548ed01bf432)
andrewshie-sentry pushed a commit that referenced this pull request Jun 19, 2025
### Changes
Move where the sticky style gets applied to fix issues with sticky
header not working with scrolling. Also add a story to cover both sticky
headers and scrolling

### Before

![Screenshot 2025-06-16 at 4 05
50 PM](https://github.com/user-attachments/assets/d767a3fe-c416-4a20-aec9-24622d811a24)


### After

![Screenshot 2025-06-16 at 4 06
14 PM](https://github.com/user-attachments/assets/aa699f84-ce42-4d0c-b7ba-548ed01bf432)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Scope: Frontend Automatically applied to PRs that change frontend components
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants