JSFiddle - React, Tailwind, and code Playground

by Vivek Todur

HTML

<!DOCTYPE html>
<html>
  <head>

    <link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/south-street/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <link href="//cdn.datatables.net/plug-ins/725b2a2115b/integration/jqueryui/dataTables.jqueryui.css" rel="stylesheet" type="text/css" />
    
    <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    
    <script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.js"></script>
    <script src="//cdn.datatables.net/colreorder/1.1.2/js/dataTables.colReorder.min.js"></script>
    <script src="//cdn.datatables.net/plug-ins/725b2a2115b/api/fnFilterClear.js"></script>
    
    <script src="//cdn.jsdelivr.net/jquery.ui-contextmenu/1.7.0/jquery.ui-contextmenu.min.js"></script>
    
    <meta charset="utf-8" />
    
    <title>DataTables - Context menu integration</title>
  
  </head>
  <body>
    <div class="container">
      <table id="example" class="display" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>

        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
      ...

CSS

body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}

div.container {
  min-width: 980px;
  margin: 0 auto;
  padding: 10px;
}

/* An ugly trick to use a filter icon */
.ui-icon-volume-off.ui-icon-filter {
	-ms-transform: rotate(270deg);
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}

JavaScript

$(document).ready( function () {
  var oTable = $('#example').dataTable({
    "bJQueryUI": true,
    "sDom": 'l<"H"Rf>t<"F"ip>'
  });
  $(document).contextmenu({
    delegate: ".dataTable td",
    menu: [
      {title: "Filter", cmd: "filter", uiIcon: "ui-icon-volume-off ui-icon-filter"},
      {title: "Remove filter", cmd: "nofilter", uiIcon: "ui-icon-volume-off ui-icon-filter"}
	],
	select: function(event, ui) {
		var coltext = ui.target.text();
		var colvindex = ui.target.parent().children().index(ui.target);
		var colindex = $('table thead tr th:eq('+colvindex+')').data('column-index');
		switch(ui.cmd){
			case "filter":
				oTable.fnFilter('^' + coltext + '$',colindex,true);
				break;
			case "nofilter":
				oTable.fnFilterClear();
				break;
		}
	},
	beforeOpen: function(event, ui) {
		var $menu = ui.menu,
			$target = ui.target,
			extraData = ui.extraData;
		ui.menu.zIndex(9999);
    }
  });
} );