How to set up Grid width properly?

Vaadin 6 / 7 / 8
1

Hi,

I am struggeling with the width property of a Grid. Honestly I think a Grid should be able to set its width automatically based on the content and the available space, but obviously it cannot. So I tried to set fixed column width for each column and undefined width for the Grid but the result is a fixed width of 500px with empty space if the columns in sum do not have width more than 500px respectively a scrollbar if they do. So please, what is the use of “setWidthUndefined” of Grid, if it results all the time in a fixed width of 500px? And please, how can I set up the width of a Grid based on the contents properly?

PS: Each day I have new problems with Grid, compared to Table it seems to be slow, bad to display simple data (numbers stored in lists), hard to style properly, bad in customizing (e.g. headerclicks, signle rows with components inside), … I could continue this list. What exactly is the advantage of Grid compared to the well-known and broadly used Table object? On my point of view, it is really annoying that Table was removed, although Grid is not able to provide the same features.

2

Hi Patrik! Sorry to hear about the trouble Grid is giving you.

I don’t think an undefined wide grid has ever been considered as a feature we should support, but I do understand it might be needed occasionally. Not sure how hard it would be to implement and support that in the current Framework version.

If it’s any comfort, the next generation grid, the

web component, can support this behavior, at least partly. With a small CSS override, the width of the grid is determined by the width of the columns. The newer grid won’t adjust the width of the columns based on the content, though, so you will have to have fixed column widths instead.

The newer grid implementation should also be much faster (as it doesn’t have to support all ancient browsers like IE8, for example), and is a lot more customizable and easier to style.

You can already try the new grid out in the Vaadin 10 developer preview (and hopefully soon in a beta).

3

Here’s a quick test how to do it (in HTML/JS): https://jsfiddle.net/sk4xg81e/1/

Edit, updated example: https://jsfiddle.net/sk4xg81e/2/

Note, that the CSS is using unsupported ID selectors, so there’s no guarantee it will work with future versions.

4

Dear Jouni,

thank you for your quick reply.

To be honest, neither web components nor Vaadin 10 will help me right now to continue mirgrating from Vaadin 7 to 8. So in fact I need to implement kind of calculation of the width I need to display my data and set this as a fixed value, right?