JSFiddle - React, Tailwind, and code Playground

HTML

<table border="1" cellspacing="1" width="500">
    <tr>
        <th>FRUITS</th>
        <th>COLORS</th>
        <th>VEGGIES</th>
        <th>NUMBERS</th>
    </tr>
    <tr>
        <td>apples</td>
        <td>red</td>
        <td>carrots</td>
        <td>123</td>
    </tr>
    <tr>
        <td>oranges</td>
        <td>blue</td>
        <td>celery</td>
        <td>456</td>
    </tr>
    <tr>
        <td>pears</td>
        <td>green</td>
        <td>brocoli</td>
        <td>789</td>
    </tr>
    <tr>
        <td>mangos</td>
        <td>yellow</td>
        <td>lettuce</td>
        <td>098</td>
    </tr>
</table>

JavaScript

(function() {
    var headings = document.getElementsByTagName('th')
    for (var i = 0, amount = headings.length; i < amount; i++) {
        headings[i].addEventListener("click", function() {
            alert(this.innerText);
        });
    }
})();