Automatic column & table width adjustment for editable mode.


My problem lies in Table not automatically adjusting its columns width and its own width upon switching to editable mode. This is applicable to text fields, dates and combo boxes. Below is a simple example with a date field.

Let’s say i have one column and one row in the table. If I switch to editable mode all I can see is the header and a scrollbar instead of awesome PopupDateField control. Here’s the code:

  public void init()
    final Window window = new Window("My Vaadin Application");

    final Table table = new Table();

    table.addContainerProperty("Date", Date.class, null);
    table.setPageLength(1); // we just need one row

    table.addItem(new Object[]{new Date()}, 0);

    final Button editButton = new Button("Edit");
    editButton.addListener(new Button.ClickListener()
      public void buttonClick(ClickEvent event)
        editButton.setCaption((table.isEditable() ? "Save" : "Edit"));

I realize that if I setPageLength to ‘2’ it will look just fine in this particular case but that’s because initially column width was sized for a huge date printout like “Wed Apr 13 21:58:07 EDT 2011”. In real life all I need is 2011-04-13 and if the column (and the whole table respectively) was initially sized for a short string like that then making the table editable will shift that date-choosing button of the PopupDateField control to the right and make it invisible. One can still reach it by resizing the column and scrolling to the right but then all the awsomeness is lost. Imagine you have 20 columns to resize manually - it’s a pain.

I would greatly appreciate any ideas on how to make table to adjust its width properly when switched to editable mode.


Creating a table with editable mode (initially) ‘on’ solves this problem.

However, the editable mode should stay ‘on’ until the table is rendered.

Question: How to switch the editable mode ‘off’ immediately after the table is rendered (without user intervention)?


I’d like to know the answer to this as well. Is there a way to control how the columns get resized (or force them to resize) when switching to edit mode?


I have a table with beanitemContainer. When I set table in edit mode, the fields inside the cell don´t get the column width size…how can i solve this??

I would like to know the answer to this as well. Is there a way to control how the column has been resized. (Or force them to scale) when switching to edit mode or not?