JSFiddle - React, Tailwind, and code Playground

by blowsie

HTML

<script src="http://mleibman.github.com/SlickGrid/lib/firebugx.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery-1.7.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drag-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/lib/jquery.event.drop-2.0.min.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.cellrangeselector.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.cellselectionmodel.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.rowselectionmodel.js"></script>
<script src="http://mleibman.github.com/SlickGrid/plugins/slick.rowmovemanager.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.formatters.js"></script>
<script src="http://mleibman.github.com/SlickGrid/slick.editors.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"
type="text/css" />
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/css/smoothness/jquery-ui-1.8.16.custom.css"
type="text/css" />
<link rel="stylesheet" href="http://mleibman.github.com/SlickGrid/examples/examples.css"
type="text/css" />
<div style="position:relative">
    <div style="width:600px;">
        <div class="grid-header" style="width:100%">
            <label>Santa's TODO list:</label>
        </div>
        <div id="myGrid" style="width:100%;height:500px;"></div>
    </div>
    <div class="options-panel"> <b>Tips:</b>

        <hr/>
        <div style="padding:6px;">Click to select, Ctrl-click to toggle selection, Shift-click to select
            a range.
            <br/>Drag one or more rows by the handle to reorder.
           ...

CSS

.cell-title {
        font-weight: bold;
    }
    .cell-effort-driven {
        text-align: center;
    }
    .cell-reorder {
        cursor: move;
        background: url("http://mleibman.github.com/SlickGrid/images/drag-handle.png") no-repeat center center;
    }
    .cell-selection {
        border-right-color: silver;
        border-right-style: solid;
        background: #f5f5f5;
        color: gray;
        text-align: right;
        font-size: 10px;
    }
    .slick-row.selected .cell-selection {
        background-color: transparent;
        /* show default selected row background */
    }
    .recycle-bin {
        width: 120px;
        border: 1px solid gray;
        background: beige;
        padding: 4px;
        font-size: 12pt;
        font-weight: bold;
        color: black;
        text-align: center;
        -moz-border-radius: 10px;
    }
    .red {
        background: red;
    }
    .bold {
        font-weight: bold;
    }

JavaScript

var grid;
var data = [];
var columns = [{
    id: "#",
    name: "",
    width: 40,
    behavior: "selectAndMove",
    selectable: false,
    resizable: false,
    cssClass: "cell-reorder dnd"
}, {
    id: "name",
    name: "Name",
    field: "name",
    width: 500,
    cssClass: "cell-title",
    editor: Slick.Editors.Text,
    validator: requiredFieldValidator,
     	sortable: true
}, {
    id: "complete",
    name: "Complete",
    width: 60,
    cssClass: "cell-effort-driven",
    field: "complete",
    cannotTriggerInsert: true,
    formatter: Slick.Formatters.Checkmark,
    editor: Slick.Editors.Checkbox
}];

var options = {
    editable: true,
    enableAddRow: true,
    enableCellNavigation: true,
    forceFitColumns: true,
    autoEdit: false,
    	multiColumnSort: true
};

function requiredFieldValidator(value) {
    if (value == null || value == undefined || !value.length) {
        return {
            valid: false,
            msg: "This is a required field"
        };
    } else {
        return {
            valid: true,
            msg: null
        };
    }
}

$(function () {
    data = [{
        name: "Make a list",
        complete: true
    }, {
        name: "Check it twice",
        complete: false
    }, {
        name: "Find out who's naughty",
        complete: false
    }, {
        name: "Find out who's nice",
        complete: false
    }];

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

    grid.setSelectionModel(new Slick.RowSelectionModel());

    var moveRowsPlugin = new Slick.RowMoveManager({
        cancelEditOnDrag: true
    });

    moveRowsPlugin.onBeforeMoveRows.subscribe(function (e, data) {
        for (var i = 0; i < data.rows.length; i++) {
            // no point in moving before or after itself
            if (data.rows[i] == data.insertBefore || data.rows[i] == data.insertBefore - 1) {
                e.stopPropagation();
                return false;
            }
        }
        return true;
   ...