JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<h1>Testing Context Menu</h1>

<table id="myTable" class="table">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-toggle="dropdown">Field 1-1</td>
            <td data-toggle="dropdown">Field 1-2</td>
            <td data-toggle="dropdown">Field 1-3</td>
        </tr>
        <tr>
            <td data-toggle="dropdown">Field 2-1</td>
            <td data-toggle="dropdown">Field 2-2</td>
            <td data-toggle="dropdown">Field 2-3</td>
        </tr>
        <tr>
            <td data-toggle="dropdown">Field 3-1</td>
            <td data-toggle="dropdown">Field 3-2</td>
            <td data-toggle="dropdown">Field 3-3</td>
        </tr>
        <tr>
            <td data-toggle="dropdown">Field 4-1</td>
            <td data-toggle="dropdown">Field 4-2</td>
            <td data-toggle="dropdown">Field 4-3</td>
        </tr>
    </tbody>
</table>
<div class="dropdown" id="ddMenu" style="display:none;">
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</div>

JavaScript

var contextMenu = $("#ddMenu"); // catch the context menu element
var myTable = $("#myTable"); // our table

// hide context menu if clicked anyware on the page
$("html").on("click", function() {
    contextMenu.hide();
});
// make the context menu position absolute so we can place it where we want 
contextMenu.css("position", "absolute");
// make the context menu content visible
contextMenu.find(".dropdown-menu").show();
// here react on menu click, also prevent propagating the click up so teh menu will not close when clicked inside
contextMenu.on("click", function(e) {
   e.stopPropagation();
});

// make context menu appear on right-click
myTable.on("contextmenu", function (e) {
    e.preventDefault(); // prevent default context menu display
    var currentTd = $(e.target); // the TD that was clicked
    var currentPosition = currentTd.position(); // TD's position
    // move the context menu under the TD
    contextMenu.css({
        "left": currentPosition.left + "px",
        "top": (currentPosition.top + currentTd.outerHeight()) + "px"
    });
    // show the context menu
    contextMenu.show();
});