How do I style a gwt 2.1 CellTables headers?

Question

I see nothing in the documentation except a reference to include some "CssResource" and get it with ClientBundle, but how do I exactly override the tbody and th of a CellTable?

Is this possible?

Dichogamy

Answer 1

Create an interface:

  interface TableResources extends CellTable.Resources {
    @Source({CellTable.Style.DEFAULT_CSS, "<your css file>.css"})
    TableStyle cellTableStyle();
  }

  interface TableStyle extends CellTable.Style {
  }

and initialize the cell table:

    CellTable.Resources resources = GWT.create(TableResources.class);
    table = new CellTable<SomeProxy>(rowSize, resources);

In the cellview.client package you can find the default gwt css files. Yo use those as your starting point. In the "<your css file>.css" put you specific style changes.

You can also set colum style (on the col element):

table.addColumnStyleName(colNumer, "some_css_style_name");

or better use css resource name instead of string "some_css_style_name".

Hurlbut

How do I use the CellTable.Resources and CellTable together with UiBinder? I cant get my table to be constructed with (rowSize, resouces) I annotate it with UiField and that doesnt work. – Dichogamy

Use @UiField(provided = true) with the CellTable. This way UiBinder knows you create the table in code. – Hurlbut

Answer 2

Just for the fun of it I might add something I just had a headache with... if you change cellTableStyle(); with something else it breaks... no warning or error, the CSS just does not appear as I thought it would. Dont know where this is documented, but I found it out after alot of fiddeling trying to find out why some CSS was correct and some not..

Ferreous

Answer 3

For some reason my cellTable.addColumnStyleName(colNumber, "cssStyle") just won't work. According to FireBug it doesn't add the style no matter what (if the style was incorrect, it at least could have added it to the classes attribute of the th-element...). Maybe it's because I am redrawing the columns, but it'S weird nevertheless.

Goner

Answer 4

I've used the solution above, however, if you have another table with default styling, it ends up making with your custom table. Are you required to override all your tables with custom styling, or is there some workaround?

Also, I find the CellTable constructors less than optimal... I have to specify pageSize to specify the style resource CellTable(pageSize, resources)... I've been putting Integer.MAX_VALUE for pageSize, not sure if that should be -1 or something else as there's no javadoc on that value.

Mayolamayon