Table

Topics from the Book

• most versatile, can present data, click for editing, include arbitrary UI
• data managed through Data Model / Container
• lazy loading - only visible part is loaded
• addContainerProperty() to add columns
• select item : setSelectable(true), setImmediate(true), addValueChangeListener(new Property.ValueChangeListener()...
• setMultiSelect(); setMultiSelectMode() controls keyboard behaviour
• various features - see doc
  • setPageLength() - number of visible items
  • setColumnWidth() / user can resize
  • setColumnReorderingAllowed()
  • setColumnCollapsingAllowed()
• Components inside table
  • if rows are higher than defined in default theme, needs to define in a custom theme
  • component do not know about the atable or specific item in which it is contained, need to design a method to be able to
    • setData() to attach an object to component to identify
    • subclass the component and include the ID
    • search the entire table to find the item (not recommended)
  • see example here
• getItemIds() get a collection of item IDs in the table
• filtering - if data source implements Filterable interface
• editing
  • place item in component then add into table
  • setEditable(true)
    • component defined in a TableFieldFactory (interface)
    • implementing keyboard navigation
• column header and footers
  • header - enabled by default, table.setColumnHeader()
  • footer - setFooterVisible(); setColumnFooter()
  • can add click event
• generated columns
  • ColumnGenerator (interface)
  • table.addColumnGenerator()
  • set field's immediate in TableFieldFactory
• formatting columns
  • toString() is used by default
  • use ColumnGenerator() to generate a second column and set original invisible
  • use PropertyFormatter() as a proxy (awkward)
  • override formatPropertyValue() in table (example given)
• css styling - for row or individual cell

Table Content Wrap

Someone gave an example of making text content wrap in table, also remove horizontal scroll bar. Link is here. My tested code here:

        table.setHeight("100%");

        table.setWidth("100%");

        table.setPageLength(0);

        table.setColumnWidth("title", 55);

        table.setColumnExpandRatio("description", 1);

        table.setContainerDataSource(new BeanItemContainer<Person>(createTestData()));

        table.setVisibleColumns(new String[] { "name", "description" });

  // Insert your own theme rules here

    .v-table-cell-wrapper {

        white-space: normal;

    }

                            <!-- Comment out compile-theme goal to use on-the-fly theme compilation -->

                            <!--  <goal>compile-theme</goal> -->

It seems the most important part is:

• Set table width and column expansion ratio so table width and column width will be adaptable
• style sheet
• in pom, comment out compile-theme so theme will be compiled on-the-fly, this is only for test/debug purpose. not to be used in production

Table Width and Column Width Distribute

table.setWidth() sets table width, for example, 100%

This sets the width to hold the columns. However, setting table width does not guarantee the actual contents (that is, all columns) be that size. When all columns exceeds the table width, slide bar appears (which many does not like). When not enough to fill table width, a gap appears.

If initially column expansion is set, then the columns will fill exactly the table width, and in fact the columns will adjust as table width (actual width) changes - for example table is in a horizontal split panel.

However if user drags to adjust width of a column, the automatic adjustment is broken (table does not know what to do).

To solve this, either disable column resize, or make it smart.

To disable column resize, one way is to addColumnResizeListener and just reset the sizes. (so override user adjusement).

Another way, someone mentioned to set the resizer element on page to not display (so effectively prevent people from dragging it). Example as follows, it may depend on the theme. Have not tried yet.

.i-table-resizer {

width: 0px !important;

}

or

.i-table-resizer {

display: none;

}

Coloring Table Cell

Below works, but only cells are changed (table header not).

public static class ColumnHighlighter implements CellStyleGenerator {

Integer pid;

public ColumnHighlighter(Integer id){

pid = id;

}

@Override

public String getStyle(Table source, Object itemId, Object propertyId) {

if (propertyId instanceof Integer && propertyId.equals(pid)) {

return "cellhighlight";

}

return null;

}

}

    ...... t.setCellStyleGenerator(new ColumnHighlighter(colId));

Note CSS should be:

.v-table-cell-content-cellhighlight {

background-color: yellow;

}

Also someone mentioned how to highlight table header cell here, and it works:

.v-table-header-cell:nth-child(2) {

background : red;

}

book - "Alternatively, you can use a Table.ColumnGenerator (see Generated Table Columns) to generate the actual UI components of the cells and add style names to them."