Java/GWT/FlexTable

Материал из Java эксперт
Версия от 18:01, 31 мая 2010; (обсуждение)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

extends FlexTable implements TableListener

package com.jexp.gwt.client;
import java.util.*;
import java.util.Set;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.HistoryListener;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;

public class GWTClient implements EntryPoint, HistoryListener {
    private Table table;
    
    private void getData(){
        ArrayList values = new ArrayList();
        
        values.add( new Person ("A", "H", "E", "6" ));
        values.add( new Person("B", "G",  "E", "19" ));
        values.add( new Person("C", "F", "A", "17" ));
        values.add( new Person( "D", "E", "A" , "17"));
        
        table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) );
    }
    
    public void onModuleLoad() {
        table = new Table( null, "myTable" );
        table.setStyleName("myTable");
        RootPanel.get().add(table);
        getData();
        
        table.addTableListener( new TableListener(){
            public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
                History.newItem( ""+row );
            }
        });
        History.addHistoryListener( this );
    }
    
    public void onHistoryChanged(String historyToken){
        table.onCellClicked( table, Integer.parseInt( historyToken ), 0);
    }
    
}
 class Person {
    
    public String firstName;
    public String lastName;
    public String company;
    public String counts;
    
    public Person() {
    }
    
    public Person( String firstName, String lastName, String company, String counts ){
        this.firstName = firstName;
        this.lastName = lastName;
        this.rupany = company;
        this.counts = counts;
    }
    
}
class Table extends FlexTable implements TableListener {
    private String headerStyle;
    private String selectedStyle;
    private TableDataSource source;
    private int selectedRow;
    
    public Table(TableDataSource source, String stylePrefix) {
        super();
        this.setCellPadding(1);
        this.setCellSpacing(0);
        this.setWidth("100%");
        this.selectedStyle = stylePrefix + "-selected";
        this.headerStyle = stylePrefix + "-header";
        this.addTableListener(this);
        this.setSource( source );
    }
    public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
        this.getRowFormatter()
                .removeStyleName(selectedRow, selectedStyle);
        if ((source.getHeaderRow() == null) || (row > 0)) {
            this.getRowFormatter()
                .addStyleName(row, selectedStyle);
            selectedRow = row;
        }
    }
    
    public void setSource( TableDataSource source ){
        for( int i = this.getRowCount(); i > 0; i-- ){
            this.removeRow( 0 );
        }
        if( source == null ){
            return;
        }
        
        int row = 0;
        String[] headers = source.getHeaderRow();
        if( headers != null ){
            for( int i=0; i < headers.length; i++ ){
                this.setText( row, i , headers[i] );
            }
            this.getRowFormatter().addStyleName( row, headerStyle );
            row++;
        }
        int rows = source.getRowCount();
        for( int i=0 ; i <rows; i++ ){
            String[] values = source.getRow(i);
            for( int col=0; col < values.length; col++ ){
                this.setText( row, col, values[col] );
            }
            row++;
        }
        this.selectedRow = 0;
        this.source = source;
    }
}
 class SimpleDataSource implements TableDataSource {
    
    private String[] headers; 
    private String[][] data;
    
    public SimpleDataSource(Person[] people) {
        super();
        String[] headers = { "First Name", "Last Name", "Company", "Counts" };
        this.headers = headers;
        this.data = new String[people.length][4];
        for( int i=0; i < people.length ; i++ ){
            Person p = people[i];
            this.data[i][0] = p.firstName;
            this.data[i][1] = p.lastName;
            this.data[i][2] = p.rupany;
            this.data[i][3] = p.counts;
        }
    }
    public int getRowCount() {
        return data.length;
    }
    public String[] getRow(int i) {
        return data[i];
    }
    public String[] getHeaderRow() {
        return headers;
    }
   
}

interface TableDataSource {
    
    public String[] getHeaderRow();
    
    public int getRowCount();
    
    public String[] getRow(int row);
    
}





FlexTable with components

package com.jexp.gwt.client;
import com.google.gwt.user.client.*;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.core.client.*;
public class GWTClient implements EntryPoint{
  private final Object[][] rowData = {
  { new DeleteButton("Delete"), "A", "B", "C", "D"},
  { new DeleteButton("Delete"), "E", "F",  "G", "H"},
  { new DeleteButton("Delete"), "I", "J", "K", "L"}, 
  };
  
  private final ComponentFlexTable table = new ComponentFlexTable(rowData);
  private void onCellClicked(SourcesTableEvents sender, final int row, final int cell){
     if (row == 0) {
       return;
     }   
     final Widget widget = table.getWidget(row, cell);
       
     if (widget instanceof Label == false) {
          return;
     } 
     final Label label = (Label)widget;
     final TextBox textBox = new TextBox();
     textBox.setText(table.getText(row, cell));
     table.setWidget(row, cell, textBox);
     DeferredCommand.addCommand(new Command() {
       public void execute() {
         textBox.setFocus(true);
         textBox.selectAll();
       }
     });            
                 
     textBox.addKeyboardListener(
         new KeyboardListenerAdapter() {
           public void onKeyPress(Widget sender, 
               char keyCode, int modifiers) {
             if (keyCode == KeyboardListener.KEY_ENTER) {
               label.setText(textBox.getText());  
               table.setWidget(row, cell, label);
             } else if (keyCode ==
               KeyboardListener.KEY_ESCAPE) {
               table.setWidget(row, cell, label);
             }
           }
     }); 
     textBox.addFocusListener(new FocusListenerAdapter() {
       public void onLostFocus(Widget sender) {
         label.setText(textBox.getText());
         table.setWidget(row, cell, label);
       }
     });                
  }
  public void onModuleLoad() {
    table.addColumn("");    
    table.addColumn("Column 1");
    table.addColumn("Column 2");
    table.addColumn("Column 3");
    table.addColumn("Column 4");
    
    RootPanel.get().add(table);
    
    table.addTableListener(new TableListener() {
      public void onCellClicked(SourcesTableEvents sender, final int row, final int cell) {
        GWTClient.this.onCellClicked(sender, row, cell);
      }
    });
  }
  private class DeleteButton extends Button {
    public DeleteButton(String text) {
      super(text);
      addClickListener(new ClickListener() {
        public void onClick(Widget sender) {
          table.removeRow(getThisRow());
          table.updateRowStyle();
        }
      });
    }
    private int getThisRow() {
      for (int i=1; i < table.getRowCount(); ++i) {
        if (table.getWidget(i, 0) == this) {
          return i;
        }
      }
      return -1;
    }
  }
}
class ComponentFlexTable extends FlexTable {
  protected static final int HEADER_ROW = 0;
  private int rowIndex = 1;
  private Object[][] rowData = null;
  public ComponentFlexTable(Object[][] rowData) {
    insertRow(HEADER_ROW);
    getRowFormatter().addStyleName(HEADER_ROW,"ComponentFlexTable-Header");
    setCellSpacing(0);
    addStyleName("ComponentFlexTable");        
    this.rowData = rowData;
    createRows(0);
    updateRowStyle();
  }
  public void createRows(int rowIndex) {
    if (rowData == null)
      return;
    for (int row = rowIndex; row < rowData.length; row++) {
      addRow(rowData[row]);
    }
  }
  private void addRow(Object[] cellObjects) {
    for (int i = 0; i < cellObjects.length; i++) {
      addCell(rowIndex, i, cellObjects[i]);
    }
    rowIndex++;
  }
  public void addCell(int row, int cell, Object cellObject) {
    if (cellObject instanceof Widget)
      setWidget(row, cell, (Widget) cellObject);
    else
      setWidget(row, cell,new Label(cellObject.toString()));
    getCellFormatter().addStyleName(row, cell,"ComponentFlexTable-Cell");    
  }
  
