Skip to content

[BUG] - HeroUI Table Header not sticky with Virtualization #5149

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.

Sign up for GitHub

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

Jump to bottom
Closed
bowenw13 opened this issue Apr 4, 2025 · 4 comments · Fixed by #5184
Closed

[BUG] - HeroUI Table Header not sticky with Virtualization #5149

bowenw13 opened this issue Apr 4, 2025 · 4 comments · Fixed by #5184
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working

Comments

@bowenw13
Copy link

bowenw13 commented Apr 4, 2025

HeroUI Version

2.7.5

Describe the bug

The header is not sticky after scrolling down the virtualized table.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Reuse the Virtualized HeroUI Table

  • Adding isHeaderSticky prop
  • Replacing importing from @nextui-org/react with @heroui/table
  • Using getKeyValue() from @heroui/table
    But I'm only seeing the header sticky at the beginning.
    After I scrolled down to ~18 rows, the header went out of the top border.
    After I scrolled back to the top, the header came back again.

Expected behavior

When scrolling down the virtualized table, the header keeps sticky on the top.

Screenshots or Videos

Image

Operating System Version

macOS

Browser

Chrome
@linear Linear
Copy link

linear bot commented Apr 4, 2025

ENG-2380 [BUG] - HeroUI Table Header not sticky with Virtualization

@wingkwong wingkwong added 🐛 Type: Bug Something isn't working 📦 Scope : Components Related to the components labels Apr 6, 2025
@Hova25 Hova25 mentioned this issue Apr 11, 2025
Merged
@Hova25
Copy link
Contributor

Hova25 commented Apr 11, 2025

Hello i opened PR #5184 to fix this issue

@Hova25
Copy link
Contributor

Hova25 commented Apr 17, 2025

Hello, you can fix temporary this if you pass in Table props while waiting for the official fix

classNames: { table: "h-full", tbody: "after:block" }

@github-actions github-actions bot mentioned this issue Apr 19, 2025
Open
@bowenw13
Copy link
Author

Hello, you can fix temporary this if you pass in Table props while waiting for the official fix

classNames: { table: "h-full", tbody: "after:block" }

I verified it's working. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
📦 Scope : Components Related to the components 🐛 Type: Bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(table): sticky header & content placement in virtualized table Hova25/heroui
3 participants
@wingkwong @Hova25 @bowenw13