[grid] Add web component logic to freeze column to end

[web-padawan]

Description

Web component part of #2046 and vaadin/platform#2819

• Add property similar to frozen to ColumnBaseMixin that freezes column to the right
  • Property / attribute name to be decided, could be frozen-to-end or frozen-trailing
• Add attribute similar to last-frozen for styling, e.g. first-trailing-frozen
• Disallow freezing column normally and freezing the same column to the end
• Adapt existing tests for frozen columns to also cover columns frozen to the end

Early prototype: #2046 (comment)

[jouni]

Property / attribute name to be decided, could be frozen-to-end or frozen-trailing

Why can't it be the same property/attribute, frozen? The difference is in what end of the grid viewport the column naturally resizes, which decides if it stays fixed at the beginning or end of the viewport. Consider the standard position: sticky for comparison.

We likely will need a first-frozen, similar to last-frozen, though. Not sure if those are the best names, we could consider better ones and deprecate last-frozen if we come up with something better.

[tomivirkki]

Also see #1481

[jouni]

Though, now that I think about it, standard CSS does make the distinction in the way that you have to define the left or right offset for sticky elements. So perhaps it is actually the same here, that the developer has to choose which side to freeze/fix.

[web-padawan]

Good point about sticky columns. But I don't understand how can we reuse the same frozen attribute because of:

web-components/packages/grid/src/vaadin-grid-styles.js

Line 169 in b6c2cbd

transform: translateX(calc(-1 * var(--_grid-horizontal-scroll-position)));

the developer has to choose which side to freeze/fix.

This is why I suggested to have separate property / attribute. It would obviously mean some code duplication.

[jouni]

So perhaps it is actually the same here, that the developer has to choose which side to freeze/fix.

I had to test this, and it seems you can actually provide both left: 0; and right: 0; for a sticky element, and it will remain within the scrolling region, fixed to either the left or right end depending on the scroll position.

So, if we know the width of all columns preceding and following a column, I think it might be possible. Not sure if that’s more or less complex than the current implementation, and if any added complexity is worth the simpler API (with just one frozen prop/attr).