<table> <tbody> <tr> <td> <table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> </thead> </table> </td> </tr> <tr> <td> <table> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>
The widget generates more complicated HTML than it seems to be at the first glance
Simple Grid extends the Advanced FlextTable but doesn't add new features. The reason why this component was made is just to improve table usability and avoid side effects appearing in different browsers during scrolling. Before 1.4.5 all the grids of the Advanced GWT Components library were inherited from the Advanced Flex Table and it was a source of numerous problems with look and feel. Simple Grid solves most of them and makes work with the framework more comfortable.
Simple Grid not only extends the FlexTable but it also encapsulates instances of this class. This approach allows table body scrolling in browser independent way. And as a result all the grids look similar in different clients.
Additionally Simple Grid supports dynamic columns resing. It handles column width changes and automatically resizes dependent columns. Earlier it was responsibility of the Editable Grid but now you can develop your own extensions for simple cases without using this rather complicated and heavy widget.
The sample demonstrates how to enable vertical scrolling and set column sizes.
SimpleGrid grid = new SimpleGrid(); // create headers and put them in the thead tag grid.setHeaderWidget(0, new Label("First Name")); grid.setHeaderWidget(1, new Label("Surname")); // enable verticall scrolling grid.enableVerticalScrolling(true); //set column widths in pixels grid.setColumnWidth(0, 200); grid.setColumnWidth(0, 100);
That's all you need and don't worry about browsers!