Lets get started with the coding :
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Anchor;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.ListBox;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.HTMLTable.Cell;
public class DynamicTable implements EntryPoint {
public void onModuleLoad() {
final FlexTable table = new FlexTable();
table.setCellSpacing(5);
table.setCellPadding(3);
//table heading columns
table.setText(0, 0, "Language");
table.setText(0, 1, "Proficiency Level");
table.setText(0, 2, "Read");
table.setText(0, 3, "Write");
table.setText(0, 4, "Speak");
table.setText(0, 5, "");
//controls to enter languages
final TextBox language = new TextBox();
final ListBox proficiency = new ListBox(false);
proficiency.addItem("Select", "select");
proficiency.addItem("Beginner", "1");
proficiency.addItem("Proficient", "2");
proficiency.addItem("Expert", "3");
final CheckBox read = new CheckBox();
final CheckBox write = new CheckBox();
final CheckBox speak = new CheckBox();
Button add = new Button("Add");
//adding input controls to table
table.setWidget(1, 0, language);
table.setWidget(1, 1, proficiency);
table.setWidget(1, 2, read);
table.setWidget(1, 3, write);
table.setWidget(1, 4, speak);
table.setWidget(1, 5, add);
//adding handlers
//table handler
table.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
FlexTable ft = (FlexTable) event.getSource();
Cell c = ft.getCellForEvent(event);
if(c != null) {
int cellIndex = c.getCellIndex();
int rowIndex = c.getRowIndex();
if(cellIndex == 5) {
if(rowIndex != 0 && rowIndex != (ft.getRowCount()-1)) {
ft.removeRow(rowIndex);
}
}
}
}
}
);
//Add button handler
add.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
String lang = language.getText();
String pl = proficiency.getItemText(proficiency.getSelectedIndex());
String r = "No";
if(read.getValue()) { r = "Yes"; }
String w = "No";
if(write.getValue()) { w = "Yes"; }
String s = "No";
if(speak.getValue()) { s = "Yes"; }
int numRows = table.getRowCount();
numRows = table.insertRow(numRows-1);
table.setText(numRows, 0, lang);
table.setText(numRows, 1, pl);
table.setText(numRows, 2, r);
table.setText(numRows, 3, w);
table.setText(numRows, 4, s);
Anchor anchor = new Anchor("Remove");
table.setWidget(numRows, 5, anchor);
language.setText("");
proficiency.setSelectedIndex(0);
read.setText("");
write.setText("");
speak.setText("");
}
}
);
RootPanel.get().add(table);
}
}
Ofcourse many improvements coube be made here, like having a drop down for selection of languages instead of the text box to enter, validation of the input, and having checkbox with boolean value set instead of have the text Yes or No, that's left for you :)