JSFiddle - React, Tailwind, and code Playground

HTML

<script type='text/javascript' src="https://www.google.com/jsapi"></script>
	   <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>

<script type='text/javascript'>

  google.load('visualization', '1', {packages:['controls', 'corechart']});
google.setOnLoadCallback(drawTable);

function drawTable(response) {
     var data = new google.visualization.DataTable();
    data.addColumn('string', 'Column1');
    data.addColumn('string', 'Column2');
    data.addColumn('number', 'Column3');
    data.addRows([
        ['A', 'foo', 100],
        ['A', 'foo', 200],
        ['A', 'foo', 100],
        ['A', 'foo', 100],
        ['A', 'bar', 200],
        ['A', 'bar', 300],
        ['A', 'baz', 300],
        ['B', 'baz', 200],
        ['B', 'cad', 300],
        ['B', 'cad', 400],
        ['B', 'cad', 100],
        ['B', 'qud', 100],
        ['B', 'qud', 400],
        ['B', 'qud', 200],
        ['B', 'qud', 300],
        ['B', 'qud', 400]
    ]);
  
    var distinctValues = data.getDistinctValues(2);
    
    var viewColumns = [0, 1];
    var groupColumns = [];
    // build column arrays for the view and grouping
    for (var i = 0; i < distinctValues.length; i++) {
        viewColumns.push({
            type: 'number',
            label: distinctValues[i],
            calc: (function (x) {
                return function (dt, row) {
                    return (dt.getValue(row, 2) == x) ? 1 : 0;
                }
            })(distinctValues[i])
        });
        groupColumns.push({
            column: i+2,
            type: 'number',
            //label: distinctValues[i],
            aggregation: google.visualization.data.sum
        });
    }
	
    
    var view = new google.visualization.DataView(data);
    view.setColumns(viewColumns);
    
    // next, we group the view on column A, which gets us the pivoted data
    var pivotedData = google.visualization.data.group(view, [0, 1], groupColumns);
    
    table = new...