the-basicest-tablesort
Version:
Created in trying to replace https://joequery.github.io/Stupid-Table-Plugin/ on jQuery-less website
202 lines (189 loc) • 5.42 kB
HTML
<html data-bs-theme="dark">
<head>
<meta charset="utf-8">
<title>Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="tablesort.css">
</head>
<body class="container">
<h1 class="mt-5">Example 1. Basic table</h1>
<table class="table table-sm table-striped table-sortable" style="table-layout: fixed;">
<thead>
<tr>
<th data-sort="string">String</th>
<th data-sort="string">Ukrainian string</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>
<tr>
<th>A</th>
<td>Авто</td>
<td>5</td>
<td>2.3</td>
<td>2021-06-22</td>
<td data-sort-value=""></td>
</tr>
<tr>
<th>B</th>
<td>крок</td>
<td>3</td>
<td></td>
<td>2021-06-21</td>
<td data-sort-value="1">
<input type="checkbox" data-sort-value-update checked>
</td>
</tr>
<tr>
<th>E</th>
<td>Європа</td>
<td></td>
<td>11.4</td>
<td>2021-06-23</td>
<td data-sort-value="0">
<input type="checkbox" data-sort-value-update>
</td>
</tr>
<tr>
<th></th>
<td>Індія</td>
<td>4</td>
<td>7.5</td>
<td></td>
<td data-sort-value="1">
<input type="checkbox" data-sort-value-update checked>
</td>
</tr>
<tr>
<th>d</th>
<td></td>
<td>1</td>
<td>2.411</td>
<td>2021-06-20</td>
<td data-sort-value="0">
<input type="checkbox" data-sort-value-update>
</td>
</tr>
<tr>
<th>C</th>
<td>Шепіт</td>
<td>2</td>
<td>2.34 (extra text)</td>
<td>2021-06-24</td>
<td data-sort-value="1">
<input type="checkbox" data-sort-value-update checked>
</td>
</tr>
</tbody>
</table>
<script>
document.querySelectorAll('[data-sort-value-update]').forEach(el => el.onchange = e => {
el.closest('td').dataset.sortValue = el.checked ? 1 : 0
})
</script>
<h3>HTML</h3>
<pre class="alert alert-info">
<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)
</pre>
<h3>JS</h3>
<pre class="alert alert-info">
<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>
</pre>
<h3>Optional CSS</h3>
<pre class="alert alert-info">
[data-sort]:hover {
cursor: pointer;
}
[data-dir="asc"]:after {
content: ' ↗';
}
[data-dir="desc"]:after {
content: ' ↘';
}
</pre>
<h3>Optional JS</h3>
<pre class="alert alert-info">
... functions that update data-sort-value attributes dynamically ...
</pre>
<h1 class="mt-5">Example 2. Merged header cells</h1>
<table class="table table-sm table-striped table-bordered table-sortable text-center" style="table-layout: fixed;">
<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>
<tr>
<td>1</td>
<td>22</td>
<td>333</td>
</tr>
<tr>
<td>11</td>
<td>222</td>
<td>3</td>
</tr>
<tr>
<td>111</td>
<td>2</td>
<td>33</td>
</tr>
</tbody>
</table>
<h3>HTML</h3>
<pre class="alert alert-info">
<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)
</pre>
<h1 class="mt-5">Example 3. Big table</h1>
<p class="mb-5">
<a href="bigtable.html">bigtable.html</a>
</p>
<!-- <script src="tablesort.js?v=20230904"></script> -->
<script src="tablesort.min.js?v=20230904"></script>
<!-- <script>document.querySelector('.table-sortable').tsortable()</script> -->
<script>document.querySelectorAll('.table-sortable').forEach(el => el.tsortable())</script>
</body>
</html>