com.google.gwt.user.cellview.client
Class CellTable<T>

java.lang.Object
  com.google.gwt.user.client.ui.UIObject
      com.google.gwt.user.client.ui.Widget
          com.google.gwt.user.client.ui.Composite
              com.google.gwt.user.cellview.client.AbstractHasData<T>
                  com.google.gwt.user.cellview.client.AbstractCellTable<T>
                      com.google.gwt.user.cellview.client.CellTable<T>

Type Parameters:

T - the data type of each row

All Implemented Interfaces:

HasAttachHandlers, HasHandlers, HasKeyboardPagingPolicy, HasKeyboardSelectionPolicy, EventListener, Focusable, HasVisibility, IsRenderable, IsWidget, HasCellPreviewHandlers<T>, HasData<T>, HasKeyProvider<T>, HasRows

public class CellTable<T>
extends AbstractCellTable<T>

A tabular view that supports paging and columns.

Columns

Headers and Footers

Examples

Trivial example

public class CellTableExample implements EntryPoint {

  /**
   * A simple data type that represents a contact.
   */
  private static class Contact {
    private final String address;
    private final Date birthday;
    private final String name;

    public Contact(String name, Date birthday, String address) {
      this.name = name;
      this.birthday = birthday;
      this.address = address;
    }
  }

  /**
   * The list of data to display.
   */
  private static final List<Contact> CONTACTS = Arrays.asList(
      new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue"),
      new Contact("Joe", new Date(85, 2, 22), "22 Lance Ln"),
      new Contact("George", new Date(46, 6, 6), "1600 Pennsylvania Avenue"));

  public void onModuleLoad() {
    // Create a CellTable.
    CellTable<Contact> table = new CellTable<Contact>();
    table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

    // Add a text column to show the name.
    TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
      @Override
      public String getValue(Contact object) {
        return object.name;
      }
    };
    table.addColumn(nameColumn, "Name");

    // Add a date column to show the birthday.
    DateCell dateCell = new DateCell();
    Column<Contact, Date> dateColumn = new Column<Contact, Date>(dateCell) {
      @Override
      public Date getValue(Contact object) {
        return object.birthday;
      }
    };
    table.addColumn(dateColumn, "Birthday");

    // Add a text column to show the address.
    TextColumn<Contact> addressColumn = new TextColumn<Contact>() {
      @Override
      public String getValue(Contact object) {
        return object.address;
      }
    };
    table.addColumn(addressColumn, "Address");

    // Add a selection model to handle user selection.
    final SingleSelectionModel<Contact> selectionModel = new SingleSelectionModel<Contact>();
    table.setSelectionModel(selectionModel);
    selectionModel.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
      public void onSelectionChange(SelectionChangeEvent event) {
        Contact selected = selectionModel.getSelectedObject();
        if (selected != null) {
          Window.alert("You selected: " + selected.name);
        }
      }
    });

    // Set the total row count. This isn't strictly necessary, but it affects
    // paging calculations, so its good habit to keep the row count up to date.
    table.setRowCount(CONTACTS.size(), true);

    // Push the data into the widget.
    table.setRowData(0, CONTACTS);

    // Add it to the root panel.
    RootPanel.get().add(table);
  }
}

Handling user input with trivial FieldUpdater example

public class CellTableFieldUpdaterExample implements EntryPoint {

  /**
   * A simple data type that represents a contact with a unique ID.
   */
  private static class Contact {
    private static int nextId = 0;

    private final int id;
    private String name;

    public Contact(String name) {
      nextId++;
      this.id = nextId;
      this.name = name;
    }
  }

  /**
   * The list of data to display.
   */
  private static final List<Contact> CONTACTS = Arrays.asList(new Contact("John"), new Contact(
      "Joe"), new Contact("George"));

  /**
   * The key provider that allows us to identify Contacts even if a field
   * changes. We identify contacts by their unique ID.
   */
  private static final ProvidesKey<Contact> KEY_PROVIDER =
      new ProvidesKey<CellTableFieldUpdaterExample.Contact>() {
        @Override
        public Object getKey(Contact item) {
          return item.id;
        }
      };

  @Override
  public void onModuleLoad() {
    // Create a CellTable with a key provider.
    final CellTable<Contact> table = new CellTable<Contact>(KEY_PROVIDER);

    // Add a text input column to edit the name.
    final TextInputCell nameCell = new TextInputCell();
    Column<Contact, String> nameColumn = new Column<Contact, String>(nameCell) {
      @Override
      public String getValue(Contact object) {
        // Return the name as the value of this column.
        return object.name;
      }
    };
    table.addColumn(nameColumn, "Name");

    // Add a field updater to be notified when the user enters a new name.
    nameColumn.setFieldUpdater(new FieldUpdater<Contact, String>() {
      @Override
      public void update(int index, Contact object, String value) {
        // Inform the user of the change.
        Window.alert("You changed the name of " + object.name + " to " + value);

        // Push the changes into the Contact. At this point, you could send an
        // asynchronous request to the server to update the database.
        object.name = value;

        // Redraw the table with the new data.
        table.redraw();
      }
    });

    // Push the data into the widget.
    table.setRowData(CONTACTS);

    // Add it to the root panel.
    RootPanel.get().add(table);
  }
}

Handling user input with complex FieldUpdater example

public class CellTableFieldUpdaterExampleComplex implements EntryPoint {

  /**
   * A simple data type that represents a contact with a unique ID.
   */
  private static class Contact {
    private static int nextId = 0;

    private final int id;
    private final String address;
    private Date birthday;
    private String name;

    public Contact(String name, Date birthday, String address) {
      nextId++;
      this.id = nextId;
      this.name = name;
      this.birthday = birthday;
      this.address = address;
    }
  }

  /**
   * The list of data to display.
   */
  private static final List<Contact> CONTACTS = Arrays.asList(
      new Contact("John", new Date(80, 4, 12), "123 Fourth Avenue"),
      new Contact("Joe", new Date(85, 2, 22), "22 Lance Ln"),
      new Contact("George", new Date(46, 6, 6), "1600 Pennsylvania Avenue"));

  /**
   * The key provider that allows us to identify Contacts even if a field
   * changes. We identify contacts by their unique ID.
   */
  private static final ProvidesKey<Contact> KEY_PROVIDER = new ProvidesKey<CellTableFieldUpdaterExampleComplex.Contact>() {
    @Override
    public Object getKey(Contact item) {
      return item.id;
    }
  };

  @Override
  public void onModuleLoad() {
    // Create a CellTable with a key provider.
    final CellTable<Contact> table = new CellTable<Contact>(KEY_PROVIDER);
    table.setKeyboardSelectionPolicy(KeyboardSelectionPolicy.ENABLED);

    // Add a text input column to edit the name.
    final TextInputCell nameCell = new TextInputCell();
    Column<Contact, String> nameColumn = new Column<Contact, String>(nameCell) {
      @Override
      public String getValue(Contact object) {
        return object.name;
      }
    };
    table.addColumn(nameColumn, "Name");

    // Add a field updater to be notified when the user enters a new name.
    nameColumn.setFieldUpdater(new FieldUpdater<Contact, String>() {
      @Override
      public void update(int index, Contact object, String value) {
        // Validate the data.
        if (value.length() < 3) {
          Window.alert("Names must be at least three characters long.");

          /*
           * Clear the view data. The view data contains the pending change and
           * allows the table to render with the pending value until the data is
           * committed. If the data is committed into the object, the view data
           * is automatically cleared out. If the data is not committed because
           * it is invalid, you must delete.
           */
          nameCell.clearViewData(KEY_PROVIDER.getKey(object));

          // Redraw the table.
          table.redraw();
          return;
        }

        // Inform the user of the change.
        Window.alert("You changed the name of " + object.name + " to " + value);

        // Push the changes into the Contact. At this point, you could send an
        // asynchronous request to the server to update the database.
        object.name = value;

        // Redraw the table with the new data.
        table.redraw();
      }
    });

    // Add a date column to show the birthday.
    Column<Contact, Date> dateColumn = new Column<Contact, Date>(
        new DatePickerCell()) {
      @Override
      public Date getValue(Contact object) {
        return object.birthday;
      }
    };
    table.addColumn(dateColumn, "Birthday");

    // Add a field updater to be notified when the user enters a new birthday.
    dateColumn.setFieldUpdater(new FieldUpdater<Contact, Date>() {
      @Override
      public void update(int index, Contact object, Date value) {
        Window.alert("You changed the birthday of "
            + object.name
            + " to "
            + DateTimeFormat.getFormat(PredefinedFormat.DATE_LONG).format(value));

        // Push the changes into the Contact.
        object.birthday = value;

        // Redraw the table with the new data.
        table.redraw();
      }
    });
    // Add a text column to show the address.
    TextColumn<Contact> addressColumn = new TextColumn<Contact>() {
      @Override
      public String getValue(Contact object) {
        return object.address;
      }
    };
    table.addColumn(addressColumn, "Address");

    // Set the total row count. This isn't strictly necessary, but it affects
    // paging calculations, so its good habit to keep the row count up to date.
    table.setRowCount(CONTACTS.size(), true);

    // Push the data into the widget.
    table.setRowData(0, CONTACTS);

    // Add it to the root panel.
    RootPanel.get().add(table);
  }
}

Pushing data with List Data Provider (backed by List)

public class ListDataProviderExample implements EntryPoint {

  public void onModuleLoad() {
    // Create a CellList.
    CellList<String> cellList = new CellList<String>(new TextCell());

    // Create a list data provider.
    final ListDataProvider<String> dataProvider = new ListDataProvider<String>();

    // Add the cellList to the dataProvider.
    dataProvider.addDataDisplay(cellList);

    // Create a form to add values to the data provider.
    final TextBox valueBox = new TextBox();
    valueBox.setText("Enter new value");
    Button addButton = new Button("Add value", new ClickHandler() {
      public void onClick(ClickEvent event) {
        // Get the value from the text box.
        String newValue = valueBox.getText();

        // Get the underlying list from data dataProvider.
        List<String> list = dataProvider.getList();

        // Add the value to the list. The dataProvider will update the cellList.
        list.add(newValue);
      }
    });

    // Add the widgets to the root panel.
    VerticalPanel vPanel = new VerticalPanel();
    vPanel.add(valueBox);
    vPanel.add(addButton);
    vPanel.add(cellList);
    RootPanel.get().add(vPanel);
  }
}

Pushing data asynchronously with Async Data Provider

public class AsyncDataProviderExample implements EntryPoint {

  /**
   * A custom {@link AsyncDataProvider}.
   */
  private static class MyDataProvider extends AsyncDataProvider<String> {
    /**
     * {@link #onRangeChanged(HasData)} is called when the table requests a new
     * range of data. You can push data back to the displays using
     * {@link #updateRowData(int, List)}.
     */
    @Override
    protected void onRangeChanged(HasData<String> display) {
      // Get the new range.
      final Range range = display.getVisibleRange();

      /*
       * Query the data asynchronously. If you are using a database, you can
       * make an RPC call here. We'll use a Timer to simulate a delay.
       */
      new Timer() {
        @Override
        public void run() {
          // We are creating fake data. Normally, the data will come from a
          // server.
          int start = range.getStart();
          int length = range.getLength();
          List<String> newData = new ArrayList<String>();
          for (int i = start; i < start + length; i++) {
            newData.add("Item " + i);
          }

          // Push the data to the displays. AsyncDataProvider will only update
          // displays that are within range of the data.
          updateRowData(start, newData);
        }
      }.schedule(3000);
    }
  }

  public void onModuleLoad() {
    // Create a CellList.
    CellList<String> cellList = new CellList<String>(new TextCell());

    // Create a data provider.
    MyDataProvider dataProvider = new MyDataProvider();

    // Add the cellList to the dataProvider.
    dataProvider.addDataDisplay(cellList);

    // Create paging controls.
    SimplePager pager = new SimplePager();
    pager.setDisplay(cellList);

    // Add the widgets to the root panel.
    VerticalPanel vPanel = new VerticalPanel();
    vPanel.add(pager);
    vPanel.add(cellList);
    RootPanel.get().add(vPanel);
  }
}

Writing a custom data provider

public class RangeChangeHandlerExample implements EntryPoint {

  @Override
  public void onModuleLoad() {
    // Create a CellList.
    final CellList<String> cellList = new CellList<String>(new TextCell());

    // Add a range change handler.
    cellList.addRangeChangeHandler(new RangeChangeEvent.Handler() {
      @Override
      public void onRangeChange(RangeChangeEvent event) {
        Range range = event.getNewRange();
        int start = range.getStart();
        int length = range.getLength();

        // Create the data to push into the view. At this point, you could send
        // an asynchronous RPC request to a server.
        List<String> data = new ArrayList<String>();
        for (int i = start; i < start + length; i++) {
          data.add("Item " + i);
        }

        // Push the data into the list.
        cellList.setRowData(start, data);
      }
    });

    // Force the cellList to fire an initial range change event.
    cellList.setVisibleRangeAndClearData(new Range(0, 25), true);

    // Create paging controls.
    SimplePager pager = new SimplePager();
    pager.setDisplay(cellList);

    // Add the widgets to the root panel.
    VerticalPanel vPanel = new VerticalPanel();
    vPanel.add(pager);
    vPanel.add(cellList);
    RootPanel.get().add(vPanel);
  }
}

Using a key provider to track objects as they change

public class KeyProviderExample implements EntryPoint {

  /**
   * A simple data type that represents a contact.
   */
  private static class Contact {
    private static int nextId = 0;

    private final int id;
    private String name;

    public Contact(String name) {
      nextId++;
      this.id = nextId;
      this.name = name;
    }
  }

  /**
   * A custom {@link Cell} used to render a {@link Contact}.
   */
  private static class ContactCell extends AbstractCell<Contact> {
    @Override
    public void render(Context context, Contact value, SafeHtmlBuilder sb) {
      if (value != null) {
        sb.appendEscaped(value.name);
      }
    }
  }

  /**
   * The list of data to display.
   */
  private static final List<Contact> CONTACTS = Arrays.asList(new Contact(
      "John"), new Contact("Joe"), new Contact("Michael"),
      new Contact("Sarah"), new Contact("George"));

  public void onModuleLoad() {
    /*
     * Define a key provider for a Contact. We use the unique ID as the key,
     * which allows to maintain selection even if the name changes.
     */
    ProvidesKey<Contact> keyProvider = new ProvidesKey<Contact>() {
      public Object getKey(Contact item) {
        // Always do a null check.
        return (item == null) ? null : item.id;
      }
    };

    // Create a CellList using the keyProvider.
    CellList<Contact> cellList = new CellList<Contact>(new ContactCell(),
        keyProvider);

    // Push data into the CellList.
    cellList.setRowCount(CONTACTS.size(), true);
    cellList.setRowData(0, CONTACTS);

    // Add a selection model using the same keyProvider.
    SelectionModel<Contact> selectionModel = new SingleSelectionModel<Contact>(
        keyProvider);
    cellList.setSelectionModel(selectionModel);

    /*
     * Select a contact. The selectionModel will select based on the ID because
     * we used a keyProvider.
     */
    Contact sarah = CONTACTS.get(3);
    selectionModel.setSelected(sarah, true);

    // Modify the name of the contact.
    sarah.name = "Sara";

    /*
     * Redraw the CellList. Sarah/Sara will still be selected because we
     * identify her by ID. If we did not use a keyProvider, Sara would not be
     * selected.
     */
    cellList.redraw();

    // Add the widgets to the root panel.
    RootPanel.get().add(cellList);
  }
}

CellTable

public CellTable()

Constructs a table with a default page size of 15.

CellTable

public CellTable(int pageSize)

Constructs a table with the given page size.

Parameters:

pageSize - the page size

CellTable

public CellTable(ProvidesKey<T> keyProvider)

Constructs a table with a default page size of 15, and the given key provider.

Parameters:

keyProvider - an instance of ProvidesKey, or null if the record object should act as its own key

CellTable

public CellTable(int pageSize,
                 CellTable.Resources resources)

Constructs a table with the given page size with the specified CellTable.BasicResources.

Parameters:

pageSize - the page size

resources - the resources to use for this widget

CellTable

public CellTable(int pageSize,
                 ProvidesKey<T> keyProvider)

Constructs a table with the given page size and the given key provider.

Parameters:

pageSize - the page size

keyProvider - an instance of ProvidesKey, or null if the record object should act as its own key

CellTable

public CellTable(int pageSize,
                 CellTable.Resources resources,
                 ProvidesKey<T> keyProvider)

Constructs a table with the given page size, the specified CellTable.BasicResources, and the given key provider.

Parameters:

pageSize - the page size

resources - the resources to use for this widget

keyProvider - an instance of ProvidesKey, or null if the record object should act as its own key

CellTable

public CellTable(int pageSize,
                 CellTable.Resources resources,
                 ProvidesKey<T> keyProvider,
                 Widget loadingIndicator)

Constructs a table with the specified page size, CellTable.BasicResources, key provider, and loading indicator.

Parameters:

pageSize - the page size

resources - the resources to use for this widget

keyProvider - an instance of ProvidesKey, or null if the record object should act as its own key

loadingIndicator - the widget to use as a loading indicator, or null to disable

addColumnStyleName

public void addColumnStyleName(int index,
                               java.lang.String styleName)

Description copied from class: AbstractCellTable

Add a style name to the col element at the specified index, creating it if necessary.

Specified by:

addColumnStyleName in class AbstractCellTable<T>

Parameters:

index - the column index

styleName - the style name to add

getBodyHeight

public int getBodyHeight()

Return the height of the table body.

Returns:

an int representing the body height

getHeaderHeight

public int getHeaderHeight()

Return the height of the table header.

Returns:

an int representing the header height

removeColumnStyleName

public void removeColumnStyleName(int index,
                                  java.lang.String styleName)

