JSFiddle - React, Tailwind, and code Playground

by dlaliberte

HTML

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

JavaScript

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

function drawTable() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', '<div style="text-align:center;vertical-align:center"><b>Years of WFAS<br>Audit Experience</b></div>');
    data.addColumn('number', '<div style="text-align:center;vertical-align:center"><b>Years of Other<br>Audit Experience</b></div>');
    data.addColumn('number', '<div style="text-align:center;vertical-align:center"><b>Total Years of<br>Audit Experience</b></div>');
    data.addColumn('number', '<div style="text-align:center;vertical-align:center"><b>Total Years of<br>Non-Audit Experience</b></div>');
    data.addColumn('string', '<div style="text-align:center;vertical-align:center"><b>Education /<br> Degree</b></div>');
    data.addColumn('string', '<div style="text-align:center;vertical-align:center"><b>Field of Study /<br> Major</b></div>');
    data.addColumn('string', '<div style="text-align:center;vertical-align:center"><b>Resume /<br>Bio</b></div>');
    data.addRows([
        [0.00, 0.00, 0.00, 0.00, 'Undergraduate', 'Business Administration', 'No attachment']
    ]);
    var formatter_number = new google.visualization.NumberFormat({
        fractionDigits: 2
    });
    formatter_number.format(data, 0);
    formatter_number.format(data, 1);
    formatter_number.format(data, 2);
    formatter_number.format(data, 3);
    var table = new google.visualization.Table(document.getElementById('table_div'));
    table.draw(data, {
        allowHtml: true,
        cssClassNames: {
            headerRow: 'TableHeader',
            tableRow: 'RegularVerdana8',
            oddTableRow: 'RegularVerdana8'
        }
    });
}