JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.ui.position.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/font/context-menu-icons.eot"></script>
<table border="1">
  <tbody class="context-menu-one">
    <tr>
      <td>R1C1</td>
      <td>R1C2</td>
    </tr>
    <tr>
      <td>R2C1</td>
      <td>R1C2</td>
    </tr>
  </tbody>

</table>

JavaScript

$(function() {
        $(".context-menu-one").contextMenu({
            selector: 'td',
            callback: function(key, options) {
                var content = $(this).text();
                alert("You clicked on: " + content);
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "delete": {name: "Delete", icon: "delete"},
            }
        });

        $('.context-menu-one').on('click', function(e){
            console.log('clicked', this);
        })
    });