JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi?ext.js"></script>
<div id="stringFilter_dashboard_div">
    <div id="stringFilter_control_div"></div>
    <div id="stringFilter_chart_div"></div>
    <div id="real_table"></div>
</div>

JavaScript

google.load('visualization', '1.1', {
    'packages': ['controls']
});
google.setOnLoadCallback(drawChart);

// Create data
function drawChart() {
    var dashboard = new google.visualization.Dashboard(
    document.getElementById('stringFilter_dashboard_div'));

    var data = google.visualization.arrayToDataTable([
        ['Name', 'Age'],
        ['Michael', 12],
        ['Elisa', 20],
        ['Robert', 7],
        ['John', 54],
        ['Jessica', 22],
        ['Aaron', 3],
        ['Margareth', 42],
        ['Miranda', 33]
    ]);

    var control = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
            'containerId': 'stringFilter_control_div',
            'options': {
            matchType: 'any',
                'filterColumnIndex': 0
        }
    });


    var chart = new google.visualization.ChartWrapper({
        'chartType': 'Table',
            'containerId': 'stringFilter_chart_div',
            'options': {
            'width': '20em'
        }
    });


    
    dashboard.bind(control, chart);
    dashboard.draw(data);
    

    google.visualization.events.addListener(control, 'statechange', function () {
        
        if (control.getState().value == '') {
            realChart.setView({'rows': null})
        }else{
            realChart.setView({'rows': redrawChart(control.getState().value)})
        }
             realChart.draw();
    });

    function redrawChart(filterString) {
        var filterWords = filterString.split("+")
        var rows = []
        
        for(i = 0; i < filterWords.length; i++) {
            rows = rows.concat(data.getFilteredRows([{value:filterWords[i], column:0}]))
        }
        
        return rows
    }
}