JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi"></script>
<div id="chart"></div>
<a href="javascript:updateVisualization();">redraw</a>
JavaScript
var table;
var tableData;
var tableDataView;
google.load('visualization', '1.0', {packages: ['corechart', 'table']});
google.setOnLoadCallback(new Function("", "createVisualization();"));
function createVisualization() {
table = new google.visualization.Table(document.getElementById('chart'));
tableData = new google.visualization.DataTable();
tableData.addColumn('number', 'Row Number');
tableData.addColumn('string', 'Parity');
tableData.addRow([0, 'even']);
tableData.addRow([1, 'odd']);
tableData.addRow([2, 'even']);
tableData.addRow([3, 'odd']);
tableDataView = new google.visualization.DataView(tableData);
google.visualization.events.addListener(
table, 'select', handleSelect);
updateVisualization();
}
function updateVisualization() {
console.log('updateVisualization');
var selection = table.getSelection();
var sortInfo = table.getSortInfo();
options = { sortColumn:0, sortAscending:true };
// important that selection is handled before sortInfo
if ( selection ) {
for ( var i = 0; i < selection.length; i++ ) {
//console.log(selection[i]);
selection[i].row =
tableDataView.getTableRowIndex(selection[i].row);
//console.log(selection[i]);
}
}
if ( sortInfo ) {
var translated = sortInfo['sortedIndexes'].slice().map(
function(x) { return tableDataView.getTableRowIndex(x); });
//console.log(translated);
options = {
sortColumn:sortInfo['column'],
sortAscending:sortInfo['ascending'] };
tableDataView.setRows(translated);
}
table.draw(tableDataView, options );
if ( selection ) {
for ( var i = 0; i < selection.length; i++ ) {
//console.log(selection[i]);
selection[i].row =
tableDataView.getViewRowIndex(selection[i].row);
...