Skip to content
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.

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

Vaadin Grid fill remaining space with empty column #7413

Open
probert94 opened this issue May 15, 2024 · 0 comments
Open

Vaadin Grid fill remaining space with empty column #7413

probert94 opened this issue May 15, 2024 · 0 comments
Labels
enhancement New feature or request vaadin-grid

Comments

@probert94
Copy link

probert94 commented May 15, 2024

Describe your motivation

By default, the remaining space in a vaadin grid is left blank. On desktops this looks a little strange and the space is completly lost.
I would like to have some kind of empty column that fills the remaining space and continues with the grid lines.
That way, while the space is still lost (i.e. displays no data), it at least allows you to select the row by clicking on it.
Also it looks better to me (and our clients) then the empty space.

Describe the solution you'd like

I would like to have an empty, not removable, resizable, draggable column at the end of the grid, that takes up the remaining space.
As long as any of the real columns have a flex-grow > 0 or the grid has a horizontal scrollbar, the empty column is not needed.
A click on a row in this column should be the same as a click on any other column.
Example screenshot of current vs. wanted behavior:
image
image

Describe alternatives you've considered

A few approaches I tried:

  • Automatically set at least one column to flex-grow:
    Unfortunately there are cases in which growing makes no sense for any of the columns and would result in data being split on the left and right of the screen, while the middle is empty.
    Also resizing the columns manually would remove the flex-grow and result in the empty space again.
  • Add an empty column with frozen to end and flex-grow 1, using the Vaadin Flow API.
    That way it isn't possible to have another column use the full remaining space, as the empty columnd would always use part of the empty space as well.
  • Add style that just shows the row borders.
    As there are no cells and the grid adds the border to the cells, it is pretty hard to get the exact same border on the empty space.
    Also that way it is not possible to select the items by clicking on the empty space.
  • Add the empty column dynamically using client-side code.
    Thats the approach I am currenlty using. Basically, I listen to colum-resize, changes to flex-grow of any column and changes to the grid collumns and check if an empty column is needed. If it is, I add one at the end of the grid (frozen-to-end, flex-grow=1 and width=0), if not I remove it again.
    This works quite good but is pretty ugly as I have to change private methos of vaadin grid which might change in future.
    Also the column still has a visual drag effect, even if it cannot be reordered.

Additional context

Flow: 24.3.10
Vaadin: 24.3.11

@web-padawan web-padawan added enhancement New feature or request vaadin-grid labels May 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request vaadin-grid
Projects
None yet
Development

No branches or pull requests

2 participants