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: Grouped header + horizontal scrolling body has regressed from pre v12.1.0 #11958

Closed
Phil-DS opened this issue Sep 21, 2022 · 4 comments
Closed
Labels
Resolution: Stale Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response Type: Bug Issue contains a bug related to a specific component. Something about the component is not working

Comments

@Phil-DS
Copy link

Phil-DS commented Sep 21, 2022

Describe the bug

Scrolling (Mainly horizontal)+grouped header leads to extremely broken layouts
Screenshot 2022-09-21 at 10 38 47

Environment

Been migrating from Angular 11 to angular 14, and the changes in #10495 for 12.1.0 has been detrimental to a fair few table layouts in my use case that worked previously. The issue here stems from the combination of a grouped/spanned header with horizontal scrolling (There are more columns that needed to be fitted on to the side). Without colgroup to keep things structured, it's a mess trying to keep things in line. If there is no width fixing, then the entire table squashes down, preventing horizontal scrolling. When trying to add some width to try fix the issues, the header and the body require 2 completely different methods to even try to fix the widths. Then, after all of that, they still don't stay in place.

I originally thought this was a part of #11715, but it's a bit more than that. Header grouping+scrolling is just a regression of functionality. The changes may have been useful elsewhere, but it has come at the expense of breaking existing features.

Reproducer

https://stackblitz.com/edit/table-groupedcol-scroll-issues

Angular version

14.1.0

PrimeNG version

14.1.1

Build / Runtime

TypeScript

Language

TypeScript

Node version (for AoT issues node --version)

16.13.0

Browser(s)

Chrome

Steps to reproduce the behavior

Add scrolling (Both directions) and grouped headers to the table.
See the results.

Scroll to the right of the table in the stackblitz

The second one tries to handle some fixed widths

Toggle scrolling on and off to see the difference.

Expected behavior

The columns should be able to line up correctly and responsively.

@Phil-DS Phil-DS added the Type: Bug Issue contains a bug related to a specific component. Something about the component is not working label Sep 21, 2022
@Phil-DS Phil-DS changed the title Table: Grouped header + horizontal scrolling body is a layout nightmare Table: Grouped header + horizontal scrolling body has regressed from pre v12.1.0 Sep 26, 2022
@Phil-DS
Copy link
Author

Phil-DS commented Nov 9, 2022

Going to check this out with the major changes from v14.2.0

@Phil-DS
Copy link
Author

Phil-DS commented Nov 9, 2022

Screenshot 2022-11-09 at 16 06 15

Will check more, but the update seems to fix this issue!

@github-actions
Copy link

This issue has been automatically marked as stale. If this issue is still affecting you with the latest version, please leave any comment, and we will keep it open. We are sorry that we have not been able to prioritize it yet. If you have any new additional information, please include it with your comment!

@github-actions github-actions bot added the Resolution: Stale Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response label Mar 10, 2023
@github-actions
Copy link

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you for your understanding!

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Mar 18, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: Stale Issue or pull request is inactivity and unfortunately it will be *closed* if there is no response Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

1 participant