Sending a Datasource Query and draw table with a fixed header row/column names

[Mat Satler]

We setup the "Sending a Datasource Query" and everything works perfect - we followed the example provided by dev.google https://developers.google.com/chart/interactive/docs/datatables_dataviews

We would like to add to the output table the header or column names

This is our code

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">

google.load('visualization', '1', {packages: ['table']});

google.setOnLoadCallback(drawTable);

</script>

<script type="text/javascript">

var visualization;

function drawVisualization() {

var query = new google.visualization.Query(

'https://docs.google.com/spreadsheets/d/MY_KEY/edit?usp=sharing');

query.setQuery('SELECT A, B, C, D, E, F, G, H, I where upper(A) like upper("%<?php echo $search; ?>%") or upper(B) like upper("%<?php echo $search; ?>%") or upper(C) like upper("%<?php echo $search; ?>%") order by A asc');

query.send(handleQueryResponse);

}

function handleQueryResponse(response) {

if (response.isError()) {

alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());

return;

}

var data = response.getDataTable();

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

visualization.draw(data, {legend: 'bottom'});

}

google.setOnLoadCallback(drawVisualization);

</script>