Append custom style to a GWT CellTable (in this case all cells)

Question

I have a case where I want to append

white-space: nowrap;

to the style of each cell in my CellTable. Currently it applies to all tables, but it would be nice to know both have to apply it for a specific CellTable, and all CellTables.

Kiloliter

Answer 1

CellTables have their own CssResource. To override this style applied to all cells in a cellTable, create a new css file :

/* Incremental changes from CellTable.css */ 
.cellTableCell {
  white-space: nowrap;
}

Then create your own CellTable.Resources interface :

public interface TableResources extends CellTable.Resources {

    /**
       * The styles applied to the table.
       */
    interface TableStyle extends CellTable.Style {
    }

    @Override
    @Source({ CellTable.Style.DEFAULT_CSS, "MyOwnCellTableStyleSheet.css" })
    TableStyle cellTableStyle();

}

Finally, when creating your cellTable, use the constructor that lets you specify which Resources to use

CellTable<Object> myCellTable = new CellTable<Object>(15, GWT.create(TableResources.class));

For a working example, look at the Expenses sample provided in the GWT SDK.

Sur

Very nice answer, worked well with me, except that on GWT 2.4 you have to cast to Resources like (Resources)GWT.create(TableResources.class) to work. – Underdone

Thanks for the solution. I found out that it also works without the TableStyle interface altogether. You can just write: CellTable.Style cellTableStyle(); This reduces the boilerplate somewhat. I tried it on GWT 2.6.0 – Curhan

Answer 2

Or you could do this the easy way:

CellTable<YourObj> yourTable = new CellTable<YourObj>();
yourTable.getElement().getStyle().setWhiteSpace(WhiteSpace.NOWRAP);

No css files, no weird boilerplate code.

Afferent