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;
var sortInfo;
var aliasTable;
var rowRange;

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']);
    
    rowRange = Array.apply(null, Array(tableData.getNumberOfRows())).map(
            function (x, i) { return i });
    
    sortInfo = { column: 0, ascending: true, sortedIndexes: rowRange.slice() };
    aliasTable = rowRange.slice();

    var sortListenerHandler = google.visualization.events.addListener(
       table, 'sort', handleSort);
    
    tableDataView = new google.visualization.DataView(tableData);        
    table.draw(tableDataView, { sortColumn:0, sortAscending:true } );
}

function updateVisualization() {
    console.log('updateVisualization');
    
    var s = sortInfo;

    var translated = s.sortedIndexes.slice().map(
        function(x) { return aliasTable[x]; });    

    tableDataView = new google.visualization.DataView(tableData);
    tableDataView.setRows(translated);
    table.draw(tableDataView, { sortColumn:s.column, sortAscending:s.ascending } );
    
    sortInfo.sortedIndexes = rowRange.slice();
    aliasTable = translated.slice();
}
    
function handleSort() {
    sortInfo = table.getSortInfo();
    //console.log('handleSort:  ' + sortInfo.sortedIndexes);    
}