JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="listBtns">
    <li><a href="#" class="on">01</a></li>
    <li><a href="#" class="on">02</a></li>
    <li><a href="#" class="on">03</a></li>
    <li><a href="#" class="on">04</a></li>
    <li><a href="#" class="on">05</a></li>
    <li><a href="#" class="on">06</a></li>
</ul>

<table id="tblResult">
    <thead>
        <tr>
            <th></th>
            <th>01</th>
            <th>02</th>
            <th>03</th>
            <th>04</th>
            <th>05</th>
            <th>06</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>row1</th>
            <td class="val01">01</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>row2</th>
            <td class="val01">01</td>
            <td class="val02">02</td>
            <td class="val03">03</td>
            <td class="val04">04</td>
            <td class="val05">05</td>
            <td class="val06">06</td>
        </tr>
        <tr>
            <th>row3</th>
            <td class="val03">03</td>
            <td class="val05">05</td>
            <td class="val04">04</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="val02 04 05 06">
            <th>row4</th>
            <td class="val02">02</td>
            <td class="val04">04</td>
            <td class="val05">05</td>
            <td class="val06">06</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>row5</th>
            <td class="val04">04</td>
            <td class="val06">06</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>row6</th>
            <td class="val03">03</td>
            <td class="val02">02</td>
            <td class="val04">04</td>
            <td class="val06">06</td>
            <td class="val05">05</td>
            <td></td>
     ...

CSS

ul { list-style: none;}
a {text-decoration: none;}
#listBtns {
    width: 100%;
    overflow: hidden;
}
#listBtns li {
    float: left;
    margin-right: 5px;
}
#listBtns li a {
    display: block;
    padding: 5px;
    color: #fff;
}
#listBtns li a.on {
    background-color: #c00;
}
#listBtns li a.off {
    background-color: #999;
}
table#tblResult {
    clear: both;
    border-collapse: collapse;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
}

table#tblResult th,
table#tblResult td {
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    background: #fff;
}

JavaScript

$(function() {
    $('#listBtns a').click(function() {
       $(this).toggleClass('on off');        
       $("#tblResult tr").eq($(this).text()).toggle('on off');
    });
});