How to collapse all sub rows in hierarchical table?

I have a hierarchical table with 5 index levels and I want to implement expandable/collapsible rows for this table. Here's simplified but comparable example of what I'm doing:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<table class="table table-condensed" style="border-collapse:collapse;">
  <thead>
<tr style="text-align: right;">
  <th>A</th>
  <th>B</th>
  <th>C</th>
  <th>Val1</th>
</tr>
</thead>

<tbody>
<tr class="collapsed toplevel" data-toggle="collapse" data-target=".Store1" role="button">
  <th valign="top">Store 1</th>
  <th></th>
  <th></th>
  <td>10</td>
</tr>
<tr class="collapse Store1" data-toggle="collapse" data-target=".Clerk1" role="button">
  <th></th>
  <th valign="top">Clerk 1</th>
  <th></th>
  <td>1</td>
</tr>
<tr class="collapse Clerk1" role="button">
  <th></th>
  <th></th>
  <th>A1</th>
  <td>1</td>
</tr>
<tr class="collapse Clerk1" role="button">
  <th></th>
  <th></th>
  <th>A2</th>
  <td>1</td>
</tr>
<tr class="collapse Clerk1" role="button">
  <th></th>
  <th></th>
  <th>A3</th>
  <td>1</td>
</tr>
<tr class="collapse Clerk1" role="button">
  <th></th>
  <th></th>
  <th>A4</th>
  <td>1</td>
</tr>
<tr class="collapse Clerk1" role="button">
  <th></th>
  <th></th>
  <th>A5</th>
  <td>1</td>
</tr>
<tr class="collapse Clerk1" role="button">
  <th></th>
  <th></th>
  <th>A6</th>
  <td>1</td>
</tr>
<tr class="collapse Store1" data-toggle="collapse" data-target=".Clerk2" role="button">
  <th></th>
  <th valign="top">Clerk 2</th>
  <th></th>
  <td>1</td>
</tr>
<tr class="collapse Clerk2" role="button">
  <th></th>
  <th></th>
  <th>B1</th>
  <td>1</td>
</tr>
<tr class="collapse Clerk2" role="button">
  <th></th>
  <th></th>
  <th>B2</th>
  <td>1</td>
</tr>
    </tbody>
</table>

I'm able to expand and collapse rows level by level. If I expand all rows and then collapse 'Clerk 1' I want 'Clerk 2' to stay expanded. However, if I collapse 'Store 1' I want both 'Clerk 1' and 'Clerk 2' to collapse with their respective sub rows ('A1' through 'A6' and 'B1' and 'B2'). This is not what currently happens if the table is fully expanded, then 'Clerk 1' and 'Clerk 2' disappears but their sub rows remains visible.

Any tips on how to achieve this?

A second problem is that the performance on my full table (8,000 rows and 5 index levels) is very poor. When I expand the last level it can take up to 20 seconds for all rows to show up for that level. Any tips on how to improve this?

Thanks!

How to collapse all sub rows in hierarchical table?

0 Answers