You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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
The text was updated successfully, but these errors were encountered:
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.
![image](https://private-user-images.githubusercontent.com/18258317/330733369-c09b6fbd-390b-45d1-9977-440fb3b0cfa7.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDExODMsIm5iZiI6MTcyNDEwMDg4MywicGF0aCI6Ii8xODI1ODMxNy8zMzA3MzMzNjktYzA5YjZmYmQtMzkwYi00NWQxLTk5NzctNDQwZmIzYjBjZmE3LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIwNTQ0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWY5ZjQwZmYyNmZlNGQ2MjYyOTI5ZjYyZjUyNWIwZTdiZjQ5NzQ5YzE1NzY5OGVjM2YwMDJmZjlhZTcwOTU0Y2MmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.4qleGeIDjiXpo86hKShAfxY3WutLFCuBVphQXn6CYp4)
![image](https://private-user-images.githubusercontent.com/18258317/330733420-4331b666-ee6b-4f41-9727-4970d578c950.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQxMDExODMsIm5iZiI6MTcyNDEwMDg4MywicGF0aCI6Ii8xODI1ODMxNy8zMzA3MzM0MjAtNDMzMWI2NjYtZWU2Yi00ZjQxLTk3MjctNDk3MGQ1NzhjOTUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE5VDIwNTQ0M1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc4Y2QzNGRhOWJlZTZkZjRhMjBmMTJlNzViMmQzNDcxNTQzM2FjZWY3MjMzZGQ0NTQzMzhlMTliNDIwNWU0MDImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.G-Ckbvw9xE8CdnZgbPTa-4_Acxs7TgEwTIEnPF5BG3I)
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:
Describe alternatives you've considered
A few approaches I tried:
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.
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.
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.
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
The text was updated successfully, but these errors were encountered: