Table: Grouped header + horizontal scrolling body has regressed from pre v12.1.0 #11958
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
Describe the bug
Scrolling (Mainly horizontal)+grouped header leads to extremely broken layouts
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.
The text was updated successfully, but these errors were encountered: