JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<script src="https://raw.github.com/mleibman/SlickGrid/master/lib/jquery.event.drag-2.0.min.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.js"></script>
<link rel="stylesheet" href="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.css">
<div id="myGrid" ></div>

JavaScript

var grid;

var columns = [
    {
    id: "title",
    name: "Title",
    field: "title"},
{
    id: "duration",
    name: "Duration",
    field: "duration"},
{
    id: "%",
    name: "% Complete",
    field: "percentComplete"},
{
    id: "start",
    name: "Start",
    field: "start"},
{
    id: "finish",
    name: "Finish",
    field: "finish"},
{
    id: "effort-driven",
    name: "Effort Driven",
    field: "effortDriven"}
];

var options = {
    enableCellNavigation: true,
    enableColumnReorder: false
};

$(function() {
    var data = [];
    for (var i = 0; i < 500; i++) {
        data[i] = {
            title: "Task " + i,
            duration: "5 days",
            percentComplete: Math.round(Math.random() * 100),
            start: "01/01/2009",
            finish: "01/05/2009",
            effortDriven: (i % 5 == 0)
        };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);

    $("#myGrid").show();
})