Package com.google.gwt.user.cellview.client

Class CellTable<T>

  • Type Parameters:
    T - the data type of each row
    All Implemented Interfaces:
    HasAttachHandlers, HasHandlers, AbstractCellTable.TableSectionChangeHandler, HasKeyboardPagingPolicy, HasKeyboardSelectionPolicy, EventListener, Focusable, HasVisibility, IsRenderable, IsWidget, HasCellPreviewHandlers<T>, HasData<T>, HasKeyProvider<T>, HasRows
    public class CellTable<T>
extends AbstractCellTable<T>
implements AbstractCellTable.TableSectionChangeHandler
    A tabular view that supports paging and columns.

    Columns

    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.

    Headers and Footers

    A Header can be placed at the top (header) or bottom (footer) of the CellTable. You can specify a header as text using AbstractCellTable.addColumn(Column, String), or you can create a custom Header that can change with the value of the cells, such as a column total. The Header will be rendered every time the row data changes or the table is redrawn. If you pass the same header instance (==) into adjacent columns, the header will span the columns.

    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);
  }
}

    • Constructor Detail

      • 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.Resources.
        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.Resources, 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.Resources, 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

      • CellTable

        public CellTable​(int pageSize,
                 CellTable.Resources resources,
                 ProvidesKey<T> keyProvider,
                 Widget loadingIndicator,
                 boolean enableColGroup,
                 boolean attachLoadingPanel)
        Constructs a table with the specified page size, CellTable.Resources, 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
        enableColGroup - enable colgroup element. This is used when the table is using fixed layout and when column style is added. Ignoring this element will boost rendering performance. Note that when colgroup is disabled, setColumnWidth(com.google.gwt.user.cellview.client.Column<T, ?>, java.lang.String), setTableLayoutFixed(boolean) and addColumnStyleName(int,java.lang.String) are no longer supported
        attachLoadingPanel - attaching the table section that contains the empty table widget and the loading indicator. Attaching this to the table significantly improve the rendering performance in webkit based browsers but also introduces significantly larger latency in IE. If the panel is not attached to the table, it won't be displayed. But the user can call getTableLoadingSection() and attach it to other elements outside the table element

    • Method Detail

      • 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

      • getTableLoadingSection

        public TableSectionElement getTableLoadingSection()
        Return the section that display loading indicator and the empty table widget. If attachLoadingPanel is set to false in the constructor, this section may not be attached to any element.

      • 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

      • 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

      • setRemoveColumnsOnHide

        public void setRemoveColumnsOnHide​(boolean removeColumnsOnHide)
        Configures how the colgroup is updated when a column is removed. If true, removing a column will also remove the corresponding col element from the colgroup. If false, removing a column will leave the col element on the colgroup and set it to zero width and display hidden.

        For legacy reasons, the default is false even though it is known to cause some column sizing issues in Firefox.

      • 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

      • doAttachChildren

        protected void doAttachChildren()
        Description copied from class: Widget
        If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call Widget.onAttach() for each of its child widgets.
        Overrides:
        doAttachChildren in class Widget
        See Also:
        Widget.onAttach()

      • doDetachChildren

        protected void doDetachChildren()
        Description copied from class: Widget
        If a widget contains one or more child widgets that are not in the logical widget hierarchy (the child is physically connected only on the DOM level), it must override this method and call Widget.onDetach() for each of its child widgets.
        Overrides:
        doDetachChildren in class Widget
        See Also:
        Widget.onDetach()