WrappingGrid extension does not look correct on initial load

Question

I am using the GridExtensionPack add-on so I can wrap the headers in my Vaadin 7 app. For some reason it does not look good on the initial load, and requires a few "refreshes" (for lack of a better term) to get it to look good/reasonable. What am I doing wrong?

Here is what I mean, and this is how it looks before I click "Turn Wrapping Off", where wrapping is turned on by default: .

And here it is after clicking the button 1 time, where wrapping is turned off:

And here it is after clicking button a second time, where wrapping is turned back on:

I adapted this example code from the demo here, to build this full class:

package com.mobiwms.website.view.demo;

import java.util.Random;

import org.vaadin.teemusa.gridextensions.cachestrategy.CacheStrategyExtension;
import org.vaadin.teemusa.gridextensions.client.tableselection.TableSelectionState.TableSelectionMode;
import org.vaadin.teemusa.gridextensions.tableselection.TableSelectionModel;
import org.vaadin.teemusa.gridextensions.wrappinggrid.WrappingGrid;

import com.vaadin.event.ShortcutAction.KeyCode;
import com.vaadin.server.Responsive;
import com.vaadin.shared.ui.MarginInfo;
import com.vaadin.ui.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;
import com.vaadin.ui.themes.ValoTheme;

@SuppressWarnings("serial")
public class HeaderWrappingDemoWindow extends Window {

    public static final String ID = "plan-info-window";
    private HeaderWrappingDemoWindow(boolean wrapInitially ) {
        addStyleName("profile-window");
        setId(ID);
        Responsive.makeResponsive(this);

        setModal(true);
        addCloseShortcut(KeyCode.ESCAPE, null);
        setResizable(true);
        setHeight(90.0f, Unit.PERCENTAGE);
        setWidth(75.0f, Unit.PERCENTAGE);
        setClosable(false);

        VerticalLayout content = new VerticalLayout();
        content.setSizeFull();
        content.setMargin(new MarginInfo(true, false, false, false));
        setContent(content);
        
        content.addComponent(buildHeader());
        
        HeaderWrapExtensionLayout info = new HeaderWrapExtensionLayout(wrapInitially);
        content.addComponent(info);
        content.setExpandRatio(info, 1f);
        
        content.addComponent(buildFooter());
    }

    private Component buildHeader() {
        HorizontalLayout footer = new HorizontalLayout();
        footer.addStyleName(ValoTheme.WINDOW_BOTTOM_TOOLBAR);
        footer.setWidth(100.0f, Unit.PERCENTAGE);

        Button ok = new Button("Close");
        ok.addStyleName(ValoTheme.BUTTON_PRIMARY);
        ok.addClickListener(e->close());
        ok.focus();
        footer.addComponent(ok);
        footer.setComponentAlignment(ok, Alignment.TOP_RIGHT);
        return footer;
    }
    
    private Component buildFooter() {
        HorizontalLayout footer = new HorizontalLayout();
        footer.addStyleName(ValoTheme.WINDOW_BOTTOM_TOOLBAR);
        footer.setWidth(100.0f, Unit.PERCENTAGE);
        
        return footer;
    }

    public static void open(boolean wrapInitially ) {
        Window w = new HeaderWrappingDemoWindow(wrapInitially);
        UI.getCurrent().addWindow(w);
        w.focus();
    }
    
    private class HeaderWrapExtensionLayout extends VerticalLayout {

        private static final String BUTTON_WRAPPING_ENABLED_TEXT = "Turn wrapping off";
        private static final String BUTTON_WRAPPING_DISABLED_TEXT = "Turn wrapping on";
        private int state;

        public HeaderWrapExtensionLayout(boolean wrapInitially) {

            setMargin(true);

            final Grid grid = new Grid();
            final WrappingGrid wrap = WrappingGrid.extend(grid);

            TableSelectionModel selectionModel = new TableSelectionModel();
            selectionModel.setMode(TableSelectionMode.SHIFT);
            grid.setSelectionModel(selectionModel);

            generateData(grid, 5, 100);

            Grid.HeaderRow headerRow = grid.prependHeaderRow();
            headerRow.join(grid.getColumns().get(1).getPropertyId(), grid.getColumns().get(2).getPropertyId());

            Grid.HeaderRow headerRow1 = grid.appendHeaderRow();
            headerRow1.join(grid.getColumns().get(2).getPropertyId(), grid.getColumns().get(3).getPropertyId());

            grid.setWidth("100%");
            grid.setHeight("100%");

            final Button button = new Button(BUTTON_WRAPPING_DISABLED_TEXT);
            button.addClickListener(new Button.ClickListener() {
//              int state = 0;

                public void buttonClick(ClickEvent event) {
//                  state = (state + 1) % 2;
                    switch (state) {
                    case 0:
                        // Disable wrapping, attempt to restore original behavior
                        wrap.setWrapping(false);
                        button.setCaption(BUTTON_WRAPPING_DISABLED_TEXT);
                        state = 1;
                        break;
                    case 1:
                        // Apply wrapping rules
                        wrap.setWrapping(true);
                        button.setCaption(BUTTON_WRAPPING_ENABLED_TEXT);
                        state = 0;
                        break;
                    }
                }
            });

            addComponent(button);
            addComponent(grid);

            CacheStrategyExtension.extend(grid, 5, 0.2d);
            
            if(wrapInitially)
            {
                wrap.setWrapping(true);
                button.setCaption(BUTTON_WRAPPING_ENABLED_TEXT);
                state = 0;
            }

        }

        private void generateData(Grid g, int cols, int rows) {
            g.addColumn("#");
            for (int x = 1; x < cols; ++x) {
                g.addColumn("Column with really long title " + (x + 1), String.class);
            }

            Random r = new Random();
            for (int y = 0; y < rows; ++y) {
                String[] values = new String[cols];
                values[0] = "" + (y + 1);
                for (int x = 1; x < cols; ++x) {
                    values[x] = "" + r.nextInt() + " babies born last year";
                }
                g.addRow(values);
            }
        }
    }
}

I have code that opens the window with HeaderWrappingDemoWindow.open(true), thus turning wrapping on by default (before it gets displayed to browser).

I have tried various things, nothing works. My current working theory is that I need to turn wrapping on AFTER the screen is displayed, but so far no one can tell me how to do that. I think this because the demo code does not turn it on by default, it requires the user to click a button. So attacking the issue from a different angle, and asking the question a different way.

Incidentally, I did try one obvious solution: don't call setWrapping(true) until it is attached, but that didn't work. Basically, I replaced

            if(wrapInitially)
            {
                wrap.setWrapping(true);
                button.setCaption(BUTTON_WRAPPING_ENABLED_TEXT);
                state = 0;
            }

with

            if(wrapInitially)
            {
                addAttachListener(e->{
                    wrap.setWrapping(true);
                    wrap.setWrapping(false);
                    wrap.setWrapping(true);
                    button.setCaption(BUTTON_WRAPPING_ENABLED_TEXT);
                    state = 0;
                });
            }

and it still looked wrong on initial load. Looks like the Grid has to have wrapping turned off and on at least one time to get it to work. This is even true in my real world example (far more complex then this one).