How to skin a GWT CellTable

In this article I’m going to show you how to customize the look and feel of a CellTable using CSS and ClientBundle API of GWT. I assume that you already familiar with CSS and ClientBundle, if not visit : http://goo.gl/s8xfH.

Below the final look and feel of the table :

First you need to create a CSS file on you resources package, this file will override the default CSS classes used by GWT, here you put your custom CSS code to change the L&F of your table, visit http://goo.gl/nVbIu to get the list of all classes used to skin the CellTable.

@def selectionBorderWidth 2px;
.cellTableWidget {}
.cellTableFirstColumn {}
.cellTableLastColumn {}
.cellTableFooter {}
.cellTableHeader {}
.cellTableCell {}
.cellTableFirstColumnFooter {}
.cellTableFirstColumnHeader {}
.cellTableLastColumnFooter {}
.cellTableLastColumnHeader {}
.cellTableSortableHeader {}
.cellTableSortableHeader:hover {}
.cellTableSortedHeaderAscending {}
.cellTableSortedHeaderDescending {}
.cellTableEvenRow {}
.cellTableEvenRowCell {}
.cellTableOddRow {}
.cellTableOddRowCell {}
.cellTableHoveredRow {}
.cellTableHoveredRowCell {}
.cellTableKeyboardSelectedRow {}
.cellTableKeyboardSelectedRowCell {}
.cellTableSelectedRow {}
.cellTableSelectedRowCell {}
.cellTableKeyboardSelectedCell {}
@sprite .cellTableLoading {}

Now that you know all CSS classes, all you have to do is to put your custom CSS code, if you don’t redefine a certain CSS class it will use its default L&F.

Below the CSS code I wrote to achieve the L&F shown earlier :

.cellTableHeader {
padding: 0px;
color: #545454;
text-align: center;
font-size: 13px;
background-image: none;
background-color: #cfcfcf;
height: 25px;
vertical-align: middle;
font-weight: bold;
text-shadow: 0 1px 1px rgba(255,255,255,.7);
}
.cellTableFirstColumnHeader {
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
}
.cellTableLastColumnHeader {
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
}
.cellTableCell {
padding: 4px;
overflow: hidden;
font-size: 12px;
color: #454545;
}
.cellTableEvenRow {
background: #ffffff;
}
.cellTableOddRow {
background: #ECECEC;
}
.cellTableSelectedRow {
background: #628cd5;
}
.cellTableSelectedRowCell {
border: none;
}
.cellTableHoveredRow {
background: transparent;
}
.cellTableHoveredRowCell {
border: none;
}
.cellTableKeyboardSelectedRow {
background: #ffc;
}
.cellTableKeyboardSelectedRowCell {
border: none;
}
.cellTableKeyboardSelectedCell {
border: none;
}

After this we need to write our ClientBundle class that will use our custom CSS file and inject it to a given CellTable. This class must extend CellTable.Resources.

public interface TableRes extends CellTable.Resources {
@Source({CellTable.Style.DEFAULT_CSS, "org/test/resources/table.css"})
TableStyle cellTableStyle();

interface TableStyle extends CellTable.Style {}
}

Finally all we need to do now is to use this new L&F on a CellTable, on your UiBinder java class you need to write this :

public class TestUI extends Composite implements {

interface TestUIUiBinder extends UiBinder<Widget, TestUI> { }

...

//CellTable custom UI resource
private CellTable.Resources tableRes = GWT.create(TableRes.class);

//Create the CellTable with a custom L&F
@UiField(provided=true)
CellTable<Test> testTable = new CellTable<Test>(10, tableRes);

...
}

That’s all, you have now a fancy CellTable :-).