How to implement Expand/Collapse for a table with Multiple columns - GWT - Google Visualization API - gwt

Question

I have list of Items with parent child relation.
At present I am displaying them in a single table. In each row, fist column starts with number of '-'s indicating the depth.
Now I want show only top level items first and with a '+' button before that.
When the user clicks on the '+' button it should turn to '-' and the children of that particular Item need to be displayed.
So, Please help me how to implement that Expand and Collapse functionality in GWT.
EDIT:
I have my Items in a tree format.
Now I am creating a DataTable and Displaying it using GoogleTableChart
The code as follows:
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Item Name ");
data.addColumn(ColumnType.STRING, "Item Id");
data.addColumn(ColumnType.NUMBER, "Quantity");
data.addColumn(ColumnType.NUMBER, "Price ($)");
data.addRows(treeList.size());
int i=0;
while(i<treeList.preOrderTraversal().size())
{
int col=0;
Item d=(Item) treeList.preOrderTraversal().get(i);
int level=d.getLevel();
//setting values to DataTable goes here
i++;
}
GoogleTableChart tblChart = new GoogleTableChart();
vPanel.add(tblChart.showFlexibleTable1(data));

Answer 1

Here is my solution:
I create Nested VertialPanels for each Item. And put the reference in a map.
Hide/unhide the panels based on clicks.
For root Item take one panel and add all its children.
After adding one child, add all its children to another panel,hide it and add to root panel.
repeat the steps recursively.
before each row place put (+/-) label and add click handler which take item id as parameter.
when these lables are clicked, based on the status we hide/unhide the panels, taken from the map.
Any Better Solution ... ??