JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.formatters.js"></script>
<div id="myGrid" style="width:100%;height:500px;"></div>

CSS

/*
IMPORTANT:
In order to preserve the uniform grid appearance, all cell styles need to have padding, margin and border sizes.
No built-in (selected, editable, highlight, flashing, invalid, loading, :focus) or user-specified CSS
classes should alter those!
*/
 body {
    margin: 0;
}
.slick-header-column, .slick-cell {
    min-width: 40px;
}
.slick-row.active {
    background: #DDD !important;
}
.slick-row:hover {
    background: #EEE;
}
.slick-header.ui-state-default, .slick-headerrow.ui-state-default {
    width: 100%;
    overflow: hidden;
    border-left: 0px;
}
.slick-header-columns, .slick-headerrow-columns {
    position: relative;
    white-space: nowrap;
    cursor: default;
    overflow: hidden;
    font-size: 0.8em;
    left: 0 !important;
    width: 100% !important;
}
.slickgrid, .slickgrid *, .slick-header-column {
    box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -ms-box-sizing: border-box !important;
}
.slick-header-column.ui-state-default {
    position: relative;
    left: 0 !important;
    display: inline-block;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    height: 26px;
    line-height: 16px;
    margin: 0;
    padding: 4px;
    border-right: 1px solid silver;
    border-left: 0px;
    border-top: 0px;
    border-bottom: 0px;
    float: left;
}
.slick-headerrow-column.ui-state-default {
    padding: 4px;
}
.slick-header-column-sorted {
    font-style: italic;
}
.slick-sort-indicator {
    display: inline-block;
    width: 8px;
    height: 5px;
    margin-left: 4px;
    margin-top: 6px;
}
.slick-sort-indicator-desc {
    background: url(images/sort-desc.gif);
}
.slick-sort-indicator-asc {
    background: url(images/sort-asc.gif);
}
.slick-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    cursor: col-resize;
    width: 4px;
    right: 0px;
    top: 0;
    height:...

JavaScript

/**
 * @license
 * (c) 2009-2013 Michael Leibman
 * michael{dot}leibman{at}gmail{dot}com
 * http://github.com/mleibman/slickgrid
 *
 * Distributed under MIT license.
 * All rights reserved.
 *
 * SlickGrid v2.2
 *
 * NOTES:
 *     Cell/row DOM manipulations are done directly bypassing jQuery's DOM manipulation methods.


 *     This increases the speed dramatically, but can only be done safely because there are no event handlers
 *     or data associated with any cell/row DOM nodes.  Cell editors must make sure they implement .destroy()
 *     and do proper cleanup.
 */

// make sure required JavaScript modules are loaded
if (typeof jQuery === "undefined") {
    throw "SlickGrid requires jquery module to be loaded";
}
if (!jQuery.fn.drag) {
    throw "SlickGrid requires jquery.event.drag module to be loaded";
}
if (typeof Slick === "undefined") {
    throw "slick.core.js not loaded";
}


(function ($) {
    // Slick.Grid
    $.extend(true, window, {
        Slick: {
            Grid: SlickGrid
        }
    });

    // shared across all grids on the page
    var scrollbarDimensions;
    var maxSupportedCssHeight; // browser's breaking point

    //////////////////////////////////////////////////////////////////////////////////////////////
    // SlickGrid class implementation (available as Slick.Grid)

    /**
     * Creates a new instance of the grid.
     * @class SlickGrid
     * @constructor
     * @param {Node}              container   Container node to create the grid in.
     * @param {Array,Object}      data        An array of objects for databinding.
     * @param {Array}             columns     An array of column definitions.
     * @param {Object}            options     Grid options.
     **/
    function SlickGrid(container, data, columns, options) {
        // settings
        var defaults = {
            explicitInitialization: false,
            rowHeight: 25,
            defaultColumnWidth: 80,
            enableAddRow: false,
           ...