How to hide one column in vaadin table

How to hide one column in vaadin table

If I hide one column using the code


table.setVisibleColumns(new Object[] {table.getVisibleColumns()[0]
});

But after this

I can not possible to add rows in this table.


stateTable.addItem(.....);

How to possible to add rows after hide a table

If you use the addItem(Object cells, Object itemId) overload, note that the cells array must match exactly those columns that are actually visible, not the properties in the underlying Container. Yes, this is a bit weird. You can still add whole Items to the Table using addItem(Object).

setVisibleColumns() is not really designed to be called more than once - for instance, it removes header, alignment and icon from the non-visible columns and has no way of restoring them if a non-visible column becomes visible again.

As an alternative, you might set the columns
collapsible
and collapse the unwanted columns. The drawback is that the table will then contain a small button that allows the user to collapse and uncollapse the columns as well.


table.setColumnCollapsingAllowed(true);
table.setColumnCollapsed(columnId, true);
// you can set individual columns non-collapsible
table.setColumnCollapsible(otherColumnId, false);

Thanks Johannes, It’s working

How to avoid the visibility of collapsing button. (ie., the user does not to see the hidden column (hidden column selection not allowed) )

The only way I can think of to do that is to “hide” the element via CSS. You’ll need to create your own theme and styles.css if you haven’t already.

The following worked for me


 .v-table-column-selector {
    height: 0px;
    width: 0px;
  }

(Note that display:none doesn’t work for this particular feature of the table)

You should probably be more selective with the CSS (this will hide all column selectors, not just the one on your table).

Cheers,

Charles.

Thanks Charles


Do note
that hiding the column selector on client side is purely cosmetical and can easily be circumvented by the user, so this is not at all a secure way to do it if the columns contain sensitive information that the user is not supposed to see.

I thought about mentioning that… but didn’t. Thanks!

I know, this is old, but anyway, I had the same problem - but using the above hint did not completely remove the icon, a single clickable dot remained.

This removed it completely (adding to mytheme.scss):

.hidecollapse .v-table-column-selector { height: 0px; width: 0px; visibility: hidden; } Now using

myTable.addStyleName("hidecollapse"); Removes the icon completely. HTH, Martin.

On click of .v-table-column-selector it shows all column name. I want to save all hidden column in cookie on tick of column name. Is there any feature available to get name of columns affected?
How to store column name or related info in cookie on action of hide/show column in filter table?