Question

I’d looking to emulate the standard google visualization table header row behavior, but have it apply to the first column. This doesn’t seem to be a built-in feature, but I’m wondering if it can be accomplished with some custom CSS?

Answer 1

I ended up reverse engineering how google was accomplishing the top header. They were creating a copy of the entire table, putting it in a div, absolutely positioning it and setting a height equal to the height of the first row. That accomplishes the effect that when you scroll down the main table it stays fixed at the top.

Side-scrolling is more complicated, because when side-scrolling they need the header to also scroll. CSS doesn’t have a mechanism for this (since it’s absolutely positioned outside of what’s scrolling), so Google’s using javascript here.

To emulate this behavior for a fixed column, we first make a third clone of the table. Then we go through some CSS gymnastics to get the width/height & position correct. Finally, we attach a listener to the onScroll event of the main table that scrolls the header table in unison. The $.schollbarWidth() function comes from this plugin.

visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data);

var fullTable = $('#table > div > div:first');
var yHeader = fullTable.clone().insertAfter(fullTable);
yHeader.css('width', yHeader.children('tr td:first').outerWidth())
       .css('height', fullTable.innerHeight() - $.scrollbarWidth())
       .css('position', 'absolute')
       .css('top', '0px')
       .css('left', '0px')
       .css('overflow', 'hidden')

fullTable.scroll(function() {
  yHeader.scrollTop(fullTable.scrollTop());
});