table without thead and tbody sorts initial th row of headers in 5.2.1 #197
Description
If this is intended feel free to close, but on following example the sorting also sorts the initial th row after clicking one or two times on the header.. I was hoping to not add thead to keep my current HTML unchanged. Maybe related: #27 Thanks.
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Tablesort</title>
<style>
/* Taken from: https://raw.githubusercontent.com/tristen/tablesort/5.2.1/tablesort.css
* Not on CDNJS for some reason: https://github.com/tristen/tablesort/issues/196
*/
th[role=columnheader]:not(.no-sort) {
cursor: pointer;
}
th[role=columnheader]:not(.no-sort):after {
content: '';
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #404040 transparent;
visibility: hidden;
opacity: 0;
-ms-user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
th[aria-sort=ascending]:not(.no-sort):after {
border-bottom: none;
border-width: 4px 4px 0;
}
th[aria-sort]:not(.no-sort):after {
visibility: visible;
opacity: 0.4;
}
th[role=columnheader]:not(.no-sort):hover:after {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<table id='table-id' class='sort'>
<tr>
<th>String col</th>
<th>Integer col</th>
<th>Float col</th>
</tr>
<tr>
<td>ab</td>
<td>2</td>
<td>10.1</td>
</tr>
<tr>
<td>a</td>
<td>10</td>
<td>10.2</td>
</tr>
<tr>
<td>c</td>
<td>2</td>
<td>3.4</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/tablesort.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.date.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.dotsep.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.filesize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.monthname.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/5.2.1/sorts/tablesort.number.min.js"></script>
<script>
window.onload = function() {
const tables = document.getElementsByTagName('table');
for(let i = 0; i < tables.length; ++i) {
const table = tables[i];
new Tablesort(table);
}
};
</script>
</body>
</html>