FlexTable

---

Version 1.0 onwards

---

A table which can have different numbers of cells in each row

---

---

Listeners

---

• TableListener

---

Notes

---

A FlexTable is an html table-based widget. It can have varying numbers of cells in each row, and you can span columns and rows. It's pretty handy for displaying rows of data, and can be used for screen layout, too, but this is a widget that can get used for screen layout when maybe a panel of some sort might be better.

You have to keep control of cell positions carefully. If you have 10-cell by 10-cell FlexTable then the last cell in each row will be cell 9. If you then span columns within the table, the cell numbers of the cells to the right will be reduced. E.g. if you have cells 0-9 and span cell 2 across cells 2 and 3, then what used to be cell 4 will now be cell3, what used to be cell 5 will now be cell 4 and so on. The last cell will be cell8, even though all the other cells above and below it are called cell 9 of their row. It doesn't work like a spreadsheet, unfortunately.

---

Personal, Biased Opinion

---

Don't write off the Grid widget as an alternative. Yes the FlexTable is more, er, flexible than the Grid widget, but the Grid widget might be significantly faster under certain circumstances. See the Grid widget page on this site for a couple more comments.

---

Code

---

class FlexTableDemo extends Composite
{
    VerticalPanel panel = new VerticalPanel();
    FlexTable flextable;
    ClickListener addACellDownListener = new ClickListener()
    {
        public void onClick(Widget sender)
        {
            int row = flextable.getRowCount();
            flextable.setWidget(flextable.getRowCount(), 0, new Label(row + ", 0"));
            flextable.getFlexCellFormatter().setStyleName(row, 0, "demo-table-cell");
            rightButton.setVisible(true);
            clearButton.setVisible(true);
        }
    };
    ClickListener addACellRightListener = new ClickListener()
    {
        public void onClick(Widget sender)
        {
            int row = flextable.getRowCount() - 1;
            int col = flextable.getCellCount(row);
            flextable.setWidget(row, col, new Label(row + ", " + col));
            flextable.getFlexCellFormatter().setStyleName(row, col, "demo-table-cell");
        }
    };
    ClickListener clearListener = new ClickListener()
    {
        public void onClick(Widget sender)
        {
            panel.remove(flextable);
            addNewFlexTable();
        }
    };
    Button downButton = new Button("New Row", addACellDownListener);
    Button rightButton = new Button("New Cell", addACellRightListener);
    Button clearButton = new Button("Clear", clearListener);

    public FlexTableDemo()
    {
        initWidget(panel);
        HorizontalPanel buttons = new HorizontalPanel();
        panel.add(buttons);

        buttons.add(downButton);
        buttons.add(rightButton);
        buttons.add(clearButton);

        addNewFlexTable();
    }
    void addNewFlexTable()
    {
        flextable = new FlexTable();
        panel.add(flextable);

        rightButton.setVisible(false);
        clearButton.setVisible(false);

        flextable.addStyleName("demo-table");
        flextable.addStyleName("demo-panel");
    }
}