JSFiddle - React, Tailwind, and code Playground

by Tony Alves

HTML

<script src="http://positivenull.net/famous/fiddle/famousBox.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/be7019ee387/integration/jqueryui/dataTables.jqueryui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/smoothness/jquery-ui.css">

JavaScript

define('main', function(require, exports, module) {
    
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var Transform = require('famous/core/Transform');
    var StateModifier = require('famous/modifiers/StateModifier');
    var Easing = require('famous/transitions/Easing');
    
    var mainContext = Engine.createContext();
    
    var surface = new Surface({
        size: [400, 310],
        content: 'test<table id="tblid"></table>'
    });

     surface.on('deploy', function() {
        console.debug('deploy event called');
        _jQueryHandler();
    });
    
    var stateModifier = new StateModifier({
        origin: [.5, .5],
        align: [.5, .5]
    });

    mainContext.add(stateModifier).add(surface);
    
    function _jQueryHandler() {
        $(function() {

    $('#tblid').dataTable({
        "lengthMenu": [[15, 30, 60, -1], [15, 30, 60, "All"]],
        "data": [{"application name":"PDO home page Web services","id":62,"saptickets":38,"servicecalls":3978,"changerequests":28,"apptickets":312}],
        "columns": [
            { "data": null, "defaultContent": "<div class=\"indicator\">&nbsp;</div>", "width": "20px"},
            { "data": "application name", "title": "Application Name" },
            { "data": "changerequests", "title": "Change Requests" },
            { "data": "servicecalls", "title": "Service Calls" },
            { "data": "apptickets", "title": "App Tickets" },
            { "data": "saptickets", "title": "SAP Tickets" }
        ],
        "autoWidth": true
    });
            
        });     
    };
});