tristen / tablesort

:arrow_up_down: A small tablesorter in plain JavaScript
https://tristen.ca/tablesort/demo/
MIT License
1.1k stars 179 forks source link

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

Open cirosantilli opened 4 years ago

cirosantilli commented 4 years ago

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: https://github.com/tristen/tablesort/issues/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>