table sorting

contents.js

@@ -42,6 +42,8 @@ fetch(endpoint)
 function createTable(data) {
 	table = document.createElement("table");
 
+	table.appendChild(createHeaders());
+
 	// Traverse the rows collection as an array
 	[...data.rows].forEach((row, index) => {
 		// Avoid first row that contains column titles
@@ -54,30 +56,36 @@ function createTable(data) {
 			// Set the categories as classes for future filtering
 			categoryTags.forEach((tag) => tableRow.classList.add(tag));
 
+			// --- --- ---
 			// --- Beginning of the row
 			// Columns order could be modified simply by reordering the next 4 sections
 
 			// Create a cell with date
 			let date = document.createElement("td");
-			date.innerHTML = row.cells[4].innerText;
+			date.classList.add("date");
+			date.innerHTML = createDate(row.cells[4].innerText);
 			tableRow.appendChild(date);
 
 			// Create a cell with title + link to the pad
 			let title = document.createElement("td");
+			title.classList.add("title");
 			title.appendChild(createTitleLink(row));
 			tableRow.appendChild(title);
 
 			// Create a cell with categories
 			let categories = document.createElement("td");
+			categories.classList.add("categories");
 			categories.appendChild(createTags(categoryTags));
 			tableRow.appendChild(categories);
 
 			// Create a cell with the overview
 			let overview = document.createElement("td");
+			overview.classList.add("overview");
 			overview.innerHTML = row.cells[2].innerText;
 			tableRow.appendChild(overview);
 
 			// --- End of the row
+			// --- --- ---
 
 			// Insert the row in the table
 			table.appendChild(tableRow);
@@ -87,6 +95,24 @@ function createTable(data) {
 	container.appendChild(table);
 }
 
+function createHeaders() {
+	let firstRow = document.createElement("tr");
+	firstRow.classList.add("header");
+	let headers = ["Date", "Title", "Categories", "Overview"];
+
+	headers.forEach((header) => {
+		let th = document.createElement("th");
+		th.innerHTML = header;
+		// Add sorting callback for Date and Title
+		// Do we need to sort also the categories? im not sure!
+		if (header === "Date" || header === "Title")
+			th.addEventListener("click", () => sortTable(th));
+		firstRow.appendChild(th);
+	});
+
+	return firstRow;
+}
+
 function createTitleLink(row) {
 	// Take the first cell of the wiki (link)
 	let url = row.cells[0].innerText;
@@ -104,6 +130,18 @@ function createTitleLink(row) {
 	return link;
 }
 
+function createDate(string) {
+	let parsed = string.replaceAll("/", ".");
+
+	let date = new Date(string);
+	if (date) {
+		const options = { year: "numeric", month: "short", day: "numeric" };
+		parsed = date.toLocaleDateString("en-EN", options);
+	}
+
+	return parsed;
+}
+
 // Take a list of categories and create an unordered list with them
 // + store every category to the filters Set
 function createTags(categories) {
@@ -222,6 +260,34 @@ function allActiveCheck() {
 	}
 }
 
+// ---
+// Sorting table
+// kindly adapted from https://stackoverflow.com/questions/14267781/sorting-html-table-with-javascript
+// TODO: Sorting UI
+// ---
+
+const getCellValue = (tr, idx) => {
+	if (tr.children[idx].classList.contains("date")) return new Date(tr.children[idx].innerText);
+	else return tr.children[idx].innerText || tr.children[idx].textContent;
+};
+// wow this is really obscure wtf not happy with it at all
+const comparer = (idx, asc) => (a, b) =>
+	((v1, v2) =>
+		v1 !== "" && v2 !== "" && !isNaN(v1) && !isNaN(v2)
+			? v1 - v2
+			: v1.toString().localeCompare(v2))(
+		getCellValue(asc ? a : b, idx),
+		getCellValue(asc ? b : a, idx)
+	);
+
+// The function is added as callback in the createHeaders function
+const sortTable = (th) => {
+	const table = th.closest("table");
+	Array.from(table.querySelectorAll("tr:nth-child(n+2)"))
+		.sort(comparer(Array.from(th.parentNode.children).indexOf(th), (this.asc = !this.asc)))
+		.forEach((tr) => table.appendChild(tr));
+};
+
 // ---
 // Event Listener
 // ---
@@ -249,5 +315,4 @@ document.addEventListener("keydown", (event) => {
 			showSelectedRows();
 		}
 	}
-	// do something
 });

style.css

@@ -14,6 +14,8 @@ h1 {
 	text-align: center;
 }
 
+/* FILTERS */
+
 .tag {
 	background: none;
 	font-size: 20px;
@@ -47,6 +49,8 @@ ul {
 	padding: 0;
 }
 
+/* TABLE */
+
 tr {
 	display: none;
 }
@@ -58,3 +62,8 @@ tr.active {
 tr .tag {
 	cursor: default;
 }
+
+tr.header {
+	display: table-row;
+	text-align: left;
+}