Hide Column in CellTable

[Abdullah]

Hi,

How to hide the columns in gwt Cell table?I need column for grouping purpose but don't want to show in table.Is there any way to hide..Any clue?

[Abdullah]

From the below thread

https://groups.google.com/forum/#!searchin/google-web-toolkit/hiding$20column$20in$20celltable/google-web-toolkit/3XFe2jwI2ks/E_hDjEej5E8J

 Lot of suggestion is to use add/removeColumnStyleName but i used the same in my code but still not able to hide the column.See the below code snippet..

Code:

TextColumn<ContactInfor> empIdTxt = new TextColumn<ContactInfor>() {

@Override

public String getValue(ContactInfor object) {

return object.empId;

}

};

cellTable.addColumn(empIdTxt, "EMPLOYEE ID");

TextColumn<ContactInfor> addressTxt = new TextColumn<ContactInfor>() {

@Override

public String getValue(ContactInfor object) {

return object.address;

}

};

cellTable.addColumn(addressTxt, "ADDRESS");

cellTable.setRowData(loadContactInfo());

cellTable.addColumnStyleName(1, "hide"); // added stylename to the Column with index 1

CSS:

Added this class in stylesheet

  .hide {

display: none;

    }   

Is any other think is missed out here?

[Jens]

cellTable.addColumnStyleName(1, "hide"); // added stylename to the Column with index 1

CSS:

Added this class in stylesheet

  .hide {

display: none;

    }   

Hopefully it is a normal CSS file and not a CssResource? Check your browsers dev tools to see what is going on with your css.

-- J.

[Abdullah]

Hi Jens,

Thanks for your reply,

It is normal CSS only,not cssResource see the below snapshot

CSS which are applied to the celltable column is appear on colgroup. Any Clue?

[Jens]

I see. On the <col> element you need to use "visibility:collapse" to hide the entire column. However browser support is pretty poor for it, seems to only work well in Firefox.

The other thread you have linked pretty much has all information available to solve your issue. Basically you have to show/hide each cell in a column like the guy in the last post did with JQuery.

If the number of columns in your table is fixed and known then you could also use the following css (example for 3 columns):

/* thead: th cells */

.hide-col-1 th:nth-of-type(1),

.hide-col-2 th:nth-of-type(2),

.hide-col-3 th:nth-of-type(3),

/* tbody/tfoot: td cells */

.hide-col-1 td:nth-of-type(1),

.hide-col-2 td:nth-of-type(2),

.hide-col-3 td:nth-of-type(3) {

    display:none;

}

Then you can add/remove "hide-col-1" to the table and the corresponding column will be hidden. Here is a jsfiddle that hides the second column: http://jsfiddle.net/odbqq04x/

-- J.