I know how frustrating it can be, I was in the same place. I included all the steps that I used to do this. But it looks like you're almost there, so you probably don't need all of these.
As you mentioned, in order to use your own css class names, you must implement com.google.gwt.user.cellview.client.CellTable.Resources and pass an instance of your class to the CellTable constructor.
CellTable Declaration
CellTable<MyData> myCellTable = new CellTable<MyData>(10, MyResources.INSTANCE);
To implement resources, you also need an instance of com.google.gwt.resources.client.ImageResource and com.google.gwt.user.cellview.client.CellTable.Style, a class that will provide your css class names. To make things simple here is an implementation of resource instances, ImageResource and Style, which do nothing but strings as style names. In the end, they can come from the ClientBundle, but this is not a requirement.
Stub style (using String literals)
import com.google.gwt.user.cellview.client.CellTable.Style; public class MyStyle implements Style { public static final MyStyle INSTANCE = new MyStyle(); @Override public boolean ensureInjected() { return false; } @Override public String cellTableCell() { return "myCssClassName"; } @Override public String cellTableEvenRow() { return "myCssClassName"; } @Override public String cellTableEvenRowCell() { return "myCssClassName"; } @Override public String cellTableOddRow() { return "myCssClassName"; } @Override public String cellTableOddRowCell() { return "myCssClassName"; } @Override public String cellTableFirstColumn() { return "myCssClassName"; } @Override public String cellTableFirstColumnFooter() { return "myCssClassName"; } @Override public String cellTableFirstColumnHeader() { return "myCssClassName"; } @Override public String cellTableFooter() { return "myCssClassName"; } @Override public String cellTableHeader() { return "myCssClassName"; } @Override public String cellTableHoveredRow() { return "myCssClassName"; } @Override public String cellTableHoveredRowCell() { return "myCssClassName"; } @Override public String cellTableKeyboardSelectedCell() { return "myCssClassName"; } @Override public String cellTableKeyboardSelectedRow() { return "myCssClassName"; } @Override public String cellTableKeyboardSelectedRowCell() { return "myCssClassName"; } @Override public String cellTableLastColumn() { return "myCssClassName"; } @Override public String cellTableLastColumnFooter() { return "myCssClassName"; } @Override public String cellTableLastColumnHeader() { return "myCssClassName"; } @Override public String cellTableLoading() { return "myCssClassName"; } @Override public String cellTableSelectedRow() { return "myCssClassName"; } @Override public String cellTableSelectedRowCell() { return "myCssClassName"; } @Override public String cellTableSortableHeader() { return "myCssClassName"; } @Override public String cellTableSortedHeaderAscending() { return "myCssClassName"; } @Override public String cellTableSortedHeaderDescending() { return "myCssClassName"; } @Override public String cellTableWidget() { return "myCssClassName"; } @Override public String getName() { return "myCssClassName"; } @Override public String getText() { return "myCssClassName"; } }
ImageResource Stub
import com.google.gwt.resources.client.ImageResource; class MyImageResource implements ImageResource { public static final MyImageResource INSTANCE = new MyImageResource(); @Override public int getHeight() { return 0; } @Override public int getLeft() { return 0; } @Override public String getName() { return ""; } @Override public int getTop() { return 0; } @Override public String getURL() { return ""; } @Override public int getWidth() { return 0; } @Override public boolean isAnimated() { return false; } }
Resource array
import com.google.gwt.resources.client.ImageResource; import com.google.gwt.user.cellview.client.CellTable.Resources; import com.google.gwt.user.cellview.client.CellTable.Style; public class MyResources implements Resources { public static final MyResources INSTANCE = new MyResources(); @Override public ImageResource cellTableFooterBackground() { return MyImageResource.INSTANCE; } @Override public ImageResource cellTableHeaderBackground() { return MyImageResource.INSTANCE; } @Override public ImageResource cellTableLoading() { return MyImageResource.INSTANCE; } @Override public ImageResource cellTableSelectedBackground() { return MyImageResource.INSTANCE; } @Override public ImageResource cellTableSortAscending() { return MyImageResource.INSTANCE; } @Override public ImageResource cellTableSortDescending() { return MyImageResource.INSTANCE; } @Override public Style cellTableStyle() { return MyStyle.INSTANCE; } }
So, at this point you should have a Tabula Rasa cell with no style, and you will have to check your CellTable in the browser and see myCssClassName as the ubiquitous CSS class name, unobfuscated.
If at this point you are referencing a stylesheet using one of the traditional methods, you should be able to set the "myCssClassName" strings according to your particular stylesheet.
Style Sheet
<link href="myStyleSheet.css" rel="stylesheet" type="text/css">
Now, if you want to introduce your styles using ClientBundle, you have a few extra steps.
First, make sure you enter a stylesheet at some point; It is very easy to forget. A simple place in your EntryPoint module is that you can be sure that it is being called.
Cssresource injection
MyClientBundle.INSTANCE.myCssResource().ensureInjected();
Finally, use CssResource to provide style implementation names earlier. Regardless of whether or not CSS class names are running, you should enter them and use the correct name in this way.
ClientBundle Stub
import com.google.gwt.core.client.GWT; import com.google.gwt.resources.client.ClientBundle; public interface MyClientBundle extends ClientBundle { public static final MyClientBundle INSTANCE = GWT.<MyClientBundle>create(MyClientBundle.class); @Override @Source("path/to/myStyleSheet.css") MyCssResource myCssResource(); }
CssResource Stub
import com.google.gwt.resources.client.CssResource; public interface MyCssResource extends CssResource { @ClassName("myCssClassName") String myCssClassName(); @ClassName("myOtherName") String myOtherCssClassName(); }
Style sheet
.myCssClassName { background-color: magenta; /* Yes, you will see when it is working. */ } @external .myOtherName { background-color: yellow; }
Stub style (using ClientBundle)
import com.google.gwt.user.cellview.client.CellTable.Style; public class MyStyle implements Style { public static final MyStyle INSTANCE = new MyStyle(); @Override public boolean ensureInjected() { return false; } @Override public String cellTableCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableEvenRow() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableEvenRowCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableOddRow() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableOddRowCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableFirstColumn() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableFirstColumnFooter() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableFirstColumnHeader() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableFooter() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableHeader() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableHoveredRow() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableHoveredRowCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableKeyboardSelectedCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableKeyboardSelectedRow() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableKeyboardSelectedRowCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableLastColumn() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableLastColumnFooter() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableLastColumnHeader() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableLoading() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableSelectedRow() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableSelectedRowCell() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableSortableHeader() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableSortedHeaderAscending() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableSortedHeaderDescending() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String cellTableWidget() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String getName() { return MyCssResource.INSTANCE.myCssClassName(); } @Override public String getText() { return MyCssResource.INSTANCE.myCssClassName(); } }
It should be like that. I'm sure there are other ways to do the same, but so far this has worked well. Good luck, and I hope this saves you time.