JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>   
    
    <body>
<div class="container">
<table class="table table-bordered" id="t">   
    <tr>
        <th>Name</th>
        <th>Details</th>          
    </tr>
    <tr>
        <td>Expert PHP</td>
        <td>Provide Online tutorials</td>
    </tr>
    <tr>
        <td>Expert Java</td>
        <td>Provide Online/Offline tutorials</td>
    </tr>
 </table>
 </div>
<div class="context-menu" id="context-menu" style="display:none;position:absolute;z-index:99;">
    <ul>
      <li><a href="#"><i class="fa fa-eye"></i> View</a></li>       
      <li><a href="#"><i class="fa fa-share-alt"></i> Share</a></li>       
      <li><a href="#"><i class="fa fa-trash"></i> Delete</a></li>       
      <li><a href="#"><i class="fa fa-share fa-fw"></i> Move</a></li>       
      <li><a href="#"><i class="fa fa-files-o"></i> Copy</a></li>       
    </ul>
</div>
</body>
</body>

CSS

/*right click*/
  .context-menu ul{ 
    z-index: 1000;
    position: absolute;
    overflow: hidden;
    border: 1px solid #CCC;
    white-space: nowrap;
    font-family: sans-serif;
    background: #FFF;
    color: #333;
    border-radius: 5px;
    padding: 0;
}
/* Each of the items in the list */
.context-menu ul li {
    padding: 8px 12px;
    cursor: pointer;
    list-style-type: none;
}
.context-menu ul li:hover {
    background-color: #DEF;
}
.highlighted {
  background:orange;
}

JavaScript

$(document).bind("mousedown", function (e) {
    // If the clicked element is not the menu
    if (!$(e.target).parents(".context-menu").length > 0) {    
        // Hide it
        $(".context-menu").hide(100);
        $("tr.highlighted").removeClass("highlighted");
    }
  });
  $("tr:gt(0)").contextmenu(function(e){
  	e.preventDefault();
    $('#context-menu').show().offset({'top':e.pageY,'left':e.pageX});
    $("tr.highlighted").removeClass("highlighted");
    $(this).addClass("highlighted");
  });