JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://jp.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://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.excel-bundled.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.spreadsheet-bundled.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/modules/infragistics.ui.spreadsheet.css" rel="stylesheet"></link>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/i18n/infragistics-ja.js"></script>

<div>
            <input class="spreadsheet-sample-btn" id="createWorkbookBtn" type="button" value="ワークブックを生成" onclick="createWorkbook()">            
            <div id="spreadsheet"></div>
        </input></div>

JavaScript

$(function () {
                var editingEnabled = true;
                //Initializing igSpreadsheet
                $("#spreadsheet").igSpreadsheet({
                    height: "600",
                    width: "100%",
                    isFormulaBarVisible: true,
                    editModeEntering: function (e, args) {
                        return editingEnabled;
                    }
                });             
            });
    
            //display the workbook via igSpreadsheet
            function loadWorkbook(workbook) {
                $("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
            }
            
            function createWorkbook() {
                var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
                var sheet = workbook.worksheets().add('Sheet1');
                var letters = ["A", "B", "C", "D", "E", "F", "G"]
                var headers = ["SKU", "Name", "Category", "Supplier", "Back Order", "Unit Price", "Units in Stock"]
                var skus = ["401043204-423","534041202-345","601041205-784","51041204-426","41041204-427","31041204-428","21041204-429","41041204-430","61022204-431","11043204-432","41041204-433","21041204-434","401043204-423","31041204-436","21041204-437"]
                var names = ["Guaraná Fantástica","NuNuCa Nuß-Nougat-Creme","Gumbär Gummibärchen","Schoggi Schokolade","Rössle Sauerkraut","","Nord-Ost Matjeshering","Gorgonzola Telino","Mascarpone Fabioli","Geitost","Sasquatch Ale","","Inlagd Sill","Gravad lax"]
                var categories = ["Grains/Cereals","Beverages","Confections","Confections","Confections","Produce","Meat/Poultry","Seafood","Dairy Products","Dairy Products","Dairy Products","Beverages","Beverages","Seafood","Seafood"]
                var suppliers = ["PB Knäckebröd AB","Refrescos Americanas LTDA","Heli Süßwaren GmbH & Co. KG","Heli Süßwaren GmbH & Co. KG","Heli Süßwaren GmbH & Co. KG","Plutzer...