JSFiddle - React, Tailwind, and code Playground

by beej

HTML

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<div id="viz"></div>

JavaScript

google.load('visualization', '1', {
    packages: ['table']
});


google.setOnLoadCallback(function () {
    'use strict';

    


  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('string', 'Email');
  data.addRows([
    ['John Lennon', '[email protected]'],
    ['Paul McCartney', '[email protected]'],
    ['George Harrison', '[email protected]'],
    ['Ringo Starr', '[email protected]']
  ]);

  var table = new google.visualization.Table(document.getElementById('viz'));
  
  var formatter = new google.visualization.PatternFormat('<a href="mailto:{1}">{0}</a>');
  formatter.format(data, [0, 1]); // Apply formatter and set the formatted value of the first column.

  var view = new google.visualization.DataView(data);
  view.setColumns([0]); // Create a view with the first column only.
  
  table.draw(view, {allowHtml: true, showRowNumber: true});
    

});