showing column header of table in different color

Flow
1

Hi All… I am very new to Vaadin. I am able to get data in the table by setting data source. Now I need to differentiate two group of columns by setting different colors to the header not to the cell content. Please help me out in setting colors to the table headers.

2

Hi - there is no simple way to customize the table-headers CSS (like a table header CSS generator).

However - you can manually tweak the CSS to colur specific column headers

e.g. Assuming you’ve given the table a style name of example-table (Table#addStyleName(“example-table”)), the following will change the background of the second column to red.


.example-table .v-table-header-cell:nth-child(2), 
.example-table .v-table-header-cell-desc:nth-child(2) {
  background : red;
}

Essentially that says, change the background of the second table header cell beneath the example-table element to be red.

Of course, if you allow column re-ordering, then the colour won’t follow the column.

HTH a little,

Cheers,

Charles.

3

Thank you very much Charles… I did following which is working fine:

.example-table .v-table-header-cell:nth-child(2),
.example-table .v-table-header-cell:nth-child(3),
.example-table .v-table-header-cell:nth-child(4) {
background : red;
}

One more help I need. I am trying to freeze the first two columns while scrolling horizontally to the right. I am looking some previous post, but could not find.
Thank you for your help in advance.

4

Hi,

That is not currently possible in Vaadin (and there are no workarounds).

There is an outstanding enhance request
#3087
 to introduce this functionality; I’m just a user of Vaadin, not an employee, and I don’t have a Pro account, so cannot affect when (or if) this gets worked on.

Realistically, I wouldn’t hold my breath. Unfortunately.

Cheers,

Charles.

5

There is a full Table rewrite planned for Vaadin 7.1. This feature is definitely on the list of things we want to get in.

My expectations for the schedule are that 7.1 would be released in 6 months after 7.0. This would be in April 2012.

6

That’s great news - thanks!

7

There are always workarounds… And then there are these really ugly workarounds :slight_smile:


package com.example.freezepane;

import com.vaadin.Application;
import com.vaadin.ui.*;

public class FreezepaneApplication extends Application {
	@Override
	public void init() {
		Window mainWindow = new Window("Freezepane Test");
		setMainWindow(mainWindow);

		// Setup a table with random data for the example
		Table table = new Table();
		for (int i = 0; i < 20; i++)
			table.addContainerProperty("Col " + i, String.class, "");
		for (int i = 0; i < 400; i++) {
			Object[] cells = new Object[20]
;
			for (int j=0;j<20;j++) cells[j]
 = (char)('a'+ (char) j) + " " + i;
			table.addItem(cells,new Integer(i));
		}
		
		// Create freeze pane
		Table freezePane = new Table();
		freezePane.setContainerDataSource(table);
		freezePane.setVisibleColumns(new Object[] {table.getVisibleColumns()[0]
});
		
		// Hide the first column from the actual table
		Object[] visibleCols = new Object[table.getVisibleColumns().length-1]
;
		for (int i=0; i<visibleCols.length; i++) visibleCols[i]
 = table.getVisibleColumns()[i+1]
;
		table.setVisibleColumns(visibleCols);
		
		// Scroll two tables together
		table.setDebugId("main-table");
		freezePane.setDebugId("freeze-pane");
		mainWindow.executeJavaScript("var t=document.getElementById('main-table').children[1]
; var fp=document.getElementById('freeze-pane').children[1]
; t.addEventListener('scroll', function() {fp.scrollTop=t.scrollTop;}, false); fp.style.overflow='hidden'");
		
		// Layout
		HorizontalLayout hl = new HorizontalLayout();
		hl.setWidth("400px");
		table.setWidth("100%");
		freezePane.setWidth("70px");
		freezePane.setColumnWidth(freezePane.getVisibleColumns()[0]
, 70);
		hl.addComponent(freezePane);
		hl.addComponent(table);
		hl.setExpandRatio(table, 1.0f);
		mainWindow.addComponent(hl);
		
	}

}

Just a quick hack, but might be useful in some cases. With some cleaning one could even package this idea as an add-on. While it would still be ugly and fragile, the problem is so common, that there would probably be quite a few who would use it.
12506.png

8

Thank you all for your reply.

9

There is no ticket in roadmap assigned to this in Vaadin 7.1. Any update?

10

Hi,

Vaadin 7.1 will not contain a new Table. We did not want to postpone 7.1 to be able to include a new Table, especially as nobody is exactly sure how long it will take to create the new Table. We will however start working on the new Table in the near future and after that we will know better how much work it will be and how it will be distributed. Might be that we start by publishing it in the Directory instead of tieing it directly to a Vaadin 7.x version.

11

It’s fun to read this 4 years later and realize that:

  1. The “promised” rewritten Table component never made its way, and
  2. It seems still impossible to style the header cells that contain the column title by addressing a style name. Althouth you can apply .setStyleName() to a Cell from a HeaderRow, this doesn’t seem to apply for the columns name row.
12

Is there any way to do that with Vaadin 7.7.10?
I want add additional style-name for a particular header-cell.
Any addon outthere? Extender?