Description copied from class: AbstractCellTable

Remove a style from the col element at the specified index.

Specified by:

removeColumnStyleName in class AbstractCellTable<T>

Parameters:

index - the column index

styleName - the style name to remove

setColumnWidth

public void setColumnWidth(Column<T,?> column,
                           java.lang.String width)

Set the width of a Column.

The layout behavior depends on whether or not the table is using fixed layout.

Overrides:

setColumnWidth in class AbstractCellTable<T>

Parameters:

column - the column

width - the width of the column

See Also:

setTableLayoutFixed(boolean)

setColumnWidth

public void setColumnWidth(Column<T,?> column,
                           double width,
                           Style.Unit unit)

Set the width of a Column.

The layout behavior depends on whether or not the table is using fixed layout.

Overrides:

setColumnWidth in class AbstractCellTable<T>

Parameters:

column - the column

width - the width of the column

unit - the Style.Unit of measurement

See Also:

setTableLayoutFixed(boolean)

setEmptyTableWidget

public void setEmptyTableWidget(Widget widget)

Description copied from class: AbstractCellTable

Set the widget to display when the table has no rows.

Overrides:

setEmptyTableWidget in class AbstractCellTable<T>

Parameters:

widget - the empty table widget, or null to disable

setLoadingIndicator

public void setLoadingIndicator(Widget widget)

Description copied from class: AbstractCellTable

Set the widget to display when the data is loading.

Overrides:

setLoadingIndicator in class AbstractCellTable<T>

Parameters:

widget - the loading indicator, or null to disable

setTableLayoutFixed

public void setTableLayoutFixed(boolean isFixed)

Enable or disable fixed table layout.

Fixed Table Layout

When using the fixed table layout, cell contents are truncated as needed, which allows you to set the exact width of columns and the table. The default column width is 0 (invisible). In order to see all columns, you must set the width of the table (recommended 100%), or set the width of every column in the table. The following conditions are true for fixed layout tables:

• If the widths of all columns are set, the width becomes a weight and the columns are resized proportionally.
• If the widths of some columns are set using absolute values (PX), those columns are fixed and the remaining width is divided evenly over the other columns. If there is no remaining width, the other columns will not be visible.
• If the width of some columns are set in absolute values (PX) and others are set in relative values (PCT), the absolute columns will be fixed and the remaining width is divided proportionally over the PCT columns. This allows users to define how the remaining width is allocated.

Parameters:

isFixed - true to use fixed table layout, false not to

See Also:

W3C HTML Specification

setWidth

public final void setWidth(java.lang.String width,
                           boolean isFixedLayout)

Set the width of the width and specify whether or not it should use fixed table layout. See setTableLayoutFixed(boolean) for more information about fixed layout tables.

Parameters:

width - the width of the table

isFixedLayout - true to use fixed width layout, false not to

See Also:

setTableLayoutFixed(boolean), W3C HTML Specification

doSetColumnWidth

protected void doSetColumnWidth(int column,
                                java.lang.String width)

Description copied from class: AbstractCellTable

Set the width of a column.

Specified by:

doSetColumnWidth in class AbstractCellTable<T>

Parameters:

column - the column index

width - the width, or null to clear the width

doSetHeaderVisible

protected void doSetHeaderVisible(boolean isFooter,
                                  boolean isVisible)

Description copied from class: AbstractCellTable

Show or hide a header section.

Specified by:

doSetHeaderVisible in class AbstractCellTable<T>

Parameters:

isFooter - true for the footer, false for the header

isVisible - true to show, false to hide

getTableBodyElement

protected TableSectionElement getTableBodyElement()

Description copied from class: AbstractCellTable

Get the tbody element that contains the render row values.

Specified by:

getTableBodyElement in class AbstractCellTable<T>

getTableFootElement

protected TableSectionElement getTableFootElement()

Description copied from class: AbstractCellTable

Get the tfoot element that contains the footers.

Specified by:

getTableFootElement in class AbstractCellTable<T>

getTableHeadElement

protected TableSectionElement getTableHeadElement()

Description copied from class: AbstractCellTable

Get the thead element that contains theh eaders.

Specified by:

getTableHeadElement in class AbstractCellTable<T>

onLoadingStateChanged

protected void onLoadingStateChanged(LoadingStateChangeEvent.LoadingState state)

Called when the loading state changes.

Overrides:

onLoadingStateChanged in class AbstractHasData<T>

Parameters:

state - the new loading state

refreshColumnWidths

protected void refreshColumnWidths()

Overrides:

refreshColumnWidths in class AbstractCellTable<T>