nested Table and sizes

Hello everyone,

I have a question about tables.

I created a simple example:


        final Window main = new Window();
        final Table t = new Table();
        t.addContainerProperty("x", String.class, null);
        t.addContainerProperty("tabelle", Table.class, null);
        final Table t2 = new Table();
        t2.addContainerProperty("y", String.class, null);
        t2.addContainerProperty("-", String.class, null);
        t2.addItem(new Object[] { "y", "-" }, 1);

        t.addItem(new Object[] { "x", null }, 1);
        t.addItem(new Object[] { "x", t2 }, 2);
        t.addItem(new Object[] { "x", null }, 3);

        t.setWidth(100L, Component.UNITS_PIXELS);
        t2.setWidth(100L, Component.UNITS_PIXELS);

        main.addComponent(t);
        setMainWindow(main);

The result is following:

As you can see there are two problems.
First: SetWidth() does nothing. SetSizeFull() does set the width to 100%
Second: The height. The height of the inner table is huge without a reason. And so becomes the third row of the outer table.

Can you help me?

You might want to change UNITS_PIXELS to UNITS_PERCENTAGE. Secondly, a table is by default 15 rows high; to change this, call Table.setPageLength() with how many rows you want to have. 0 disables scrolling, making the table as tall as there are rows.

Haha, bingo bongo! Thank you. Both suggestions are super correct :grin:

If I can ask one more question:

Can I tell columns or tables to line break instead of making horizontal scroll bars?

final Window main = new Window();                                                               
final Table t = new Table();                                                                    
t.addContainerProperty("x", String.class, null);                                                
t.addContainerProperty("tabelle", Table.class, null);                                           
final Table t2 = new Table();                                                                   
t2.addContainerProperty("y", String.class, null);                                               
t2.addContainerProperty("-", String.class, null);                                               
t2.addItem(                                                                                     
    new Object[] {                                                                              
                    "y",                                                                        
                    "- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -" // Imagine a lot of  - - - to fill your giant screen
    1);                                                                                         
                                                                                                
t.addItem(new Object[] { "x", null }, 1);                                                       
t.addItem(new Object[] { "x", t2 }, 2);                                                         
t.addItem(new Object[] { "x", null }, 3);                                                       
                                                                                                
t.setWidth(100L, Component.UNITS_PERCENTAGE);                                                   
t2.setWidth(100L, Component.UNITS_PERCENTAGE);                                                  
t.setPageLength(0);                                                                             
t2.setPageLength(0);                                                                            
                                                                                                
main.addComponent(t);                                                                           
setMainWindow(main);                                                                            

That’s a difficult one; I’m not sure there is a simple fix for it. You could try the
word-wrap
CSS attribute on the table cells.

Hi Thomas,

thanks a lot for your answer. word-wrap does not really solve this because I have white spaces.
So I added this style declaration to my CSS file


.dynamic-cell-heights .v-table-cell-wrapper {
	white-space: normal;
}

When I add the style name “dynamic-cell-heights” to the table, I can fix this behaviour. But this can lead to some problems with the table size (the tables sometimes are taller than necessary). This is not 100% satisfying but at the moment it is a solution.