<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="favicon.png">
<title></title>
<meta name="description" content="" />
<link href="style.css" rel="stylesheet" type="text/css" />
<style>
</style>
</head>
<body>
<div id="table">
</div>
<script src="https://unpkg.com/[email protected]"></script>
<script src="script.js"></script>
</body>
</html>
var template = `<table>
<thead>
{{#head}}
<tr>{{#.}}<th onclick="sortByColumn(this);">{{.}}</th>{{/.}}</tr>
{{/head}}
</thead>
<tbody>
{{#body}}
<tr>{{#.}}<td>{{.}}</td>{{/.}}</tr>
{{/body}}
</tbody>
</table>`;
var input = "37+14*561-12.4/x";
var arr = [];
arr.push("");
for (var i=0; i<input.length;i++){
if (input[i] == "+" || input[i] == "*" || input[i] == "-" || input[i] == "/"){
arr.push(input[i]);
arr.push("");
}
else {
arr[arr.length-1] += input[i];
}
}
var table = { head: [[1,2,3,4]], body: [['a',3,2,4],['b',2,3,4],['c',5,1,5]] };
var lastSort = [-1,-1];
sortTable(0,1);
function sortTable(col,rev=1){
table.body.sort((a,b) => {
if (a[col] > b[col]){
return 1*rev;
}
else if (a[col] < b[col]) {
return -1*rev;
}
return 0;
})
var rendered = Mustache.render(template, table);
document.getElementById('table').innerHTML = rendered;
var i=0;
document.querySelectorAll('#table th').forEach((el) => {
el.setAttribute('data-col',i);
i++;
})
lastSort = [col,rev];
}
function sortByColumn(el){
var col = parseInt(el.getAttribute('data-col'));
var rev = 1;
if (col == lastSort[0]){
rev = lastSort[1] * -1;
}
sortTable(col,rev);
}
#table {
}
#table th {
cursor: pointer;
}
About
This repl provides a simple way to sort tables.
To view this on TripleLog, click here.
HTML
The HTML simply displays the table.
CSS
Style the table by editing the CSS.
JavaScript
The mustache.js templating system is used to generate simple tables. Edit the sort function to change the way the table is sorted.
TripleLog