JSFiddle - React, Tailwind, and code Playground

by Pradeep Shankar

HTML

<script src="https://www.google.com/jsapi"></script>
  <div id="table1"></div>
  
  <br/>
  
    <div id="table2"></div>

JavaScript

google.load("visualization", "1.1", {packages:["table"]});
      google.setOnLoadCallback(drawTable);

      function drawTable() {
     
  var data1 = new google.visualization.DataTable();
  data1.addColumn('string', 'Name');
  data1.addColumn('string', 'Gender');
  data1.addColumn('number', 'Age');
  data1.addColumn('number', 'Donut Eaten');
  data1.addRows([
    ['Michael', 'Male', 12, 5],
    ['Elisa', 'Female', 20, 7],
    ['Robert', 'Male', 7, 3],
    ['John', 'Male', 54, 2],
    ['Jessica', 'Female', 22, 6],
    ['Aaron', 'Male', 3, 1],
    ['Margareth', 'Female', 42, 8],
    ['Miranda', 'Female', 33, 6]
  ]);
  
   var data2 = new google.visualization.DataTable();
  data2.addColumn('string', 'Name');
  data2.addColumn('number', 'Gender');
  data2.addColumn('number', 'Age');
  data2.addColumn('number', 'Donut Eaten');
 data2.addRows([
    ['Michael', {v:1, f:'Male'}, 12, 5],
    ['Elisa', {v:2, f:'Female'}, 20, 7],
    ['Robert', {v:1, f:'Male'}, 7, 3],
    ['John', {v:1, f:'Male'}, 54, 2],
    ['Jessica', {v:2, f:'Female'}, 22, 6],
    ['Aaron', {v:1, f:'Male'}, 3, 1],
    ['Margareth', {v:2, f:'Female'}, 42, 8],
    ['Miranda', {v:2, f:'Female'}, 33, 6]
  ]);


        var table1 = new google.visualization.Table(document.getElementById('table1'));

        table1.draw(data1, {showRowNumber: true, width: '100%', height: '100%'});
        
        
           var table2 = new google.visualization.Table(document.getElementById('table2'));

        table2.draw(data2, {showRowNumber: true, width: '100%', height: '100%'});
        
        
             var rows = data2.getFilteredRows([{
          column: 0,
          value: 'Male'
        }]);
        
        console.log(rows);
      }