  public void updateRowStyle() {
    HTMLTable.RowFormatter rf = getRowFormatter();
    for (int row = 1; row < getRowCount(); ++row) {
      if ((row % 2) != 0) {
        rf.removeStyleName(row,"ComponentFlexTable-EvenRow");
        rf.addStyleName(row,"ComponentFlexTable-OddRow");
      }else {
        rf.removeStyleName(row,"ComponentFlexTable-OddRow");
        rf.addStyleName(row,"ComponentFlexTable-EvenRow");
      }
    }
  }
  public void addColumn(Object columnHeading) {
    Widget widget = new Label(columnHeading.toString());
    int columnIndex = getColumnCount();
    widget.setWidth("100%");
    widget.addStyleName("ComponentFlexTable-ColumnLabel");
    setWidget(HEADER_ROW, columnIndex, widget);
    getCellFormatter().addStyleName(HEADER_ROW, columnIndex,"ComponentFlexTable-ColumnLabelCell");
  }
  public int getColumnCount() {
    return getCellCount(HEADER_ROW);
  }
}
/////////////
.ruponentFlexTable {
  border-top: thin solid #444444;
  border-left: thin solid #444444;
  border-right: thin solid #111111;
  border-bottom: thin solid #111111;
  background-color:  #505050;
}
.ruponentFlexTable-Header {
}
.ruponentFlexTable-OddRow {
  background-color: #cccccc;
}
.ruponentFlexTable-EvenRow {
  background-color:  #505050;
}

.ruponentFlexTable-ColumnLabel {
  color: white;
  padding: 3px;
}
.ruponentFlexTable-ColumnLabelCell {
  color: white;
  border-width: 0 0 0 1px;
  border-style: solid;
  border-color: white;
  margin: 0;
  padding: 0;
  text-align: center;
}
.ruponentFlexTable-Cell {
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  color: white;
  border-color: white;
  padding: 5px;
}





FlexTable with row style

package com.jexp.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTMLTable;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
public class GWTClient implements EntryPoint{
  private static final int HeaderRowIndex = 0;
  private static final Object[][] rowData = {
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
  };
  
  private FlexTable flexTable = new FlexTable();
  public void onModuleLoad() {
    flexTable.insertRow(HeaderRowIndex);
    flexTable.getRowFormatter().addStyleName(HeaderRowIndex,"FlexTable-Header");
    
    addColumn("Column1");
    addColumn("Column12");
    addColumn("Column13");
    addColumn("Column14");
    
    for (int row = 0; row < rowData.length; row++) {
      addRow(rowData[row]);        
    }
    applyDataRowStyles();
    
    flexTable.setCellSpacing(0);
    flexTable.addStyleName("FlexTable");  
    
    RootPanel.get().add(flexTable);
  }
  private void addColumn(Object columnHeading) {
    Widget widget = createCellWidget(columnHeading);
    int cell = flexTable.getCellCount(HeaderRowIndex);
    
    widget.setWidth("100%");
    widget.addStyleName("FlexTable-ColumnLabel");
    
    flexTable.setWidget(HeaderRowIndex, cell, widget);
    
    flexTable.getCellFormatter().addStyleName(
        HeaderRowIndex, cell,"FlexTable-ColumnLabelCell");
  }
  
  private Widget createCellWidget(Object cellObject) {
    Widget widget = null;
    if (cellObject instanceof Widget)
      widget = (Widget) cellObject;
    else
      widget = new Label(cellObject.toString());
    return widget;
  }
  int rowIndex = 1;
  private void addRow(Object[] cellObjects) {
    
    for (int cell = 0; cell < cellObjects.length; cell++) {
      Widget widget = createCellWidget(cellObjects[cell]);
      flexTable.setWidget(rowIndex, cell, widget);
      flexTable.getCellFormatter().addStyleName(rowIndex,cell,"FlexTable-Cell");
    }
    rowIndex++;
  }
  
