Demo - FlexGrid

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid with Custom Context Menu
  </h1>
  <p>
    This demo shows how you can add custom context menus
    to a FlexGrid. To see the contex menu, right-click the
    grid:
  </p>
  <p>
    <div id="theGrid">
    </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
.context-menu {
  padding: 6px;
  overflow: hidden;
}

.header {
  display: inline-block;
  width: 150px;
  text-align: right;
  font-weight: normal;
}

JavaScript

onload = function() {

  // create the grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
    itemsSource: getData()
  });

  // give the grid a context menu
  var menu = new wijmo.input.Menu(document.createElement('div'), {
  	dropDownCssClass: 'context-menu',
    itemsSource: 'Add Row,Remove Row,Add Column,Remove Column'.split(','),
    itemClicked: function(s, e) {
      alert('thanks for selecting option **' + s.selectedItem + '**')
    }
  });
  theGrid.hostElement.addEventListener('contextmenu', function(e) {
  
  	// select the cell under the menu
  	var ht = theGrid.hitTest(e);
    if (ht.panel == theGrid.cells) {
    	theGrid.select(ht.range);
    }
    
    // show the menu
  	menu.show(e);
  	e.preventDefault();
  })

  // create some random data
  function getData() {
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
      data = [];
    for (var i = 0; i < 200; i++) {
      data.push({
        id: i,
        country: countries[i % countries.length],
        active: i % 5 != 0,
        downloads: Math.round(Math.random() * 200000),
        sales: Math.random() * 100000,
        expenses: Math.random() * 50000
      });
    }
    return data;
  }
}