JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://www.igniteui.com/js/external/Blob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.dv.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.spreadsheet-bundled.js"></script>
<script src="https://igniteui.com/js-data/expense-data"></script>
<script src="https://www.igniteui.com/js/external/FileSaver.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<div id="chart">        
    </div>

    <div id="grid">        
    </div>
	
	<br />
    <button id="exportButton" onclick="createWorkbook()">Create File</button>
    <br />

CSS

.right {
            float: right;
        }

        #exportButton {
            float: left;
        }

JavaScript

$(function () {
var alphabet = "A;B;C;D;E;F;G;H;I;J;K;L;M;N;O;P;Q;R;S;T;U;V;W;X;Y;Z".split(";");
        var headers = "Expenses;Jan;Feb;Mar;Apr;May;Jun;Jul;Aug;Sep;Oct;Nov;Dec".split(";");
        var months = "Jan;Feb;Mar;Apr;May;Jun;Jul;Aug;Sep;Oct;Nov;Dec".split(';');

        var data = getGridData();
        var chartData = getChartData(data, months);

        $(function(){
            $("#chart").igCategoryChart({
                width: "800px",
                height: "400px",
                dataSource: chartData,
                yAxisMinimumValue: 0
            });

            $("#grid").igGrid({
                dataSource: data,
                width: "800px",
                height: "300px"
            });
        });

        function createWorkbook() {

            var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
            var sheet = workbook.worksheets().add("Sheet1");
            sheet.defaultColumnWidth(200 * 20);
    
            for (var i = 0; i < headers.length; i++) {
                var cell = sheet.getCell(alphabet[i] + "3");
                cell.value(headers[i]);
            }

            for (var i = 0; i < data.length; i++) {
                for (var j = 0; j < 13; j++) {

                    var stringAddress = alphabet[j] + (i + 4).toString();
                    var cell = sheet.getCell(stringAddress);

                    switch (j) {
                        case 0: {
                            cell.value(data[i].Expenses);
                            break;
                        }
                        case 1: {
                            cell.value(data[i].Jan);
                            break;
                        }
                        case 2: {
                            cell.value(data[i].Feb);
                            break;
                        }
                        case 3: {
                            cell.value(data[i].Mar);
                            break;
    ...