In Google Visualization API when a table has a decent amount of data, the header is very choppy when scrolling with the mouse wheel up and down.
I have here a test that shows what I mean (ignore the fact that the header doesn't have any text, no idea why it doesn't detect it and it's a separate issue).
Is there a way to make scrolling in this situation more decent?
google.charts.load('current', {
callback: drawBasic,
packages: ['table']
});
function drawBasic() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1w1vaFAPTE440jc2cpYGftXSaPwGxU_x7iQRSGK35oYc/edit#gid=0&headers=1'
);
query.setQuery('SELECT A,B,C,D,E,F,G,H,I');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + '' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var options = {
title: 'test',
height: '80vh',
showRowNumber: true,
page: "enable",
pageSize: 500,
allowHtml: true
}
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data, options)
}#chart_div{
margin-top: 20px;
white-space: nowrap;
}
.google-visualization-table-tr-head {
background-color: red!important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script><script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><div id="chart_div"></div>