Example 1. Basic table

HTML

<table class="table-sortable">
	<thead>
		<tr>
			<th data-sort="string">String</th>
			<th data-sort="string">String (Other lang)</th>
			<th data-sort="int">Int</th>
			<th data-sort="float">Float</th>
			<th data-sort="date">Date</th>
			<th data-sort="int">Cells with <code>data-sort-value</code></th>
		</tr>
	</thead>
	<tbody>
		...
			<td>Value to sort and show</td>
			<td data-sort-value="Value to sort">Content to show</td>
		... (rest of the table)
	

JS

<script src="tablesort.min.js"></script>
// One table
<script>document.querySelector('.table-sortable').tsortable()</script>
// More than one table
// <script>document.querySelectorAll('.table-sortable').forEach(el => el.tsortable())</script>
	

Optional CSS

[data-sort]:hover {
	cursor: pointer;
}

[data-dir="asc"]:after {
	content: ' ↗';
}

[data-dir="desc"]:after {
	content: ' ↘';
}
	

Optional JS

... functions that update data-sort-value attributes dynamically ...
	

Example 2. Merged header cells

HTML

<table class="table-sortable">
	<thead>
		<tr>
			<th data-sort="int" rowspan="2">data-sort-col="0" (auto)</th>
			<th data-sort="int" colspan="2">data-sort-col="2" (auto)</th>
		</tr>
		<tr>
			<th data-sort="int" data-sort-col="1">data-sort-col="1"</th>
			<th data-sort="int" data-sort-col="2">data-sort-col="2"</th>
		</tr>
	</thead>
	<tbody>
		...
		... (rest of the table)
	

Example 3. Big table

bigtable.html