GOAL: I want to freeze the header, freeze the first column, and be able to collapse rows multiple times.
CURRENT PROGRESS: I have achieved freezing the header, first column, but can only collapse rows once.
MY CODE SNIPPET:
</head>
<body>
<div class="table-container">
<table>
<thead class="freeze-header">
<tr>
<th class="freeze-col">Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table>
<tbody>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 1.1, Column 1</td>
<td>Row 1.1, Column 2</td>
</tr>
<tr class="collapse">
<td colspan="3">
<table><tbody><tr>
<td>Row 1.1.1, Column 1</td>
<td>Row 1.1.1, Column 2</td>
</tr></tbody></table></td></tr></tbody></table></td></tr>
<tr class="parent-row">
<td class="freeze-col"><i class="fas fa-caret-right collapse-icon"></i> Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</tbody></table></div>
<script>
// JavaScript for collapsing rows
document.querySelectorAll('.parent-row').forEach(function(row) {
row.addEventListener('click', function() {
var nextRow = row.nextElementSibling;
if (nextRow && nextRow.classList.contains('collapse')) {
nextRow.classList.toggle('show');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-right');
row.querySelector('.collapse-icon').classList.toggle('fa-caret-down');
}
});
});
</script>