JSFiddle - React, Tailwind, and code Playground

by Dhiraj Bodicherla

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

table {
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
    width: 100%;
}

td, th, .row, .col, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

tr, col {
    border: 2px solid black;
}

th {
    border-top: 3px solid black;
}

td:hover {
    border: 2px solid red;
}

h2 {
    font-family: sans-serif;
    font-size: 22px;
    padding: 5px;
    margin-bottom: 5px;
    border-bottom: 3px solid #669AFF;
    color: #003366; 
}
#results{
    background: white;
    border: 1px solid lightgray;
    box-shadow: 1px 1px 1px silver;
    padding: 5px;
}

JavaScript 1.7

/** @jsx React.DOM */

var Search = React.createClass({
    getInitialState: function() {
        return {};
    },
    _onContextMenu: function(e) {
        this.contextMenu.setState({
            contextMenuLocation: {'x' : e.pageX, 'y': e.pageY}
        });
        return false;
    },
    _onPageClick: function() {
        
    },
    
    componentDidMount: function(){
        this.contextMenu = this.refs.contextMenu;
    },
    
    render: function() {
        return (
            <div onClick={this._onPageClick}>
                <div onContextMenu={this._onContextMenu} >  
                <table>
                                <col />
                                <tr>
                                    <td>Status</td>
                                    <td>Users</td> 
                                    <td>Condition</td>
                                </tr>
                                <tr>
                                    <td>User Info</td>
                                    <td>With Preferences</td>
                                    <td>With Roles</td>
                                </tr>
                                <tr>
                                    <td>Johnny</td>
                                    <td>17</td>
                                    <td>2</td>
                                </tr>
                            </table>
                
                </div>
                <ContextMenu ref="contextMenu" />
            </div>
        );
    }
});

var ContextMenu = React.createClass({
    getInitialState: function(){
        return {contextMenuLocation: ''};
    },
    render: function() {
        var location = this.state.contextMenuLocation;
        var contentMenuStyle = {
            display: location ? 'block' : 'none',
            position: 'absolute', 
            left: location ? location.x : 0,
            top: location ? location.y : 0
        };
        return (
            <div id="results"...