JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<script src="https://threedubmedia.googlecode.com/files/jquery.event.drag-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.grid.js"></script>
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/slick.grid.css">
<script src="http://mleibman.github.com/SlickGrid/slick.dataview.js"></script>
<div id="containerDiv" style="visibility: hidden;">
    <div id="gridDiv" style="width: 100%;"/>
</div>

JavaScript

var columns = [{
    id: "product",
    name: "Product",
    field: "product",
    width: 100,
}, {
    id: "optA",
    name: "Opt A",
    field: "optA",
    width: 100,
}, {
    id: "optB",
    name: "Opt B",
    field: "optB",
    width: 100
}, {
    id: "optC",
    name: "Opt C",
    field: "optC",
    width: 100,
}];

var dataView = new Slick.Data.DataView();
var gridOptions = {
    //enableCellNavigation: true,
    enableColumnReorder: false,
/*    syncColumnCellResize: true,*/
    forceFitColumns: false,
/*    enableTextSelectionOnCells: true,
    topPanelHeight: 25,*/
    autoHeight: true,
};
var grid = new Slick.Grid("#gridDiv", dataView, columns, gridOptions);

var data = [];
data[0] = {
    id: "0",
    product: "Apples",
    optA: "This is a rather long option",
    optB: "10",
    optC: "Green"
}
data[1] = {
    id: "1",
    product: "Oranges",
    optA: "Something interesting",
    optB: "15",
    optC: "Organic"
}
data[2] = {
    id: "2",
    product: "Duels",
    optA: "Solo shot first",
    optB: "42",
    optC: "Really!"
}

dataView.setItems(data);

grid.updateRowCount();
grid.render();
$("#containerDiv").show();
//$(document).ready(function(){
//    $('#gridDiv').text('It works !!!');
//});