Skip to content

Instantly share code, notes, and snippets.

@wfng92
Last active March 4, 2023 12:15
Show Gist options
  • Save wfng92/ad6af87204da8e36647a365ca90d5af8 to your computer and use it in GitHub Desktop.
Save wfng92/ad6af87204da8e36647a365ca90d5af8 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<title>Example App</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<div>
<h2>Product Table</h2>
<p>Key in your input to filter the table:</p>
<input type="text" id="myinput" placeholder="Search..." title="Type in something">
<p>Click on the header of a column to sort the table:</p>
<table>
<thead><tr>
<th><span id="name" class="w3-button table-column">Name <i class="caret"></i></span></th>
<th><span id="quantity" class="w3-button table-column">Quantity <i class="caret"></i></span></th>
<th><span id="price" class="w3-button table-column">Price <i class="caret"></i></span></th>
<th><span id="expiry" class="w3-button table-column">Expiry Date <i class="caret"></i></span></th>
</tr></thead>
<tbody id="mytable"></tbody>
</table>
</div>
<script>
var table = document.getElementById('mytable');
var input = document.getElementById('myinput');
var tableData = [{name: 'Onion', quantity: 29, price: 1.2, expiry: '2021-09-12'}, {name: 'Apple', quantity: 55, price: 3.3, expiry: '2021-09-22'}, {name: 'Potato', quantity: 25, price: 2.5, expiry: '2021-09-18'}, {name: 'Carrot', quantity: 8, price: 0.8, expiry: '2021-09-25'}];
var caretUpClassName = 'fa fa-caret-up';
var caretDownClassName = 'fa fa-caret-down';
const sort_by = (field, reverse, primer) => {
const key = primer ?
function(x) {
return primer(x[field]);
} :
function(x) {
return x[field];
};
reverse = !reverse ? 1 : -1;
return function(a, b) {
return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
};
};
function clearArrow() {
let carets = document.getElementsByClassName('caret');
for (let caret of carets) {
caret.className = "caret";
}
}
function toggleArrow(event) {
let element = event.target;
let caret, field, reverse;
if (element.tagName === 'SPAN') {
caret = element.getElementsByClassName('caret')[0];
field = element.id
}
else {
caret = element;
field = element.parentElement.id
}
let iconClassName = caret.className;
clearArrow();
if (iconClassName.includes(caretUpClassName)) {
caret.className = `caret ${caretDownClassName}`;
reverse = false;
} else {
reverse = true;
caret.className = `caret ${caretUpClassName}`;
}
tableData.sort(sort_by(field, reverse));
populateTable();
}
function populateTable() {
table.innerHTML = '';
for (let data of tableData) {
let row = table.insertRow(-1);
let name = row.insertCell(0);
name.innerHTML = data.name;
let quantity = row.insertCell(1);
quantity.innerHTML = data.quantity;
let price = row.insertCell(2);
price.innerHTML = data.price;
let expiry = row.insertCell(3);
expiry.innerHTML = data.expiry;
}
filterTable();
}
function filterTable() {
let filter = input.value.toUpperCase();
rows = table.getElementsByTagName("TR");
let flag = false;
for (let row of rows) {
let cells = row.getElementsByTagName("TD");
for (let cell of cells) {
if (cell.textContent.toUpperCase().indexOf(filter) > -1) {
if (filter) {
cell.style.backgroundColor = 'yellow';
} else {
cell.style.backgroundColor = '';
}
flag = true;
} else {
cell.style.backgroundColor = '';
}
}
if (flag) {
row.style.display = "";
} else {
row.style.display = "none";
}
flag = false;
}
}
populateTable();
let tableColumns = document.getElementsByClassName('table-column');
for (let column of tableColumns) {
column.addEventListener('click', function(event) {
toggleArrow(event);
});
}
input.addEventListener('keyup', function(event) {
filterTable();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment