How to make really thin table columns

Vaadin 6 / 7 / 8 Framework UI
1

I have a table with several columns that just contain an icon or a colour indicator. So the columns can be very thin. However it seems that vaadin enforces a minimum width on the columns. Is there any way to get a column to be only a few pixels wide?

Also Vaadin adds padding to the table cells. If I remove that in CSS is seems to make the table go out of alignment.

I thought about just having a single column to hold all the icons, but I’d still like to be able to hide and show individual ones. So they really need to be separate columns.

Thanks, Ryan

2

Hi,

I took a quick look and I don’t think it’s easily doable to get such narrow columns. The minimum width seems to be 25 px including the padding around the cell content.

What you could do is use one generated column for all your icons, and then just show the ones you want based on the individual item (row) of the table. You might want to use an AbsoluteLayout as the content to preserve the alignment of your icons, even if some rows are missing “middle” icons.

3

Yes. It looks like the only approach that might be suitable. Apart from trying to pull the table apart, but I don’t like my chances at having a go at such a complex component.

I might leave the existing 4 columns, then have a single combined column that can be shown instead.

It’s still a shame they put the 25px limit on it.

4

I’m guessing the 25px minimum comes from the following:

  • Resize handle: 2px + 1px border = 3px
  • Space for sort indicator icon = 16px (even if you disable sorting)
  • Minimum width of the column caption container (due to left padding) = 6px

Sums up nicely to 25px. It could be doable to remove the space reserved for the sort indicators - but even this might be a considerable amount of work.

5

For me the sort icon is on top of the 25px. If the sort icon is shown I get around 41px minimum. So I don’t think the 16px is space for the sort indicator.

I’m on Vaadin 6.8.8 just incase Vaadin 7 is different.

6

I’m on 6.8.8 currently too and yes, you’re right. I did overlook that, and found out that you can actually make thinner columns, try the following css:

.v-table-cell-content {
	padding-left: 3px !important;
	padding-right: 0 !important;
}

.v-table-caption-container {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 3px !important;
}

Just keep the padding-left of table-cell-content the same as the margin left on table-caption-container and it seems to fit. You can decrease this all the way to zero (doesn’t look very nice though).

Obvious downside is that this will apply to all columns then…

Also, you probably want to use your own style name for the table instead of the !important declarations.

7

Thanks. I’ll give it a go.

I might be able to use some fancy css selectors to target the columns I am after. Unless the user changes the order of them :confused:

I wouldn’t manage to get the column to stay lined up when changing the css, but I’ll see how it goes.

Thanks for the help!