  private void applyDataRowStyles() {
    HTMLTable.RowFormatter rf = flexTable.getRowFormatter();
    
    for (int row = 1; row < flexTable.getRowCount(); ++row) {
      if ((row % 2) != 0) {
        rf.addStyleName(row, "FlexTable-OddRow");
      }
      else {
        rf.addStyleName(row, "FlexTable-EvenRow");
      }
    }
  }
}
//////////////////
.FlexTable {
  border-top: thin solid #444444;
  border-left: thin solid #444444;
  border-right: thin solid #111111;
  border-bottom: thin solid #111111;
  background-color:  #505050;
}
.FlexTable-OddRow {
  background-color: #cccccc;
}
.FlexTable-EvenRow {
  background-color:  #505050;
}

.FlexTable-ColumnLabel {
  color: white;
  padding: 3px;
}
.FlexTable-ColumnLabelCell {
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: white;
  margin: 0;
  padding: 0;
  text-align: center;
}
.FlexTable-Cell {
  border-width: 0px 0px 0px 1px;
  border-style: solid;
  border-color: white;
  padding: 5px;
}





Scroll FlexTable

package com.jexp.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.*;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.HTMLTable;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
public class GWTClient implements EntryPoint{
  private static final int HeaderRowIndex = 0;
  private static final Object[][] rowData = {
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
    { "A", "D", "I", "J"},
    { "B", "E",  "H", "K"},
    { "C", "F", "G", "L"},
  };
  
  private FlexTable flexTable = new FlexTable();
  public void onModuleLoad() {
    flexTable.insertRow(HeaderRowIndex);
    flexTable.getRowFormatter().addStyleName(HeaderRowIndex,"FlexTable-Header");
    
    addColumn("Column1");
    addColumn("Column12");
    addColumn("Column13");
    addColumn("Column14");
    
    for (int row = 0; row < rowData.length; row++) {
      addRow(rowData[row]);        
    }
    applyDataRowStyles();
    
    flexTable.setCellSpacing(0);
    flexTable.addStyleName("FlexTable");  
    
    ScrollPanel scrollPanel = new ScrollPanel();
    flexTable.setWidth("100%");
    scrollPanel.add(flexTable);
    scrollPanel.setSize("300", "200");    
    
    
    RootPanel.get().add(scrollPanel);
  }
  private void addColumn(Object columnHeading) {
    Widget widget = createCellWidget(columnHeading);
    int cell = flexTable.getCellCount(HeaderRowIndex);
    
    widget.setWidth("100%");
    widget.addStyleName("FlexTable-ColumnLabel");
    
    flexTable.setWidget(HeaderRowIndex, cell, widget);
    
    flexTable.getCellFormatter().addStyleName(
        HeaderRowIndex, cell,"FlexTable-ColumnLabelCell");
  }
  
  private Widget createCellWidget(Object cellObject) {
    Widget widget = null;
    if (cellObject instanceof Widget)
      widget = (Widget) cellObject;
    else
      widget = new Label(cellObject.toString());
    return widget;
  }
  int rowIndex = 1;
  private void addRow(Object[] cellObjects) {
    
    for (int cell = 0; cell < cellObjects.length; cell++) {
      Widget widget = createCellWidget(cellObjects[cell]);
      flexTable.setWidget(rowIndex, cell, widget);
      flexTable.getCellFormatter().addStyleName(rowIndex,cell,"FlexTable-Cell");
    }
    rowIndex++;
  }
  
  private void applyDataRowStyles() {
    HTMLTable.RowFormatter rf = flexTable.getRowFormatter();
    
    for (int row = 1; row < flexTable.getRowCount(); ++row) {
      if ((row % 2) != 0) {
        rf.addStyleName(row, "FlexTable-OddRow");
      }
      else {
        rf.addStyleName(row, "FlexTable-EvenRow");
      }
    }
  }
}





Table Mouse Over Event

package com.jexp.gwt.client;
import java.util.*;
import java.util.Set;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.HistoryListener;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;

public class GWTClient implements EntryPoint, HistoryListener {
    private Table table;
    
