how to add another widget in vaadin table like filterbar in FilterTable?

Flow
1

I followed the
filteringtable
 addon from vaadin. I copied all code from that
filteringtable
 project and created another project as
extfilteringtable
 to do some changes inside table. In my project every class of
filteringtable
 addon is prefixed as Ext Example--
FilterTable
 is replaced as
ExtFilterTable
. I am trying to add another header onto the table. So I added code inside
VExtFilterTable
 as below at the end of that file


/* Added for Double Header */

public boolean showDoubleHeader=true;
public final DoubleTableHead tdHead = new DoubleTableHead();
public class DoubleTableHead extends Panel {
     private static final int dWRAPPER_WIDTH = 900000;
     ArrayList<Widget> dvisibleCells = new ArrayList<Widget>();
     HashMap<String, HeaderCell> davailableCells = new HashMap<String, HeaderCell>();
     Element ddiv = DOM.createDiv();
     Element dhTableWrapper = DOM.createDiv();
     Element dhTableContainer = DOM.createDiv();
     Element dtable = DOM.createTable();
     Element dheaderTableBody = DOM.createTBody();
     Element dtr = DOM.createTR();
     private final Element dcolumnSelector = DOM.createDiv();
     private int dfocusedSlot = -1;
     public DoubleTableHead() {
         DOM.setStyleAttribute(dhTableWrapper, "overflow", "hidden");
         DOM.setStyleAttribute(dcolumnSelector, "display", "none");
         DOM.appendChild(dtable, dheaderTableBody);
         DOM.appendChild(dheaderTableBody, dtr);
         DOM.appendChild(dhTableContainer, dtable);
         DOM.appendChild(dhTableWrapper, dhTableContainer);
         DOM.appendChild(ddiv, dhTableWrapper);
         DOM.appendChild(ddiv, dcolumnSelector);
         setElement(ddiv);
     }
     public void disableBrowserIntelligence() {
         dhTableContainer.getStyle().setWidth(dWRAPPER_WIDTH, Style.Unit.PX);
     }
     protected void updateStyleNames(String primaryStyleName) {
         dhTableWrapper.setClassName(primaryStyleName + "-header");
         dcolumnSelector.setClassName(primaryStyleName + "-column-selector");
         setStyleName(primaryStyleName + "-header-wrap");
     }
     @Override
     public boolean remove(Widget child) {
         if (dvisibleCells.contains(child)) {
               dvisibleCells.remove(child);
               orphan(child);
               DOM.removeChild(DOM.getParent(child.getElement()), child.getElement());
               return true;
         }
         return false;
     }
     @Override public Iterator<Widget> iterator() {
         return dvisibleCells.iterator();
     }
}

and inside constructor I added the following code after the line
insert(filters, 1);

insert(tdHead,0); tdHead.disableBrowserIntelligence(); tdHead.updateStyleNames(getStylePrimaryName()); In side the
extfilteringtable-demo
 project I am showing the demo how it looks.

But in case of
ExtFilterTreeTable(FilterTreeTable)
 when row expand icon is clicked the expand and table is not working. On scroll the contents are not loading.

If I am using same container for two table, and I am using filter for
ExtFilterTreeTable
, It is filtering perfectly in other table but not in the
ExtfilterTreeTable
. That means after clicking over expand icon full content of table become static. No other data are loading on lazy load.

If I am commenting the line
insert(tdHead,0);
 everything works perfectly but my widget is not visible. I need the widget to visible.

I am attaching my project in thie bellow link…

https://www.dropbox.com/s/hp8ap1bqjro16p7/My%20FilterTable.zip

In
Filtertable
 they are adding one filterbar. Like that I am adding another bar. It looks well perfectly in all type of table. But in case of
Tree table
 after clicking
node expand
 container is not loading on scrool. Everything become static

Can anybody help me to overcome this issue, how to make it work…

Thanks in advance…