JSFiddle - React, Tailwind, and code Playground

HTML

<table class="detail" border=1 >
    <col style="width: 40px;">
    <col style="width: 80px;">
    <col style="width: 150px;">
    <col style="width: 40px;">
    <thead>
        <tr><th colspan="3"><button class="show">Show All</button><button class="hide">Hide All</button></th></tr>
        <tr>
            <th>ID</th>
            <th colspan="2">Name</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr class="parent">
            <td>123</td>
            <td colspan="2">Bill Gates</td>
            <td>100</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>2007-01-02</td>
            <td>A short description</td>
            <td>15</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>2007-02-03</td>
            <td>Another description</td>
            <td>45</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>2007-03-04</td>
            <td>More Stuff</td>
            <td>40</td>
        </tr>
        
        <tr class="parent">
            <td>456</td>
            <td colspan="2">Bill Brasky</td>
            <td>50</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td>2007-01-02</td>
            <td>A short description</td>
            <td>10</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td>2007-02-03</td>
            <td>Another description</td>
            <td>20</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td>2007-03-04</td>
            <td>More Stuff</td>
            <td>20</td>
        </tr>
        
        <tr class="parent">
            <td>789</td>
            <td colspan="2">Phil Upspace</td>
            <td>75</td>
        </tr>
        <tr class="child">
            <td>&nbsp;</td>
            <td>2007-01-02</td>
            <td>A short description</td>
            <td>33</td>
        </tr>
        <tr class="child">
           ...

CSS

.parent{cursor:pointer}

JavaScript

$(document).ready(function() {
      $('table.detail').each(function() {
        var $table = $(this);
        $table.find('.parent').click(function() {
            $(this).nextUntil('.parent').toggle(); // must use jQuery 1.4 for nextUntil() method
        });

        var $childRows = $table.find('tbody tr').not('.parent').hide();
        $table.find('button.hide').click(function() {
            $childRows.hide();
        });
        $table.find('button.show').click(function() {
            $childRows.show();
        });
    });
});