Grid and Column Resize ?

Hi guys,

The new Grid component that replaces the Table looks good - nice job. We have started to implement it into our web application that deals with very large set of data. Performance wise, we are happy.

However, it seems not possible to allow end user to manually resize a column (as the table did allow). It seems a very basic and so common need that I’m surprise we can’t do that with a stable and released component.

Unfortunately, without this capability we can’t use the Grid at all since we have column that holds very long text, so the whole purpose of the display gets useless… Is there any simple way to implement that feature? Do you guys plan to release that feature anytime soon?

It really seams something very basic and we’d love to use the Grid - but we really need that feature first.

Thanks and keep-up the good work!

While the functionality may seem trivial and a basic requirement, it’s not a trivial thing to incorporate into Grid. If it was, it’d be there already :slight_smile:
The feature is a high priority item in the backlog, though, and we’re constantly working towards getting it in.

Hi Patrik, do you have ticket number for this already so we can vote for it and promote? This is for us a big deal.


Hi, Francois

The ticket you’re looking for is here:

I’ve been told we’re going to be discussing this issue later today. Any implementation of it will go to, at the earliest, the 7.6 branch. I’ll try to remember to update this forum post once we’ve got something along the lines of drag-to-resize columns.

You might want to check out the pre-release Vaadin builds (i.e. 7.6 alphas) at
- click the “7.6.0.alpha” link in the right “Pre-releases” column, and add the pre-release repository definition to ivy.xml

<repository> <id>vaadin-prereleases</id> <name>Vaadin Pre-releases</name> <url></url> </repository> If you’re using maven, also add the following

<name>Vaadin Pre-release Maven Plugin</name>

…of course, also remember to update the vaadin.version variable to 7.6.0.alpha5 (or whatever alpha is the latest) :wink:



Work on this feature starts this sprint; we’ll know more in about two weeks’ time. So far, getting very basic support looks promising, while covering all use- and edge cases seems like a long-term endeavor.
Like I said earlier: if it’d be simple, it’d be implemented already. :slight_smile:


I know, sometimes “simple” UX options are not that simple to implement…

Have fun with this one :wink:

It is with great pleasure that I leak this bit of confidential company information: about an hour ago, after over two weeks of arduous work, a patch for Grid that brings working resize handles to the default header row has been merged to the master branch. This means that it’s just become a picking candidate for the 7.6 alphas/betas, and we can begin work towards making this feature match the quality standards required by the company.

So: what works? The default header row has gained resize handles, which can be used to adjust column widths.

What doesn’t work yet? Pretty much everything else: control API is missing, TestBench Elements API is missing, drag handles are not generated for anything except the default row, there’s no comprehensive regression test suite… and then there’s everything else that we in the Framework team are bound to find out about once this feature starts getting testing.
Still, this is a solid start, and we
to have this feature ship with Vaadin 7.6.

Known issues: making a column narrow enough messes up the header row rendering.

We’ve deployed a demo on an internal snapshot build to test this feature.
Try it out here:

Problems identified thus far:

  • Resizing is very slow on Firefox. This is pretty much the result of Firefox being slower at DOM operations in general, and the Grid needing a lot of them. We’ll try to figure out some kind of workaround.
  • Resized column drifts, especially noticable on Firefox. This is exposed by the demo, which tries to automatically readjust column widths when one column is resized. The root cause is that the initial size of the column is measured once, when the drag operation starts, and not continuously. Measuring continuously, however, is going to result in a lot of DOM recalculations being done, so an alternative solution needs to be found.
  • Enabling editor after one resize operation reverts the resize. [edit]
    This is most likely caused by information about the resized columns not propagating back to the server, which then resets the column configuration when the Editor is activated.
  • If you manage to move the mouse quickly enough outside the window bounds and then release the mouse button (again, quickly enough; the slowness of Firefox makes this easier), the mouse up event is not registered by the browser, and the resizing gets stuck to the cursor until you click again. We’ll probably need to introduce a fudge for this. :slight_smile:

If you find anything else, please report it.

Hey Patrik,

this looks promising! I can’t wait to have this ready.
If we find something else, we will report.

Thanks and keep up the good work.