In TableModule The Colgroup And/or PTemplate="colgroup" Not ...

Skip to content Dismiss alert {{ message }} primefaces / primeng Public

• Notifications You must be signed in to change notification settings
• Fork 4.6k
• Star 10.8k

• Code
• Issues 551
• Pull requests 35
• Actions
• Projects 1
• Wiki
• Security
• Insights

Additional navigation options

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 In TableModule the colgroup and/or pTemplate="colgroup" not working in table after update 12.1.0 and above #10618 Closed darckyn opened this issue Sep 14, 2021 · 6 comments Closed In TableModule the colgroup and/or pTemplate="colgroup" not working in table after update 12.1.0 and above #10618 darckyn opened this issue Sep 14, 2021 · 6 comments

Comments

Copy link

darckyn commented Sep 14, 2021

I'm submitting a ... (check one with "x") [ x ] bug report => Search github for a similar issue or PR before submitting [ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap [ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35 Plunkr Case (Bug Reports) Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted. https://stackblitz.com/edit/github-zc95bl?file=src/app/app.component.html Current behavior After I upgraded to version 12.1.0 the inside pTemplate="colgroup" the 'width' of stopped working. pTemplate="colgroup" and/or not working the width if using paginator and scrollable at same time in p-table module (TableModule 'primeng/table') Expected behavior pTemplate="colgroup" and/or working as in versions 12.0.2 and earlier Last stable version 12.0.2 Minimal reproduction of the problem with instructions pTemplate="colgroup" and/or not working the width of if using paginator and scrollable at same time What is the motivation / use case for changing the behavior? Please tell us about your environment: Linux Mint, Visual Studio Code Angular version: 12.2.5 PrimeNG version: 12.1.0 Browser: [all] Language: [all | TypeScript 4.3.5 | ES6/7 | ES5] Node (for AoT issues): node --version = v14.17.6

All reactions Copy link

MuhSchaf commented Oct 19, 2021

Hey there, The PrimeNg staff posted, that since 12.1.0 that the colgroups template is removed: https://github.com/primefaces/primeng/wiki/Migration-Guide If you tell, what you try to achieve, may i can pinpoint how to achieve it, with the actual release.

All reactions Copy link

sven42 commented Oct 21, 2021 • edited Loading

I am using Primeng 12.2.1 and found that <ng-template pTemplate="colgroup"> is still rendered and it works at least in plain tables. It does not work always with scrollable tables.

All reactions Copy link Author

darckyn commented Oct 26, 2021

Hi @MuhSchaf I need to use different column widths in the table and these widths be respected both in the header and body of the table dynamically. Something like this: <colgroup> <col *ngFor="let col of columns" [ngStyle]="{'width': col.header === 'Desc' ? '250px' : col.header === 'Seq' || col.header === 'Mult' || col.header === 'Est' || col.header === 'IPI %' ? '60px' : '150px'}"> </colgroup> Tks

All reactions Copy link

MuhSchaf commented Oct 27, 2021

Hey @darckyn So this is my idea: <th *ngFor="let...." [ngStyle]="{'flex': col.header === 'Desc' ? '0 0 250px': ....}"></th> <td *ngFor="let...." [ngStyle]="{'flex': 'col.header === 'Desc' ? '0 0 250px': ....}"></td> And here is my reason: The new version of PrimeNg's table uses flex-container for their rows and cells. And as stated here https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis - flex-basis has priority above width. So everytime you want to set a specific width for your column, you need to set it as a flex value. The best flexbox - guide i've found til today: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Wish you a pleasant week Be blessed

👍 2 darckyn and asiam9 reacted with thumbs up emoji All reactions

• 👍 2 reactions

Copy link Author

darckyn commented Oct 27, 2021

I am using Primeng 12.2.1 and found that <ng-template pTemplate="colgroup"> is still rendered and it works at least in plain tables. It does not work always with scrollable tables. Hi @sven42 . I just use the scrollable tables.... tks for the help :)

All reactions Copy link Author

darckyn commented Oct 27, 2021

Hey @darckyn So this is my idea: <th *ngFor="let...." [ngStyle]="{'flex': col.header === 'Desc' ? '0 0 250px': ....}"></th> <td *ngFor="let...." [ngStyle]="{'flex': 'col.header === 'Desc' ? '0 0 250px': ....}"></td> And here is my reason: The new version of PrimeNg's table uses flex-container for their rows and cells. And as stated here https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis - flex-basis has priority above width. So everytime you want to set a specific width for your column, you need to set it as a flex value. The best flexbox - guide i've found til today: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Wish you a pleasant week Be blessed Thanks @MuhSchaf . Now I have a starting point to be able to adjust the tables to the new pattern. I understand that these changes are important to improve performance, but they bring a lot of rework. Thank you so much for all the help.

All reactions darckyn closed this as completed Oct 27, 2021 Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment Assignees No one assigned Labels None yet Projects None yet Milestone No milestone Development

No branches or pull requests

3 participants You can’t perform that action at this time.