JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/js/jquery.jexcel.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jexcel/1.5.7/css/jquery.jexcel.css" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.8.3/jquery.csv.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> -->

<div id='my'></div>

<p>
    <button onclick="$('#log').html('')">Clear</button><p>
		<input type='button' value='test!' id="newColumnButton">
    <div id='log'></div>
		
</p>

JavaScript

var change = function(instance, cell, value) {
    var cellName = $(instance).jexcel('getColumnNameFromId', $(cell).prop('id'));
    $('#log').append('New change on cell ' + cellName + ' to: ' + value + '<br>');
}

var beforeChange = function(instance, cell, value) {
    var cellName = $(instance).jexcel('getColumnNameFromId', $(cell).prop('id'));
    $('#log').append('The cell ' + cellName + ' will be changed<br>');
}

var insertedRow = function(instance) {
    $('#log').append('Row added<br>');
}

var insertedColumn = function(instance) {
    $('#log').append('Column added<br>');
}

var deletedRow = function(instance) {
    $('#log').append('Row deleted<br>');
}

var deletedColumn = function(instance) {
    $('#log').append('Column deleted<br>');
}

var sort = function(instance, cellNum, order) {
    var order = (order) ? 'desc' : 'asc';
    $('#log').append('The column  ' + cellNum + ' sorted by ' + order + '<br>');
}

var resize = function(instance, cell, width) {
    var cellName = $(instance).jexcel('getColumnNameFromId', $(cell).prop('id'));
    $('#log').append('The column  ' + cellName + ' resized to width ' + width + ' px<br>');
}
var selectionActive = function(instance, firstColumn, lastColumn) {
    var cellName1 = $(instance).jexcel('getColumnNameFromId', $(firstColumn).prop('id'));
    var cellName2 = $(instance).jexcel('getColumnNameFromId', $(lastColumn).prop('id'));
    $('#log').append('The selection from ' + cellName1 + ' to ' + cellName2 + '<br>');
}

var loaded = function(instance) {
    $('#log').append('New data is loaded<br>');
}

$('#my').jexcel({
    csv: 'https://bossanova.uk/components/bossanova-ui/demo/demo1.csv',
    onchange: change,
    onbeforechange: beforeChange,
    oninsertrow: insertedRow,
    oninsertcolumn: insertedColumn,
    ondeleterow: deletedRow,
    ondeletecolumn: deletedColumn,
    onselection: selectionActive,
    onsort: sort,
    onresize: resize,
    onload: loaded,
    csvHeaders: true,
    colWidths: [70, 200,...