title: Invoking a context menu, from within the rowContext callback, with the target row data
body: <p>[Edited for clarity (I hope!)]</p>
  
  <p>I've been using Tabulator for a while now (just about to look at moving to 4.0!) so think I have a reasonable grasp of the basics, and am a great fan!</p>
  
  <p>In this particular case, I am using a table to hold a waitlist.  The user (internal) may need to trigger one of several actions, on any given row and targeting either that row or the data in the row, as required.  Given this scenario I am looking for a right-click context-menu scenario.</p>
  
  <p>I am able to capture the right-click event through the rowContext callback, and extract the data (row.getData() etc.) for immediate action i.e. console.log(), etc.</p>
  
  <p><strong>Tabulator Config:</strong></p>
  
  <pre><code>            waitListName = "waitlist" + bayID;
              console.log("Creating waitlist:", waitListName);
  
              let column_array = [];
              column_array.push({id: 1, title:"Index", field:"index", align:"center", headerSort: false, width:40});
              column_array.push({id: 2, title:"Name", field:"name", align:"center", headerSort: false, width:100});
              column_array.push({id: 3, title:"Qty", field:"throwers", align:"center", headerSort: false, bottomCalc: "sum" ,width:40});
              column_array.push({id: 4, title:"Listed", field:"waitlisted", align:"center", headerSort: false, width:60});
              column_array.push({id: 5, title:"Waited", field:"waittime", align:"center", headerSort: false, width:60});
              column_array.push({id: 5, title:"ETA", field:"eta", align:"center", headerSort: false, width:60});
  
             // Calculate width of tabulator table
              let table_width = 0;
              column_array.forEach ( row =&gt; {
                  table_width += row.width;
              })
  
              // Define tabulator table config                
              let tabulator_config = {
                  layout: "fitData",
                  responsiveLayout:true,
                  columns: column_array,
                  movableRows: true,
                  rowMoved: rowMovedHandler,
                  rowContext: waitlistTableContextMenu
              }
  
              // Creat new tabulator table div
              let $newdiv = $("&lt;div/&gt;")
                  .attr("id", waitListName)
                  .addClass("waitlist")
                  .css({
                          width: table_width + "px",
                      })
                  .appendTo('#waitlist_container');
  
              // create tabulator in new table div
              $newdiv.tabulator(tabulator_config)
  </code></pre>
  
  <p><strong>rowContext Handler</strong></p>
  
  <pre><code>    // define context menu for a waitlist table
      function waitlistTableContextMenu(e,row) {
          let data = row.getData();
          console.log("Right click in waitlist!");
          //console.log(e);
          //console.log(row);
          //console.log(data);
  
          e.preventDefault(); // prevent the browsers default context menu form appearing.
      } 
  </code></pre>
  
  <p>I am also able to create and attach a basic context-menu to the individual table rows by anchoring it to the <strong>.tabulator-row</strong> class.</p>
  
  <p><em>Note: I am using the jQuery-contextMenu library - <a href="https://swisnl.github.io/jQuery-contextMenu/demo.html" rel="nofollow noreferrer">https://swisnl.github.io/jQuery-contextMenu/demo.html</a> - but I've messed with a few historically, they mostly work in a similar fashion</em></p>
  
  <pre><code>    $.contextMenu({
          selector: '.tabulator-row',
          build: function($triggerElement, e) {
              console.log($triggerElement);
              return {
                  callback: function(key, options) {
                      var m = "clicked: " + key;
                      console.log(m); 
                      console.log(options);
                  },
                  items: {
                      "edit": {name: "Edit", icon: "edit"},
                      "cut": {name: "Cut", icon: "cut"},
                     copy: {name: "Copy", icon: "copy"},
                      "paste": {name: "Paste", icon: "paste"},
                      "delete": {name: "Delete", icon: "delete"},
                      "sep1": "---------",
                      "quit": {name: "Quit", icon: function(){
                          return 'context-menu-icon context-menu-icon-quit';
                      }}
                  }
              }
  
  
          }
      });
  </code></pre>
  
  <p>All of the above works successfully and I get the context menu as expected when I right click on a row.</p>
  
  <p><a href="https://i.stack.imgur.com/froRn.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/froRn.jpg" alt="enter image description here"></a></p>
  
  <p>Where I am failing is in being able to reference the tabulator row/row data from within the context-menu callback once an option is selected.</p>
  
  <p>Maybe I'm just being dense? :)</p>
  
  <p>I am using the dynamic menu build option (funnily enough, called "build") which captures the triggering element and allows the menu structure to be built at call time, however when referencing that element I'm obviously getting the underlying table element/structure of a Tabulator rowDiv</p>
  
  <pre><code>jQuery.fn.init [div.tabulator-row.tabulator-selectable.tabulator-row-even]
  0: div.tabulator-row.tabulator-selectable.tabulator-row-even.context-menu-active
  accessKey: ""
  align: ""
  assignedSlot: null
  attributeStyleMap: StylePropertyMap {size: 2}
  attributes: NamedNodeMap {0: class, 1: role, 2: style, class: class, role: role, style: style, length: 3}
  autocapitalize: ""
  baseURI: "http://tetris.local/walkins2.html"
  childElementCount: 6
  childNodes: NodeList(6) [div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell]
  children: HTMLCollection(6) [div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell, div.tabulator-cell]
  classList: DOMTokenList(4) ["tabulator-row", "tabulator-selectable", "tabulator-row-even", "context-menu-active", value: "tabulator-row tabulator-selectable tabulator-row-even context-menu-active"]
  className: "tabulator-row tabulator-selectable tabulator-row-even context-menu-active"
  clientHeight: 23
  clientLeft: 0
  clientTop: 0
  clientWidth: 360
  contentEditable: "inherit"
  dataset: DOMStringMap {}
  dir: ""
  draggable: false
  firstChild: div.tabulator-cell
  firstElementChild: div.tabulator-cell
  hidden: false
  id: ""
  innerText: "2Aurelia211:09 am31:02 pm"
  .
  .
  .
  </code></pre>
  
  <p>And while I can see some of the data elements (innerText, etc.) I don't see an elegant way to extract.</p>
  
  <p>Alternatively I could manually build something super-basic on the fly within the Tabulator rowContext call-back, but I hate re-inventing the wheel (don't we all?) so I'm hoping I'm missing something really basic here....</p>
  
  <p>Any thoughts gratefully appreciated!</p>
  
  <p>Shaun</p>