Re: fixed header in google visualization table

asgallant

unread,

Jul 18, 2012, 11:53:24 AM7/18/12

to google-visua...@googlegroups.com

The Table's automatically apply a fixed header if you assign the height option when drawing the table.

On Wednesday, July 18, 2012 5:10:43 AM UTC-4, vishnu prasad wrote:

How can i keep the table header row fixed suppose i have 5000 records i need to scrool every time uptime to see the column heading and for some reason i dont want to use pagination is there way to keep the header row fixed and scroll only the data rows.

Heena

unread,

Jun 27, 2013, 6:51:00 AM6/27/13

to google-visua...@googlegroups.com

I have applies a particular height in options tag and played with the implied haeder class to display the table header (code below). Of the two overlapped headers, one header remains fixed and and the other one is moving when scrolled. So i can see two headers at a time when scrolled.

.google-visualization-table-tr-head-nonstrict { font-weight: bold !important;text-align: left !important;font-size: 12px !important;width: 600px !important;background-image: none !important;}

options = { width : 600, height:235, scrollLeftStartPosition : 50, showRowNumber : true, 'chartArea' : chartArea, 'cssClassNames' : cssClassNames };

Any help is appreciated.

asgallant

unread,

Jun 27, 2013, 10:43:08 AM6/27/13

to google-visua...@googlegroups.com

Can you post an example page that replicates the problem? The CSS you posted has no effect on the default tables.

Heena

unread,

Jun 28, 2013, 2:39:16 AM6/28/13

to google-visua...@googlegroups.com

Here's the complete code. You can simply save the code and run as .html file.

It has different behavior on different browsers. Works fine on IE7 and IE8. Header scrolls in IE9. One of the 2 overlapped header scroll in Firefox/chrome.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<style type="text/css" >

.google-visualization-table-tr-head-nonstrict {
font-weight: bold !important;
text-align: left !important;
font-size: 12px !important;
width: 600px !important;
background-image: none !important;
}

.tableRowGoogle {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
}

.headercellgoogle {
padding: 6px;
width: 150px;
}

.rowcellgoogle {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
width: 100%;
}

.rowNumberCell {
border: 1px solid #EEE;
padding-right: 3px;
padding-left: 3px;
padding-top: 2px;
padding-bottom: 2px;
border-width: 1px 0px;
text-align: right;
width: 15px;
}
</style>
<SCRIPT>
google.load('visualization', '1', {'packages':['corechart','geochart','table']});

          options = {
           width : 600,
           height:235,

           sort : 'enable',
           sortColumn : 1,
           sortAscending : false,

                    scrollLeftStartPosition : 50,
           showRowNumber : true,
           'chartArea' : chartArea,
           'cssClassNames' : cssClassNames
          };

        }else{
             options = {
           width : 600,
           sort : 'enable',
           sortColumn : 1,
           sortAscending : false,

                    scrollLeftStartPosition : 50,
           showRowNumber : true,
           'chartArea' : chartArea,
           'cssClassNames' : cssClassNames
          };
        }

  var chart = new google.visualization.Table(document.getElementById(tab));
  google.visualization.events.addListener(chart, "error", function errorHandler(e) {
      google.visualization.errors.removeError(e.id);
  });
  chart.draw(view, options);
}
</SCRIPT>
</HEAD>

<BODY >
TABLE<br>
<div id="tab51" ></div>
<input type="button" onclick="drawTableChart()" name="Click me" value="Click me">
</BODY>
</HTML>

Thanks.

Message has been deleted

Heena

unread,

Jun 28, 2013, 6:44:42 AM6/28/13

to google-visua...@googlegroups.com

I have identified the problem with above code. If i modify "background-image: none !important" to "background-image: white !important" in "google-visualization-table-tr-head-nonstrict" class, the code works just fine.

But the issue still persists in IE9 (header bar scrolling). Also, I am not able to achieve the print functionality with scrollbars on.

asgallant

unread,

Jun 28, 2013, 1:10:56 PM6/28/13

to google-visua...@googlegroups.com

The height of the fixed header is not being set properly in IE9 (see bug report on it, you can star the report to get updates); use this to fix it:

google.visualization.events.addListener(chart, "ready", function () {

// fix scolling problem in IE9

if ($.browser.msie && $.browser.version == 9) {

// find the header row in the scrollable table

var tr = $('#' + tab + ' div:nth-child(1) > table tr:nth-child(1)');

// set the height of the fixed table

$('#' + tab + ' div:nth-child(2)').height($(tr).outerHeight());

}

});

see example here: http://jsfiddle.net/asgallant/VTK3g/5/

mtomm...@keywordsintl.com

unread,

Feb 19, 2015, 10:34:22 AM2/19/15

to google-visua...@googlegroups.com

I have the exact same problem since today. All table headers appear twice and overlapped, one of the duplicated headers scrolls, the other is fixed.

Reply all

Reply to author

Forward