GWT Editable Table - CellTable with remove row

GWT offers table where we can specify column types, and make rows data modifiable.

CellTable supports paging and columns, i have not used paging in this example but only specified the columns for text and button.

	Column<User, String> nameColumn = new Column<User,
	String>(new EditTextCell()) {
	@Override
	public String getValue(User aUser) {
	return aUser.getUserName();
	}
	};
	// About the parameters for Column
	// User is row type
	// String is column type.

view raw AddColumnToCellTable hosted with ❤ by GitHub

The Column class defines the Cell used to render a column.

Implement Column.getValue(Object) to retrieve the field value from the row object that will be rendered in the Cell.

and the data which will be rendered:

You can use TextCell instead of EditTextCell, in case you do not want to make column editable.

DataProvider, ListDataProvider can display data which should be provided as list.

I have used modal User to create few items in the list and provide the same to the ListDataProvider and which works as the modal for the celltable.

	//dataprovider modal creation with in memory list
	final ListDataProvider<User> model = new ListDataProvider<User>(
	getUserList());
	final CellTable<User> table = new CellTable<User>();
	// create column for the table
	Column<User, String> nameColumn = new Column<User, String>(
	new EditTextCell()) {
	@Override
	public String getValue(User aUser) {
	return aUser.getUserName();
	}
	};
	nameColumn.setSortable(true);
	// add column to the table
	table.addColumn(nameColumn, "User Name");
	//initialize table row size
	table.setRowCount(getUserList().size());
	// add a data display to the table which is adapter.
	model.addDataDisplay(table);
	// method to get user list
	private LinkedList<User> getUserList() {
	LinkedList<User> list = new LinkedList<User>();
	list.add(new User("Deepak", "007"));
	list.add(new User("Mannu", "420"));
	list.add(new User("Ketan", "001"));
	return list;
	}

view raw dataProviderCellTable hosted with ❤ by GitHub

Remove row from the dataProvider and table.

	// Add a ButtonCell as column to the CellTable
	Column<User, String> deleteBtn = new Column<User, String>(
	new ButtonCell()) {
	@Override
	public String getValue(User c) {
	return "x";
	}
	};
	table.addColumn(deleteBtn, "");
	// Set the field updater, whenever user clicks on button
	// row will be removed.
	deleteBtn.setFieldUpdater(new FieldUpdater<User, String>() {
	@Override
	public void update(int index, User object, String value) {
	model.getList().remove(object);
	model.refresh();
	table.redraw();
	}
	});

view raw removeRowCellTable hosted with ❤ by GitHub

When user clicks on "x" update gets called from updater and where we can remove the row from the modal and refresh modal and re-draw table (i found without refresh modal and redraw table call also it was working fine).

Example files are available to download <<==== click here to download.

Look for GwtExamples.rar (v.1)