JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://dgoguerra.github.io/bootstrap-menu/js/jquery-3.1.0.min.js"></script>
<script src="https://dgoguerra.github.io/bootstrap-menu/js/toastr.js"></script>
<script src="https://dgoguerra.github.io/bootstrap-menu/dist/BootstrapMenu.min.js"></script>
<link rel="stylesheet" href="https://dgoguerra.github.io/bootstrap-menu/css/bootstrap.min.css">
<link rel="stylesheet" href="https://dgoguerra.github.io/bootstrap-menu/css/toastr.css">
 <table class="table table-striped table-hover">
          <thead>
            <tr>
              <th>#</th>
              <th>Name</th>
              <th>Description</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr class="demo4TableRow" data-row-id="1">
              <td>1</td>
              <td>First row</td>
              <td>Lorem ipsum dolor sit amet</td>
              <td></td>
            </tr>
            <tr id="demo4TableRow" data-row-id="2">
              <td>2</td>
              <td>Second row</td>
              <td>Nemo enim ipsam voluptatem quia voluptas</td>
              <td><span class="label label-warning pull-right">Not editable</span></td>
            </tr>
            <tr class="demo4TableRow" data-row-id="3">
              <td>3</td>
              <td>Third row</td>
              <td>Ut enim ad minima veniam</td>
              <td><span class="label label-danger pull-right">Not deletable</span></td>
            </tr>
          </tbody>
        </table>

JavaScript

var demo4Rows = {
      '1': { name: 'First row', isEditable: true, isRemovable: true },
      '2': { name: 'Second row', isEditable: false, isRemovable: true },
      '3': { name: 'Third row', isEditable: true, isRemovable: false }
    };



document.getElementById("demo4TableRow").addEventListener("oncontextmenu", function(event){
    event.preventDefault()
});

    var menu = new BootstrapMenu('#demo4TableRow', {
      fetchElementData: function($rowElem) {
        var rowId = $rowElem.data('rowId');
        return demo4Rows[rowId];
      },
      /* group actions by their id to make use of separators between
       * them in the context menu. Actions not added to any group with
       * this option will appear in a default group of their own. */
      actionsGroups: [
        ['setEditable', 'setUneditable' ],
        ['deleteRow']
      ],
      /* you can declare 'actions' as an object instead of an array,
       * and its keys will be used as action ids. */
      actions: {
        editName: {
          name: 'Edit name',
          iconClass: 'fa-pencil',
          onClick: function(row) {
            toastr.info("'Edit name' clicked on '" + row.name + "'");
          },
          isEnabled: function(row) {
            return row.isEditable;
          }
        },
        editDescription: {
          name: 'Edit description',
          iconClass: 'fa-pencil',
          onClick: function(row) {
            toastr.info("'Edit description' clicked on '" + row.name + "'");
          },
          isEnabled: function(row) {
            return row.isEditable;
          }
        },
        setEditable: {
          name: 'Set editable',
          iconClass: 'fa-unlock',
          onClick: function(row) {
            toastr.info("'Set editable' clicked on '" + row.name + "'");
          },
          isShown: function(row) {
            return !row.isEditable;
          }
        },
        setUneditable: {
          name: 'Set uneditable',
          iconClass:...