JSFiddle - React, Tailwind, and code Playground

by Ross Dederer

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.1.20133.8.css">
<script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.1.20132.5.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.32/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20132.15.js"></script>
<div id="ss" style="width: 550px; height: 400px; border: 1px solid gray" />

JavaScript

// Constructor 
function DatePickerCellType() {
}

// 1) We need to derive the Custom Cell Type to create the DatePicker CustomCell Type 
DatePickerCellType.prototype = new $.wijmo.wijspread.CustomCellType();

// 2) We need to create a customer Editor to the cell, basically overiding the default behavior
DatePickerCellType.prototype.createEditorElement = function( context ) {
    var container = document.createElement("div");
    var editor = document.createElement("input");
    var $editor = $(editor);
    var $container = $(container);
    $container.css("position", "absolute");
    $container.css("margin", "0");
    $container.attr("gcUIElement", "gcEditor");
    $container.append($editor);
    return container;
};

// 3) We need to override the activeEditor function so as to convert the custom editor to Wijmo Input.  This will actually provide the functionality of the the Wijmo Input. 
DatePickerCellType.prototype.activateEditor = function (editorContext, cellStyle, cellRect) {
    //Initialize wijmo number input editor.
    if (editorContext) {
        $editor = $(editorContext);
        $.wijmo.wijspread.CustomCellType.prototype.activateEditor.apply(this, arguments);
        $editor.css("width", cellRect.width - 3);
        $editor.css("height", cellRect.height - 3);
        
        // WIJMO CODE 
        $editor.wijinputnumber({ type: 'numeric', decimalPlaces: 1, showSpinner: true });
        this.parent = $editor.data("wijmo-wijinputnumber").outerDiv;
        // End Wijmo Code 
        
        this.parent.css("position", "absolute");
        this.parent.css("top", $editor.css("top"));
        this.parent.css("left", $editor.css("left"));
        this.parent.attr("gcUIElement", "gcEditingInput");
        $(".wijmo-wijinput-wrapper").css("padding-top", "0");
    }
}

// Initialize SpreadJS 
$("#ss").wijspread();
var spread = $("#ss").wijspread("spread");
var sheet = spread.getActiveSheet();
spread.isPaintSuspended(true);
sheet.setColumnWidth(1,...