JSFiddle - React, Tailwind, and code Playground

by cilex

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.3/handlebars.min.js"></script>
<script src="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.js"></script>
<link rel="stylesheet" href="http://code.cloudcms.com/alpaca/1.5.14/bootstrap/alpaca.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1>Alpaca + datatable rowReorder</h1>
<div id="field7"></div>

JavaScript

$("#field7").alpaca({
    "data": [{
        "rank": 1,
        "name": "Michael Jordan",
        "sport": "basketball",
        "active": false,
        "number": 23
    }, {
        "rank": 2,
        "name": "Pele",
        "sport": "soccer",
        "active": false,
        "number": 10
    }, {
        "rank": 3,
        "name": "Wayne Gretzky",
        "sport": "hockey",
        "valid": false,
        "number": 99
    }],
    "schema": {
        "type": "array",
        "items": {
            "type": "object",
            "properties": {
                "rank": {
                    "type": "number",
                    "title": "Rank",
                    "readonly": true
                },
                "name": {
                    "type": "string",
                    "title": "Name"
                },
                "sport": {
                    "type": "string",
                    "title": "Sport",
                    "enum": ["basketball", "baseball", "hockey", "soccer", "football"]
                },
                "active": {
                    "type": "boolean",
                    "title": "Active",
                    "enum": [true, false]
                },
                "number": {
                    "type": "number",
                    "title": "Number"
                }
            }
        }
    },
    "options": {
        "type": "table",
        "items": {
            "fields": {
                "name": {
                    "type": "personalname"
                },
                "sport": {
                    "type": "select",
                    "optionLabels": ["Basketball", "Baseball", "Hockey", "Soccer", "Football"]
                },
                "active": {
                    "type": "select",
                    "optionLabels": ["Yep", "Nope"]
                },
                "number": {
                    "type": "integer"
                }
            }
        },
        "datatables": {
           ...