JSFiddle - React, Tailwind, and code Playground

by Rodrigo Portillo

HTML

<table id="tabelinha">
<thead>
  <tr>
    <th>ID</th>
    <th>Nome</th>
    <th>Quanto Custa</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>1</td>
    <td>João</td>
    <td>R$10,00</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Patrícia</td>
    <td>R$15,00</td>
  </tr>
</tbody>
</table>

CSS

td, th{
  font-family: sans-serif;
  border: 2px solid black;
  padding: 10px;
  font-size: 1rem;
}

th{
  cursor: pointer;
  background: yellow;
}

JavaScript

var tabelaId = "tabelinha";
var ths = document.querySelectorAll("#" + tabelaId +" thead th");

[].forEach.call(ths, (th, index)=>{
	th.addEventListener("click", function(el){
  	var result = [];
		let trs = document.querySelectorAll("#" + tabelaId +" tbody tr");
    [].forEach.call(trs, (tr)=>{
    	result.push(tr.querySelectorAll("td")[index].innerHTML);
    });
    
   	alert(th.innerHTML + ": " + result.join(";"));
  });
});