    private void getData(){
        ArrayList values = new ArrayList();
        
        values.add( new Person ("A", "H", "E", "6" ));
        values.add( new Person("B", "G",  "E", "19" ));
        values.add( new Person("C", "F", "A", "17" ));
        values.add( new Person( "D", "E", "A" , "17"));
        
        table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) );
    }
    
    public void onModuleLoad() {
        table = new Table( null, "myTable" );
        table.setStyleName("myTable");
        RootPanel.get().add(table);
        getData();
        
        table.addTableListener( new TableListener(){
            public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
                History.newItem( ""+row );
            }
        });
        History.addHistoryListener( this );
    }
    
    public void onHistoryChanged(String historyToken){
        table.onCellClicked( table, Integer.parseInt( historyToken ), 0);
    }
    
}
 class Person {
    
    public String firstName;
    public String lastName;
    public String company;
    public String counts;
    
    public Person() {
    }
    
    public Person( String firstName, String lastName, String company, String counts ){
        this.firstName = firstName;
        this.lastName = lastName;
        this.rupany = company;
        this.counts = counts;
    }
    
}
class Table extends FlexTable implements TableListener {
    private String headerStyle;
    private String selectedStyle;
    private TableDataSource source;
    private int selectedRow;
    
    public Table(TableDataSource source, String stylePrefix) {
        super();
        this.setCellPadding(1);
        this.setCellSpacing(0);
        this.setWidth("100%");
        this.selectedStyle = stylePrefix + "-selected";
        this.headerStyle = stylePrefix + "-header";
        this.addTableListener(this);
        this.setSource( source );
        
        sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |Event.ONMOUSEOUT);         
    }
    public void onBrowserEvent(Event event) {
            Element td = getEventTargetCell(event);
            if (td == null) return;
            Element tr = DOM.getParent(td);
            switch (DOM.eventGetType(event)) {
                    case Event.ONMOUSEDOWN: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
                            onRowClick(tr);
                            break;
                    }
                    case Event.ONMOUSEUP: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff");
                            break;
                    }
                    case Event.ONMOUSEOVER: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
                            onRowRollover(tr);
                            break;
                    }
                    case Event.ONMOUSEOUT: {
                            DOM.setStyleAttribute(tr, "backgroundColor","#ffffff");
                            break;
                }
        }
    
    }
    public void onRowClick(Element event){
           
    
    }
    public void onRowRollover(Element event){
           
    
    }

    public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
        this.getRowFormatter()
                .removeStyleName(selectedRow, selectedStyle);
        if ((source.getHeaderRow() == null) || (row > 0)) {
            this.getRowFormatter()
                .addStyleName(row, selectedStyle);
            selectedRow = row;
        }
    }
    
    public void setSource( TableDataSource source ){
        for( int i = this.getRowCount(); i > 0; i-- ){
            this.removeRow( 0 );
        }
        if( source == null ){
            return;
        }
        
        int row = 0;
        String[] headers = source.getHeaderRow();
        if( headers != null ){
            for( int i=0; i < headers.length; i++ ){
                this.setText( row, i , headers[i] );
            }
            this.getRowFormatter().addStyleName( row, headerStyle );
            row++;
        }
        int rows = source.getRowCount();
        for( int i=0 ; i <rows; i++ ){
            String[] values = source.getRow(i);
            for( int col=0; col < values.length; col++ ){
                this.setText( row, col, values[col] );
            }
            row++;
        }
        this.selectedRow = 0;
        this.source = source;
    }
}
 class SimpleDataSource implements TableDataSource {
    
    private String[] headers; 
    private String[][] data;
    
    public SimpleDataSource(Person[] people) {
        super();
        String[] headers = { "First Name", "Last Name", "Company", "Counts" };
        this.headers = headers;
        this.data = new String[people.length][4];
        for( int i=0; i < people.length ; i++ ){
            Person p = people[i];
            this.data[i][0] = p.firstName;
            this.data[i][1] = p.lastName;
            this.data[i][2] = p.rupany;
            this.data[i][3] = p.counts;
        }
    }
    public int getRowCount() {
        return data.length;
    }
    public String[] getRow(int i) {
        return data[i];
    }
    public String[] getHeaderRow() {
        return headers;
    }
   
}

