Disabling resizing of columns in tables

Vaadin 6 / 7 / 8 Framework UI
1

Is it possible to disable the resizing of column sizes of Tables?

I was able to hide the resizable look and cursor by modifying the css, would I need to create a custom component inheriting the Table to do this otherwise?

Thanks,
Ajay

2

There is no API for disabling column resizing. An untested idea for disabling it - try to set DIV.i-table-resizer width to be 0 (in CSS). Then it should be impossible use resizing feature.

  • Joonas
3

Just a word of caution - “impossible” is a strong word. The width could be re-enabled with anything that can manipulate CSSes on-line (like FireBug).

4

Sure… Fortunately it probably does not matter if someone “hacks around” disabling column resizing :)

5

I tried setting the CSS width of .i-table-resizer to 0, but as FireBug indicates, the element sets the width fix to 4 px. As far as I know then there is no possibility to change the value by CSS.

But I think this should be added to the API. What do you think about such a feature request?

6

You can override styles set by javascript using !important declaration.

This works:

.i-table-resizer {
  width: 0px !important;
}

Or this:

.i-table-resizer {
  display: none;
}
7

Hi,
had anything about this issue changed?
Or is it still impossible to disable column resizing in table through API?

Thanks

8

Hi Sorry for reviving this old thread but i need to stop the client from changing the table column width. Can anyone show me how to implement the Css fix given above. Sorry I am really new to using this framework and could really use some help. Thanks for your time…

9

I have valo theme, its work with:
.v-table-resizer {
display: none;
}

10

and what about if you want to resize only a few columns? Tipical case scenario: check column which you dont want to resize its width, while the rest of them you want to