table without thead and tbody sorts initial th row of headers in 5.2.1 #197

cirosantilli · 2020-06-18T23:14:42Z

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>

The text was updated successfully, but these errors were encountered:

tristen added the help wanted label Jun 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

table without thead and tbody sorts initial th row of headers in 5.2.1 #197

table without thead and tbody sorts initial th row of headers in 5.2.1 #197

cirosantilli commented Jun 18, 2020 •

edited

table without thead and tbody sorts initial th row of headers in 5.2.1 #197

table without thead and tbody sorts initial th row of headers in 5.2.1 #197

Comments

cirosantilli commented Jun 18, 2020 • edited

cirosantilli commented Jun 18, 2020 •

edited