JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<table id="mytable" border="1">
	<tbody>
	<tr id="header">
		<th >Header v1</th>
		<th >Header 2</th>
		<th >Header 3</th>
		<th >Header 4</th>
	</tr>
	<tr>
		<td>row 1, cell 1</td>
		<td>row 1, cell 2</td>
		<td>row 1, cell 3</td>
		<td>row 1, cell 4</td>
	</tr>
	<tr>
		<td>row 2, cell 1</td>
		<td>row 2, cell 2</td>
		<td>row 2, cell 3</td>
		<td>row 2, cell 4</td>
	</tr>
	</tbody>
</table>

CSS

.blank {
    display:block;
    padding:4px;
    background:#c3c3c3;
    position:absolute;
}

table tr td {
    overflow:visible;
    position:relative;
}

table tr {
    cursor:pointer;
}


tr td.highlight {
  background: #D73535;
}

* { 
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
}
    
    
}

JavaScript

var longPressTimer;
	var boundObj = {};
	/**
	* Done to get the actual header which is clicked
	* Alternatively it can be done by event.target element. 
	* I don't have a device so couldn't test the solution hence this approach
	*
	**/
	function initPopulateBoundaries(){
			var hdrElement = document.getElementById('header');
			for (var i = 0, j = hdrElement.children.length; i < j;i++){
					var header= hdrElement.children[i].getBoundingClientRect();
					boundObj[hdrElement.children[i].innerHTML] = {'left': header.left , 'right':header.right};
					
			}
	
	}
	initPopulateBoundaries();
	
	
	$(document).ready(function(){
	
	/**
	* Element on which the long press behaviour
	**/
    $("table tbody tr").on("mousedown touchstart", function(e){
		if (!document.getElementById('ctxmenu')){
			var isiPad = navigator.userAgent.match(/iPad/i) != null;
			var ref = this;
			document.oncontextmenu = function() {return false;}; 
			
			e.preventDefault();
			if(!isiPad){
				//displayContextMenu(this,e);
			}
			
			
			longPressTimer = setTimeout(function(){
			 if(true){
				console.log("timer" , ref, e.button);
				displayContextMenu(ref,e);
			 }
			}, 2000);
		}
    });
    $("table tbody tr").on("mousedown touchend",function(e){
		clearTimeout(longPressTimer);
		e.preventDefault();
		
	});
    $(document).on('click','.blank a',function(){ 
        $(this).parent().fadeOut(400,function() { 
            $(this).remove(); 
        }); 
    }).on('mouseleave','.blank',function(){  
        $(this).fadeOut(400, function(){ 
            $(this).remove();     
        });     
    }); 

	function displayContextMenu(obj,e){
        alert(e.pageX + " :: "+ e.pageY );
        if( e.button == 2 ) {
            $(obj).find('th:first').prepend('<div id="ctxmenu" class="blank"><a href="#"  onclick="deleteElementFromCoordinates('+ e.pageX+', ' + e.pageY+');">delete</a></div>').find('.blank').css('left',e.pageX + 'px').css('top',e.pageY + 'px').fadeIn(400);
            
        } else...