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>
<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>
<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()">
		<input class="spreadsheet-sample-btn" id="saveWorkbookBtn" type="button" value="ワークブックを保存" onclick="saveWorkbook()">
		<div class="editing-controls-container">
			<span for="enableEditing" class="show-row-text">
				<div id="enableEditing"></div>
				<span class="label-editing">Excel の編集を有効にする</span>
			</span>
		</div>
				
		<div id="spreadsheet"></div>
	</input></input></div>

CSS

.ui-igspreadsheet .ui-menu-item {
            white-space:nowrap;
        }
        .spreadsheet-sample-btn
        {
            max-width: 200px;
            padding: 8px;
            background: #fff;
            color:#444;
            text-align: center;
            border-radius: 3px;
            font-size: 12px;
            text-transform: uppercase;
            margin:0 15px 15px 0;
            cursor:pointer;
            border:1px solid #ccc;
        }

        .spreadsheet-sample-btn:hover {
            border-color:#09f;
        }

		.editing-controls-container {
			display: inline-block;
			position: relative;
			min-width: 200px;
			margin: 18px 15px;
		}

			.editing-controls-container #enableEditing {
				margin-right: 6px;
				border-radius: 3px;
				position: absolute;
				left: 0;
				top: 10px;
			}

		.label-editing {
			display:inline-block;
			position: absolute;
			left: 23px;
			top: 15px;
		}

JavaScript

$(function () {
			var editingEnabled = true;
			//Initializing igSpreadsheet
			$("#spreadsheet").igSpreadsheet({
				height: "600",
				width: "100%",
				isFormulaBarVisible: true,
				editModeEntering: function (e, args) {
					return editingEnabled;
				}
			});

			$("#enableEditing").igCheckboxEditor({
				checked: true,
				valueChanged: function (evt, ui) {
					editingEnabled = ui.newState;
				}
			});
		});

		//display the workbook via igSpreadsheet
		function loadWorkbook(workbook) {
			$("#spreadsheet").igSpreadsheet("option", "workbook", workbook);
		}

		//using the save method, which is exposed by the Excel library
		function saveWorkbook(workbook, name) {
			$("#spreadsheet").igSpreadsheet("option", "workbook")
				.save({ type: 'blob' }, function (data) {
					saveAs(data, name);
				}, function (error) {
					alert('Error exporting: : ' + error);
				});
		}

		function createWorkbook() {
			var workbook = new $.ig.excel.Workbook($.ig.excel.WorkbookFormat.excel2007);
			var sheet = workbook.worksheets().add('Sheet1');
			sheet.columns(0).setWidth(96, $.ig.excel.WorksheetColumnWidthUnit.pixel);
			sheet.columns(4).setWidth(80, $.ig.excel.WorksheetColumnWidthUnit.pixel);
			sheet.columns(6).setWidth(136, $.ig.excel.WorksheetColumnWidthUnit.pixel);

			// Add merged regions for regions A1:D2 and E1:G2
			var mergedCellA1D2 = sheet.mergedCellsRegions().add(0, 0, 1, 3);
			var mergedCellE1G2 = sheet.mergedCellsRegions().add(0, 4, 1, 6);

			// Add two large headers in merged cells above the data
			mergedCellA1D2.value('Acme, Inc.');
			mergedCellA1D2.cellFormat().alignment($.ig.excel.HorizontalCellAlignment.center);
			mergedCellA1D2.cellFormat().fill($.ig.excel.CellFill.createSolidFill('#ED7D31'));
			mergedCellA1D2.cellFormat().font().colorInfo(new $.ig.excel.WorkbookColorInfo($.ig.excel.WorkbookThemeColorType.light1));
			mergedCellA1D2.cellFormat().font().height(16 * 20);

			mergedCellE1G2.value('Invoice...