interface TableDataSource {
    
    public String[] getHeaderRow();
    
    public int getRowCount();
    
    public String[] getRow(int row);
    
}





Table on Browser Event

package com.jexp.gwt.client;
import java.util.*;
import java.util.Set;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.HistoryListener;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;

public class GWTClient implements EntryPoint, HistoryListener {
    private Table table;
    
    private void getData(){
        ArrayList values = new ArrayList();
        
        values.add( new Person ("A", "H", "E", "6" ));
        values.add( new Person("B", "G",  "E", "19" ));
        values.add( new Person("C", "F", "A", "17" ));
        values.add( new Person( "D", "E", "A" , "17"));
        
        table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) );
    }
    
    public void onModuleLoad() {
        table = new Table( null, "myTable" );
        table.setStyleName("myTable");
        RootPanel.get().add(table);
        getData();
        
        table.addTableListener( new TableListener(){
            public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
                History.newItem( ""+row );
            }
        });
        History.addHistoryListener( this );
    }
    
    public void onHistoryChanged(String historyToken){
        table.onCellClicked( table, Integer.parseInt( historyToken ), 0);
    }
    
}
 class Person {
    
    public String firstName;
    public String lastName;
    public String company;
    public String counts;
    
    public Person() {
    }
    
    public Person( String firstName, String lastName, String company, String counts ){
        this.firstName = firstName;
        this.lastName = lastName;
        this.rupany = company;
        this.counts = counts;
    }
    
}
class Table extends FlexTable implements TableListener {
    private String headerStyle;
    private String selectedStyle;
    private TableDataSource source;
    private int selectedRow;
    
    public Table(TableDataSource source, String stylePrefix) {
        super();
        this.setCellPadding(1);
        this.setCellSpacing(0);
        this.setWidth("100%");
        this.selectedStyle = stylePrefix + "-selected";
        this.headerStyle = stylePrefix + "-header";
        this.addTableListener(this);
        this.setSource( source );
        
        sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |Event.ONMOUSEOUT);         
    }
    public void onBrowserEvent(Event event) {
            Element td = getEventTargetCell(event);
            if (td == null) return;
            Element tr = DOM.getParent(td);
            switch (DOM.eventGetType(event)) {
                    case Event.ONMOUSEDOWN: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
                            onRowClick(tr);
                            break;
                    }
                    case Event.ONMOUSEUP: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff");
                            break;
                    }
                    case Event.ONMOUSEOVER: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
                            onRowRollover(tr);
                            break;
                    }
                    case Event.ONMOUSEOUT: {
                            DOM.setStyleAttribute(tr, "backgroundColor","#ffffff");
                            break;
                }
        }
    
    }
    public void onRowClick(Element event){
           
    
    }
    public void onRowRollover(Element event){
           
    
    }
    public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
        this.getRowFormatter()
                .removeStyleName(selectedRow, selectedStyle);
        if ((source.getHeaderRow() == null) || (row > 0)) {
            this.getRowFormatter()
                .addStyleName(row, selectedStyle);
            selectedRow = row;
        }
    }
    
    public void setSource( TableDataSource source ){
        for( int i = this.getRowCount(); i > 0; i-- ){
            this.removeRow( 0 );
        }
        if( source == null ){
            return;
        }
        
        int row = 0;
        String[] headers = source.getHeaderRow();
        if( headers != null ){
            for( int i=0; i < headers.length; i++ ){
                this.setText( row, i , headers[i] );
            }
            this.getRowFormatter().addStyleName( row, headerStyle );
            row++;
        }
        int rows = source.getRowCount();
        for( int i=0 ; i <rows; i++ ){
            String[] values = source.getRow(i);
            for( int col=0; col < values.length; col++ ){
                this.setText( row, col, values[col] );
            }
            row++;
        }
        this.selectedRow = 0;
        this.source = source;
    }
}
 class SimpleDataSource implements TableDataSource {
    
    private String[] headers; 
    private String[][] data;
    
    public SimpleDataSource(Person[] people) {
        super();
        String[] headers = { "First Name", "Last Name", "Company", "Counts" };
        this.headers = headers;
        this.data = new String[people.length][4];
        for( int i=0; i < people.length ; i++ ){
            Person p = people[i];
            this.data[i][0] = p.firstName;
            this.data[i][1] = p.lastName;
            this.data[i][2] = p.rupany;
            this.data[i][3] = p.counts;
        }
    }
    public int getRowCount() {
        return data.length;
    }
    public String[] getRow(int i) {
        return data[i];
    }
    public String[] getHeaderRow() {
        return headers;
    }
   
}

