JSFiddle - React, Tailwind, and code Playground

by vbfischer

HTML

<script src="https://raw.github.com/mleibman/SlickGrid/master/slick.core.js"></script>
<link rel="stylesheet" href="https://raw.github.com/mleibman/SlickGrid/master/slick.grid.css">
<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.grid.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/smoothness/jquery-ui.css">
<table id="theTable"></table>

JavaScript

var columns = [
    {
    id: 'jobNumber',
    name: 'JobNumber',
    field: 'jobNumber'},
{
    id: 'component',
    name: 'Component',
    field: 'component'},
{
    id: 'assigned',
    name: 'assigned',
    field: 'assigned'},
{
    id: 'unassigned',
    name: 'unassigned',
    field: 'unassigned'}
];

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

var data = [
    {
    jobNumber: 'abcd',
    component: 'A',
    assigned: '0',
    unassigned: '10'}
];

var grid;

grid = new Slick.Grid("#theTable", data, columns, options);
$("#theTable").show();