Tree and Table Enhancements

Tree and Table are the most powerful widgets in RAP. Not only can they easily display vast amounts of data (thanks to JFace and virtual rendering) in various ways, they also feature some additional functionality in RAP compared to their SWT counterparts.

The following is a list of hints you might find helpful when working with Tree or Table.

JFace support:

RAP includes it's own JFace implementation that can be used to sort, filter and edit data in Trees and Tables. Simply create Tree/Table viewers instead of the widget itself. RAP-specific features can still be enabled by accessing the widget within the viewer directly. Example:

viewer.getTable().setData( RWT.MARKUP_ENABLED, Boolean.TRUE );

Fixed Columns:

When a table or tree displays many columns, the user often has to scroll horizontally to see specific data. Doing so means losing sight of the first columns, which may contain vital information that should be visible at all times. Using RWT.FIXED_COLUMNS, it is possible to exclude any number of leftmost columns from scrolling, so that they always stick on the left border of the tree or table.
Example:

tree.setData( RWT.FIXED_COLUMNS, new Integer( 1 ) );

Markup Support:

You can greatly enhance the look and interactivity of any Tree or Table using the RAP markup feature.

Line breaks in Columns:

Unlike SWT, RAP supports line breaks ( \n ) in a columns text property.

Virtual rendering and performance:

There are two ways Tree and Table support virtual rendering. First, any tree/table will only render HTML for the data that is currently visible on screen. (Unlike List, which always renders it's entire content.) Second, if the widget (or viewer) is created with a VIRTUAL flag, items can be created lazily. As a result, data that is not visible will also not be transferred to the client, saving even more memory and initial rendering time.

The drawback of these features is a slight impact on performance when scrolling. If you experience unsatisfying performance while scrolling, try reducing the number of columns, or hide some columns (setting width to zero). When using the VIRTUAL flag, you will also experience a small rendering delay when scrolling to previously unseen data. You can reduce this effect by pre-caching data you assume will be displayed in the near future. A very basic implementation of such a feature could look like this:

ScrollBar bar = viewer.getTable().getVerticalBar();
bar.addListener( SWT.Selection, new Listener(){
  public void handleEvent( Event event ) {
    Table table = viewer.getTable();
    int index = table.getTopIndex();
    int max = Math.min(  index + 100, table.getItemCount() );
    for( int i = index; i < max; i++ ) {
      table.getItem( i ).getText();
    }
  }
} );

Selection/Hover rendering order

Any item and every cell of an item may have a custom background to highlight a specific unit of data. In SWT (and RAP, by default), hovering or selecting such an item will completely overlay these backgrounds, essentially removing onscreen information. This behavior can be configured in RAP using the CSS Theming API. Note that any item that has a background set on all cells (or the item itself), will only be identifiable as selected by the text color, or not at all (if there is also a custom foreground set).

In addition to the TableItem / TreeItem theming elements, there are also Table-RowOverlay / Tree-RowOverlay elements. In the default theme, these overlay elements are used to define the hover and selection behavior. If you wish for the item backgrounds to paint over the selection/hover effects, you will have to use these overlay element to create the effects. (You can also mix, so that hover or selection paints over the backgrounds, but not the other.)

Assuming you implement a complete custom theme, this is easy. Simply use only the item element to define the effect and define the overlay element as below:

Table-RowOverlay {
  background-color: transparent;
  color: inherit;
  background-image: none;
}

If you wish to only make a theme contribution, you also need to overwrite every possible combination for the overlay element that may be defined in the main/default theme:

Table-RowOverlay,
Table-RowOverlay:hover,
Table-RowOverlay:selected,
Table-RowOverlay:linesvisible:even:hover,
Table-RowOverlay:linesvisible:even:selected,
TableItem:linesvisible:even:selected:unfocused {
  background-color: transparent;
  color: inherit;
  background-image: none;
}

To create the new hover/selection effect you then have to define all these combinations for the item element, just as it is done for the overlay element in the default theme.

Alternative: Nebula Grid

Available in the RAP Incubator is a RAP implementation of the Nebula Grid widget. Based on the same JavaScript code as tree and table, it adds features like column grouping, checkboxes on multiple columns, variable item height and column footer. (It does not support all features of the original Nebula Grid.)