JSFiddle - React, Tailwind, and code Playground

by spetnik

HTML

<table id="tblData">
    <thead>
        <tr>
            <th>One</th><th>Two</th><th>Three</th><th>Four</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td>
        </tr>
        <tr>
            <td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td>
        </tr>
        <tr>
            <td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td>
        </tr>
        <tr>
            <td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td>
        </tr>
        <tr>
            <td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td>
        </tr>
        <tr>
            <td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td><td tabindex="0"></td>
        </tr>
    </tbody>
</table>

CSS

body{
	font-family: sans-serif;
}

#tblData{
	border-spacing: 0px;
	width: 100%;
}
#tblData td, #tblData th{
	border: 1px solid #ddd;
	margin: 0px;
	padding: 2px;
	height: 18px;
	user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	cursor: default;
}
#tblData td:focus{
  outline: 1px solid blue;
}

JavaScript

document.getElementById("tblData").onpaste = function(evt){
	console.log(evt);
	if(document.querySelector(":focus").tagName.toLowerCase() != "td"){
		return;
	}
	
	document.querySelector(":focus").innerText = evt.clipboardData.getData("text/plain");
};