JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="dashboard">
    <div id="string_filter_div"></div>
    <div id="numnber_range_filter_div"></div>
    <div id="table_div"></div>
</div>

JavaScript

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Team');
    data.addColumn('string', 'Nationality');
    data.addColumn('number', 'Height');
    data.addColumn('number', 'Weight');
    data.addColumn('number', 'OverallRating');
    data.addColumn('string', 'Foot');
    data.addRows([
        ['MESSI','FC BARCELONA','ARGENTINA',169,67,25,'Left foot'],
        ['A. INIESTA','FC BARCELONA','SPAIN',170,65,28,'Right foot'],
        ['XAVI','FC BARCELONA','SPAIN',170,68,32,'Right foot']
    ]);
    
    var dashboard = new google.visualization.Dashboard(document.querySelector('#dashboard'));
    
    var stringFilter = new google.visualization.ControlWrapper({
        controlType: 'StringFilter',
        containerId: 'string_filter_div',
        options: {
            filterColumnIndex: 0
        }
    });
    
    var numberRangeFilter = new google.visualization.ControlWrapper({
        controlType: 'NumberRangeFilter',
        containerId: 'numnber_range_filter_div',
        options: {
            filterColumnIndex: 5,
            minValue: 0,
            maxValue: 100,
            ui: {
                label: 'Overall Rating'
            }
        }
    });
    
    var table = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'table_div',
        options: {
            showRowNumber: true
        }
    });
    
    dashboard.bind([stringFilter, numberRangeFilter], [table]);
    dashboard.draw(data);
}
google.load('visualization', '1', {packages:['controls'], callback: drawTable});