Add table sorting.

index.html

@@ -49,7 +49,7 @@ <h2 class="pt-3">Dependency Pulse</h2>
           <p class="fw-light">pulse representing "pulse check", an indication of a dependency's activity; the time since the release of the latest available version of a dependency (including pre-release). Measured in "libyears".</p>
           <canvas id="pulseChart"></canvas>
           <h2 class="pt-3">Last run result</h2>
-          <table class="table table-striped">
+          <table id="rawResult" class="table table-striped">
             <thead>
               <tr>
                 <th scope="col">Dependency</th>

package.json

@@ -21,6 +21,7 @@
     "bootstrap": "^5.3.0",
     "chai": "^4.3.7",
     "chart.js": "^4.3.0",
+    "datatables.net-bs": "^1.13.5",
     "mocha": "^10.2.0",
     "parcel": "^2.9.3",
     "sinon": "^15.1.2"

src/web.js

@@ -1,10 +1,13 @@
 import Chart from 'chart.js/auto';
+import DataTable from 'datatables.net-bs';
+import 'datatables.net-bs/css/dataTables.bootstrap.css'
 import { parseFile, replaceRepositoryWithSafeChar } from './utils.mjs';
 
 const PATH = process.env.REPOSITORY_URL || `https://raw.githubusercontent.com/1024pix/dependency-drift-tracker/main`;
 
 let driftChart;
 let pulseChart;
+let table;
 const historyFiles = {};
 
 function formatFloat(number) {
@@ -128,6 +131,7 @@ async function displayChart(line) {
 }
 
 async function displayLastRun(line) {
+  if (table) table.destroy();
   const response = await fetch(`${PATH}/data/last-run-${replaceRepositoryWithSafeChar(line)}.json`);
   const data = await response.json();
 
@@ -145,6 +149,12 @@ async function displayLastRun(line) {
     createTd(tr, formatFloat(d.pulse));
     tbody.appendChild(tr);
   });
+
+  table = new DataTable('#rawResult', {
+    paging: false,
+    searching: false,
+    info: false,
+  });
 }
 
 function selectButton({ repository, path }) {