Skip to content
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

Table footer no longer fixed with when scrollable #17224

Open
1 of 4 tasks
monsieur-ricky opened this issue Dec 26, 2024 · 2 comments
Open
1 of 4 tasks

Table footer no longer fixed with when scrollable #17224

monsieur-ricky opened this issue Dec 26, 2024 · 2 comments
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Milestone

Comments

@monsieur-ricky
Copy link

Describe the bug

While migrating my app from PrimeNG v17 to version 19, I noticed that the table component is no longer working as expected.
The main issue that I'm reporting is the footer is no longer fixed when the table is scrollable. This issue can be tested in the official documents:

Image from the version 17 docs:
Screenshot 2024-12-26 at 11 59 47

Image from the version 19 docs:
Screenshot 2024-12-26 at 11 58 55

This is quite annoying because the table footer has relevant summary information that now requires the user to do a long scroll to the bottom of the table to view that information.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/baymtu58-2shz8rsa

Environment

Angular CLI: 19.0.6
Node: 20.16.0
Package Manager: npm 10.9.2
OS: darwin x64

Angular version

19.0.6

PrimeNG version

v19

Node version

20.16.0

Browser(s)

Chrome 131.0.6778.205

Steps to reproduce the behavior

To reproduce the issue:

  1. Access the official Table component documentation for version 19
  2. Go to the horizontal scroll demo: https://primeng.org/table#horizontal-scroll
  3. Scroll the table to check that the footer isn't fixed.

Expected behavior

To check the correct and desired behaviour:

  1. Access the official Table component documentation for version 17
  2. Go to the horizontal scroll demo: https://v17.primeng.org/table#horizontal-scroll
  3. Scroll the table to confirm that the footer is fixed.
@monsieur-ricky monsieur-ricky added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Dec 26, 2024
@mertsincan mertsincan added Status: Pending Review Issue or pull request is being reviewed by Core Team and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Dec 26, 2024
@mertsincan mertsincan added this to the 19.0.3 milestone Dec 26, 2024
@github-project-automation github-project-automation bot moved this to Review in PrimeNG Dec 26, 2024
@vcucchiara
Copy link

I have this same issue in v18. As a workaround, I added this to my component css

:host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tfoot {
position:sticky;
}

@monsieur-ricky
Copy link
Author

Yes, I've also did a temporary fix using CSS. Hopefully this will be fixed in 19.0.3.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Pending Review Issue or pull request is being reviewed by Core Team
Projects
Status: Review
Development

No branches or pull requests

3 participants