interface TableDataSource {
    
    public String[] getHeaderRow();
    
    public int getRowCount();
    
    public String[] getRow(int row);
    
}





Table Single Row Click Event

package com.jexp.gwt.client;
import java.util.*;
import java.util.Set;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.History;
import com.google.gwt.user.client.HistoryListener;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.rpc.ServiceDefTarget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SourcesTableEvents;
import com.google.gwt.user.client.ui.TableListener;

public class GWTClient implements EntryPoint, HistoryListener {
    private Table table;
    
    private void getData(){
        ArrayList values = new ArrayList();
        
        values.add( new Person ("A", "H", "E", "6" ));
        values.add( new Person("B", "G",  "E", "19" ));
        values.add( new Person("C", "F", "A", "17" ));
        values.add( new Person( "D", "E", "A" , "17"));
        
        table.setSource( new SimpleDataSource( (Person[]) values.toArray( new Person[values.size()]) ) );
    }
    
    public void onModuleLoad() {
        table = new Table( null, "myTable" );
        table.setStyleName("myTable");
        RootPanel.get().add(table);
        getData();
        table.addTableListener( new TableListener(){
            public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
                History.newItem( ""+row );
            }
        });
        History.addHistoryListener( this );
    }
    
    public void onHistoryChanged(String historyToken){
        table.onCellClicked( table, Integer.parseInt( historyToken ), 0);
    }
    
}
 class Person {
    
    public String firstName;
    public String lastName;
    public String company;
    public String counts;
    
    /** Creates a new instance of Person */
    public Person() {
    }
    
    public Person( String firstName, String lastName, String company, String counts ){
        this.firstName = firstName;
        this.lastName = lastName;
        this.rupany = company;
        this.counts = counts;
    }
    
}
class Table extends FlexTable implements TableListener {
    private String headerStyle;
    private String selectedStyle;
    private TableDataSource source;
    private int selectedRow;
    
