Question on Best Startegy to make a table where first row and first column has fixed size cell and then all the other inner cells can have variaty of cell sizes

[Patrick Tucker]

The colorful cells will have to be spans or something with similar properties.

[Andrei]

Something like this. Assuming you want your first column to be 100px wide and your rows 30px high,

FlowPanel firstColumn = new FlowPanel();

firstColumn.setSize("100px", numberOfRows * 30 + "px");

firstColumn.getElement().getStyle().setFloat("left");

for (int i = 0; i < numberOfRows; i++) {

    Label rowLabel = new Label(someText);

    rowLabel.setSize("100px", "30px");

    firstColumn.add(rowLabel);

}

FlowPanel firstRow = new FlowPanel();

firstRow.setSize((numberOfColumns * 100 - 1) + "px", "30px");

for (i = 0; i < numberOfColumns - 1; i++) {

    Label columnLabel = new Label(someText);

    columnLabel.setSize("100px", "30px");

    columnLabel.getElement().getStyle().setFloat("left");

    firstRow.add(columnLabel );

}

FlowPanel tableBody = new FlowPanel();

tableBody.setSize( (numberOfColumns * 100 - 1) + "px" , (numberOfRows - 1) * 30 + "px"); 

for (i = 0; i < numberOfItems; i++) {

    Label itemLabel = new Label(someText);

    itemLabel.setSize(someWidth, "30px");

    itemLabel.getElement().getStyle().setFloat("left");

    itemLabel.getElement().getStyle().setBackgroundColor(someColor);

    tableBody.add(itemLabel );

}

FlowPanel myFancyTable = new FlowPanel();

myFancyTable.setSize(numberOfColumns * 100 + "px", numberOfRows * 30 + "px");

myFancyTable.add(firstColumn);

myFancyTable.add(firstRow);

myFancyTable.add(tableBody);

You may need to adjust sizes of labels and panels if your CSS (or standard GWT CSS) introduces some styles (paddings, borders and margins) to make sure that labels and panels fit into their spots.

You can make it even more elegant with only one FlowPanel filled with floating labels, if you prefer, but it depends on how your data is structured. I assumed it's easier for you to create the first column, then the first row, and then fill the table.

[Andrei]

Sorry, it should be .setFloat(Style.Float.LEFT);