in GWT, How to add a row on top of header of celltable?

Question

This is very interesting, how can we add a row on top of header of celltable in GWT?

Ok, Say,GWT Header only support sorting, but i want to do other stuffs on each of the column as well (such filter, hide, ....)

So i want to add a row on top of header of celltable. On the row, there r many button, each button is corresponding to a column. When user click a button then they can do other stuffs like filter or hide.

Example:

Button1 - Button2 - Button3.

Header1 - Header2 - Header3.

Cell 11 - Cell 12 - Cell 13.

Cell 21 - Cell 22 - Cell 23.

more cell....

Answer 1

The only way using GWT is extending the CellTable implementation and create your own hacking code in the part where CellTable creates its header. Also you have to consider adding many methods to add buttons, handlers etc. I have deal with this before and it is a very tedious task.

But you have the option of modifying the DOM once the table has been created. There are many ways to do that, but the easier way I know is using gwtquery aka gquery.

In your case I would use a code like this:

 // import gquery stuff
 import static com.google.gwt.query.client.GQuery.*;

 // Create your table and add its colums
 final CellTable<MyObject> celltable = ...
 [...] 

 // Delay until the table has been full rendered, I use gquery delay() because 
 // of its syntax but you could use Scheduler or Timer as well
 $(celltable).delay(0, new Function(){
    public void f() {

     // Now we add a div to each header, you could add any html though
     $("th", celltable).prepend($("<div class='mypanel' style='height: 40px'/>"));

     // gquery's widget plugin is able to promote certain dom elements 
     // like div/th/... etc into HTMLpanels
     GQuery panels = $(".mypanel", celltable).as(Widgets).panel();

     // gquery can return a sorted list of widgets asociated with a set of elements
     List<HTMLPanel> list = panels.widgets(HTMLPanel.class);

     // Now you can add any gwt widget to your panels
     for (int i = 0; i < list.size(); i++) {
       list.get(i).add(new Button("Button: " + i));
     }
   }
});

Here a screenshot of what produces the code above:

This approach implies that you have to import gwtquery into your project, but honestly, I dont imagine me working on a GWT project without it :-),

Gquery helps a lot when designers ask for enhancing gwt-widgets and you don't want to enforce tweaks (which most times implies complex coding and investigation) to do very simple things like to modify the dom generated by a widget.

Additionally Gquery comes with a lot of stuff you can take advantage of, like easy ajax syntax, promises, plugins, use js methods and properties without writing jsni, etc.

Answer 2

Well, its almost not possible,that adding a row on top of header which is out ofcell table.

But the functionality you said can acheive by adding a horizantalpanel with zero padding and adding your buttons to that panel (obviously widths of buttons should same as your columns widths and with little css. )

On clicking of each button you can do the operations or sorting oncelltable.

disclaimer:this is my possible solution.

Answer 3

Since GWT 2.5 it should be possible to provide a custom HeaderBuilder or extend AbstractHeaderOrFooterBuilder/DefaultHeaderOrFooterBuilder to solve your problem.
You can have a look at the this CustomTableGrid showcase. It defines a custom CellTableBuilder but the same principles should also apply to the HeaderBuilder interface.