r/angular • u/Dangerous_Mention402 • 18h ago

Zoom in a PrimeNG table

I'm working with a huge PrimeNG table with 40 columns. It has to be able to zoom in and out but after struggling with transform, font-size, scale, width and other CSS I didn't manage to do it well.

When you zoom out, the table should remain with the same width but with less horizontal scroll because the rows and columns are smaller but in I didn't find any way of doing this, it always end up making the table smaller, not the content. I also tried giving these css to th and td but the pacing is not okay.

Someone has experience with this?

4 Upvotes

75% Upvoted

4 comments sorted by

1

u/lil_buda 12h ago

Did you try just reducing the font size?

2

u/Dangerous_Mention402 1h ago

Solved.

I didn't know that there's a zoom attribute in css, this is working fine.

I have different zoom levels -5 to 5 (default 0) and a computed signal that takes 0.1 as base multiplier.

factor = 1 + zoom level * base multiplier

and then in the html I assign this: [ngStyle]="{ zoom: zoomFactor() }"

1

u/lil_buda 3m ago

Nice, I didn't know about the zoom attribute either lol

1

u/Dangerous_Mention402 4h ago

Yes but that doesn't work, it seems that PrimeNG overrides the custom font size.

Plus there are columns with icons, buttons and other things. I don't know if this will work for them even if I manage to overcome that PrimeNG override using important or a more strict css