diprokon / ng-table-virtual-scroll

Virtual Scroll for Angular Material Table
https://diprokon.github.io/ng-table-virtual-scroll
MIT License
135 stars 42 forks source link

Column width changes on scroll #23

Closed TheoMuffin closed 3 years ago

TheoMuffin commented 4 years ago

Hello!

It's distracting when column width or position changes when scrolling, the items are no longer aligned vertically. What I mean is that tables are good for aligning items horizontally and vertically, it's visually jarring to have columns jiggling around like that.

A very good example of this is the Table with filter, sort and selection example: https://diprokon.github.io/ng-table-virtual-scroll/#/examples I have the same problem, albeit less extreme because text length does not vary that much I think.

diprokon commented 4 years ago

The problem is, that table is not rendering all elements at once, and it recalculates cell width after each change. To prevent this, you can manually set width of columns by css or set css property 'table-layout: fixed;' to the table.