JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['table']}]}"></script>
<div id="table_div"></div>
JavaScript
google.setOnLoadCallback(drawTable);
function drawTable() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Salary');
data.addColumn('boolean', 'Full Time Employee');
data.addRows([
['Mike', {
v: 10000,
f: '$10,000'
},
true
],
['Jim', {
v: 8000,
f: '$8,000'
},
false
],
['Alice', {
v: 12500,
f: '$12,500'
},
true
],
['Bob', {
v: 7000,
f: '$7,000'
},
true
]
]);
var table = new google.visualization.Table(document.getElementById('table_div'));
google.visualization.events.addListener(table, 'ready', function() {
document.querySelector('#table_div thead').addEventListener('click', function(e) {
var cell = e.srcElement || e.target,
column = null;
if (table.getSelection().length && cell !== cell.parentNode.firstChild) {
for (var i = 0; i < cell.parentNode.childNodes.length; ++i) {
if (cell.parentNode.childNodes[i] === cell) {
column = i - 1;
break;
}
}
if (column !== null) {
var msg = ['column-index is ' + column];
var selection = table.getSelection();
//if current row has been selected
if (/\bgoogle-visualization-table-tr-sel\b/.test(cell.parentNode.className)) {
msg.push('row-index is ' + selection[selection.length - 1].row);
msg.push('value of clicked cell is:' + data.getValue(selection[selection.length - 1].row, column));
} else {
msg.push('current row is not selected');
}
alert(msg.join('\n---------\n'))
}
} else {
alert('no row selected');
}
});
});
table.draw(data, {
showRowNumber: true
});
}