JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <thead>
        <tr><th>Summary Row #1</th></tr>
    </thead>
    
    <tbody class="collapsed">
        <tr><td>Drill Down Data</td></tr>
        <tr><td>Drill Down Data</td></tr>
    </tbody>
    
    <thead>
        <tr><th>Summary Row #2</th></tr>
    </thead>
    
    <tbody class="collapsed">
        <tr><td>Drill Down Data</td></tr>
        <tr><td>Drill Down Data</td></tr>
    </tbody>
    
    
    
</table>

CSS

td, th {
    border: 1px solid gray;
    padding: 5px;
}

th {cursor: pointer; background: #eee;}

table {
    width: 100%;
    border-collapse: collapse;
}

.collapsed {
    display: none;
}

JavaScript

$('thead').on('click', function(){
    $(this).next('tbody').toggleClass('collapsed');
});