    public Table(TableDataSource source, String stylePrefix) {
        super();
        this.setCellPadding(1);
        this.setCellSpacing(0);
        this.setWidth("100%");
        this.selectedStyle = stylePrefix + "-selected";
        this.headerStyle = stylePrefix + "-header";
        this.addTableListener(this);
        this.setSource( source );
        
        sinkEvents(Event.ONMOUSEDOWN | Event.ONMOUSEUP | Event.ONMOUSEOVER |Event.ONMOUSEOUT);         
    }
    public void onBrowserEvent(Event event) {
            Element td = getEventTargetCell(event);
            if (td == null) return;
            Element tr = DOM.getParent(td);
            switch (DOM.eventGetType(event)) {
                    case Event.ONMOUSEDOWN: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
                            onRowClick(tr);
                            break;
                    }
                    case Event.ONMOUSEUP: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffffff");
                            break;
                    }
                    case Event.ONMOUSEOVER: {
                            DOM.setStyleAttribute(tr, "backgroundColor", "#ffce00");
                            onRowRollover(tr);
                            break;
                    }
                    case Event.ONMOUSEOUT: {
                            DOM.setStyleAttribute(tr, "backgroundColor","#ffffff");
                            break;
                }
        }
    
    }
    public void onRowClick(Element event){
           
    
    }
    public void onRowRollover(Element event){
           
    
    }

    public void onCellClicked(SourcesTableEvents sender, 
                int row, int cell) {
        this.getRowFormatter()
                .removeStyleName(selectedRow, selectedStyle);
        if ((source.getHeaderRow() == null) || (row > 0)) {
            this.getRowFormatter()
                .addStyleName(row, selectedStyle);
            selectedRow = row;
        }
    }
    
    public void setSource( TableDataSource source ){
        for( int i = this.getRowCount(); i > 0; i-- ){
            this.removeRow( 0 );
        }
        if( source == null ){
            return;
        }
        
        int row = 0;
        String[] headers = source.getHeaderRow();
        if( headers != null ){
            for( int i=0; i < headers.length; i++ ){
                this.setText( row, i , headers[i] );
            }
            this.getRowFormatter().addStyleName( row, headerStyle );
            row++;
        }
        int rows = source.getRowCount();
        for( int i=0 ; i <rows; i++ ){
            String[] values = source.getRow(i);
            for( int col=0; col < values.length; col++ ){
                this.setText( row, col, values[col] );
            }
            row++;
        }
        this.selectedRow = 0;
        this.source = source;
    }
}
 class SimpleDataSource implements TableDataSource {
    
    private String[] headers; 
    private String[][] data;
    
    public SimpleDataSource(Person[] people) {
        super();
        String[] headers = { "First Name", "Last Name", "Company", "Counts" };
        this.headers = headers;
        this.data = new String[people.length][4];
        for( int i=0; i < people.length ; i++ ){
            Person p = people[i];
            this.data[i][0] = p.firstName;
            this.data[i][1] = p.lastName;
            this.data[i][2] = p.rupany;
            this.data[i][3] = p.counts;
        }
    }
    public int getRowCount() {
        return data.length;
    }
    public String[] getRow(int i) {
        return data[i];
    }
    public String[] getHeaderRow() {
        return headers;
    }
   
}

interface TableDataSource {
    
    public String[] getHeaderRow();
    
    public int getRowCount();
    
    public String[] getRow(int row);
    
}





Use FlexTable

package com.jexp.gwt.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.CheckBox;
import com.google.gwt.user.client.ui.ruposite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.ScrollListener;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.user.client.ui.RootPanel;
public class GWTClient implements EntryPoint{
  public void onModuleLoad() {
    FlexTable flexTable = new FlexTable();
    flexTable.setWidget(0, 0, new Label("0,0"));
    flexTable.setWidget(0, 1, new Label("FlexTable"));
    flexTable.setWidget(0, 2, new Label("0,2"));
    flexTable.setWidget(1, 0, new Label("1,0"));
    flexTable.setWidget(1, 1, new Label("1,1"));
    flexTable.setWidget(1, 2, new Label("1,2"));
    flexTable.setWidget(2, 0, new Label("2,0"));
    flexTable.setWidget(2, 1, new Label("2,1"));
    flexTable.setWidget(2, 2, new Label("2,2"));
    flexTable.setWidget(3, 0, new Label("3,0 - span columns"));
    flexTable.setStyleName("panel flexTable");
    flexTable.getFlexCellFormatter().setColSpan(3, 0, 3);
    for (int i = 0; i < flexTable.getRowCount(); i++) {
        for (int j = 0; j < flexTable.getCellCount(i); j++) {
            if ((j % 2) == 0) {
                flexTable.getFlexCellFormatter()
                         .setStyleName(i, j, "tableCell-even");
            } else {
                flexTable.getFlexCellFormatter()
                         .setStyleName(i, j, "tableCell-odd");
            }
        }
    }
    RootPanel.get().add(flexTable);
  }
}
//////////////////////////
.flexTable {
  width: 150px;
  height: 150px;
  position: absolute; 
  left: 15px; 
  top: 350px;  
}
.panel {
  background-color: #C3D9FF;
  border: 1px solid #000000;
  padding: 3px;
  margin: 3px;
  font-weight: normal;  
}