feat: add option to freeze columns to end

[web-padawan]

Description

Fixes #3559

Notable features

The following features are relevant for freezing columns to end:

• Column reordering - frozen-to-end columns can be reordered while remaining frozen to end only
• Column resizing - frozen-to-end columns have resize handle on the left (start) to resize easier
• Keyboard navigation - when moving horizontally to a normal cell that is visually covered by frozen-to-end cell, the grid is scrolled so that normal cell would be fully visible, same as for normal frozen columns
• RTL support - frozen-to-end columns are positioned using JS, same as normal frozen columns

Type of change

• Feature

[DiegoCardoso]

If I make last two columns resizable and the last one being frozen-to-end, then I can see two resize handles next to each other. Also, resizing the frozen column looks a bit broken.

(first I am resizing through the second to last column's resize handle and then trying to resize from the frozen column)

grid-resize-column.mp4

[DiegoCardoso]

Hiding the resize handle makes it look better now.

There are two issues that I found while playing around while resizing the columns:

• if you shrink the last column too much, the layout still getting a bit broken as you can see on the recording below:

grid-column-shrink.mp4

I tried this without setting the last column with frozenToEnd and I could somewhat reproduce the issue, so maybe we can address this issue on a separate ticket:

• if you use the resize handle on the frozenToEnd column when the grid is scrolled to the end, then you cannot easily control the resizing as it happens too fast. Also on this video you can see that when you expand the column next to the frozen one, it expands beneath the frozen column, but there's no clear indication that it's working other than the scrollbar moving. The line showing that the frozen column is overlaying doesn't show immediately, only after scrolling the grid.

grid-resize-column-issue.mp4

[web-padawan]

Also on this video you can see that when you expand the column next to the frozen one, it expands beneath the frozen column, but there's no clear indication that it's working

We can try scrolling the grid horizontally in this case so that resize handle would be always visible.
But I'm not sure if this is a good idea. Checked Google Sheets and they do not work this way:

scroll.mp4

So it looks like resizing a column past the viewport is not technically supported there.
Instead, you can only resize as far as the available space on the screen.

BTW there is no support for columns frozen to the end in Sheets 🙂

[DiegoCardoso]

One thing we can try to do is to show the vertical line when resizing to the right makes the frozenToEnd column overlay the other column. Basically, this kind of resize makes scroll position move from the end of the horizontal scrollbar, so the vertical border would naturally appear on this case.

[web-padawan]

I've tried to implement this behavior, here is the result. Would this be good enough in your opinion?

scroll-resize.mp4

:

[DiegoCardoso]

I think it's better this way.

[web-padawan]

Added logic and test to implement the behavior described in #3566 (comment)

[DiegoCardoso]

Tested it and the visual indicator is indeed better.

Found two issue with resizing the column:

• First, after you resize the column before the frozen-to-end to expand, then when you click on the horizontal scrollbar, the grid returns to the first column (you can't see but I am clicking on the scrollbar thumb):

grid-scroll-issue.mp4

• I can still see the issue when the last column is shrunk past a certain point, when trying to expand it again makes the column look broken. It looks that the issue happens when we shrink the column using its own resize handle, but when we want to expand it back, we are using the handle from its sibling. And the column doesn't expand to take the available space left.

grid-column-shrink-bug.mp4

[web-padawan]

when you click on the horizontal scrollbar, the grid returns to the first column

Confirmed. I could reproduce it without frozenToEnd column also, see #3586

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
5 Code Smells

No Coverage information
0.0% Duplication

[web-padawan]

when the last column is shrunk past a certain point, when trying to expand it again makes the column look broken. It looks that the issue happens when we shrink the column using its own resize handle, but when we want to expand it back, we are using the handle from its sibling

Confirmed. This is partially caused by the fact that minimum header cell width is set to 10 here:

web-components/packages/grid/src/vaadin-grid-column-resizing-mixin.js

Lines 61 to 62 in e64e89e

	const minWidth =
	10 +

But the actual width of the resize handle is at least 18px (when frozen column is the last one):

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

Lines 220 to 222 in e64e89e

	[last-column] [part~='resize-handle']::before,
	[last-frozen] [part~='resize-handle']::before {
	width: 18px;

This magic number has been there since the original implementation: vaadin/vaadin-grid@fbed07c

I'm not sure if that's a good idea to use such a small "magic number" - it allows you to shrink the column so that it practically disappears. Maybe we could increase this hardcoded value to 35 so that column remains at least partially visible.

[DiegoCardoso]

Since we have tickets describing the issues raised on this PR, we can proceed with it and take care of them on separate PRs.

[vaadin-bot]

This ticket/PR has been released with Vaadin 23.1.0.alpha1 and is also targeting the upcoming stable 23.1.0 version.