Sorting Table - JS

Developer
Nick Hehr
Size
4,809 Kb
Views
26,312
  1. Sorting Table - JS Previews
  2. Sorting Table - JS HTML Codes
  3. Sorting Table - JS CSS Codes
  4. Sorting Table - JS JS Codes

How do I make an sorting table - js?

I've been doing so much React lately, I wanted to see if I could make a plain JavaScript interaction. I've built something similar in React that I will bring into another pen so people can compare the two. . What is a sorting table - js? How do you make a sorting table - js? This script and codes were developed by Nick Hehr on 15 August 2022, Monday.

Sorting Table - JS Previews
IQ Test

Sorting Table - JS - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sorting Table - JS</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h2>A Sorting Table with JavaScript</h3>
<table class="sorting-table" id="sortMe"> <thead> <tr> <th data-sortKey="name">First Name</th> <th>Last Name</th> <th data-sortKey="bday">Birthday</th> </tr> </thead> <tbody> <tr> <td data-name="sam">Sam</td> <td>Watson</td> <td data-bday="692254800000">12/09/1991</td> </tr> <tr> <td data-name="annie">Annie</td> <td>Perkins</td> <td data-bday="-6106046400000">07/04/1776</td> </tr> <tr> <td data-name="louie">Louie</td> <td>Eldridge</td> <td data-bday="972878400000">10/30/2000</td> </tr> </tbody>
</table>
<button id="destroy">Destroy Sortable</button> <script src="js/index.js"></script>
</body>
</html>

Sorting Table - JS - Script Codes CSS Codes

body { padding: 2rem; text-align: center;
}
.sorting-table { margin: 0 auto 2rem;
}
.sorting-table td, .sorting-table th { text-align: left;
}
.sorting-table th { padding: 0.5rem 1rem;
}
.sorting-table th[data-sortKey] { cursor: pointer; text-decoration: underline;
}
.sorting-table th svg { margin-left: 0.25rem; position: relative; top: 3px;
}
.sorting-table td { padding: 0.25rem 1rem;
}

Sorting Table - JS - Script Codes JS Codes

'use strict';
var sortMe = document.getElementById('sortMe');
var destroyerButton = document.getElementById('destroy');
var table = sorta(sortMe);
destroyerButton.addEventListener('click', table.destroy);
function sorta(table) { var tableChildren = [].slice.call(table.children); var thead = tableChildren[0]; var tbody = tableChildren[1]; var arrowsPath = 'M16 17q0 0.406-0.297 0.703l-7 7q-0.297 0.297-0.703 0.297t-0.703-0.297l-7-7q-0.297-0.297-0.297-0.703t0.297-0.703 0.703-0.297h14q0.406 0 0.703 0.297t0.297 0.703zM16 11q0 0.406-0.297 0.703t-0.703 0.297h-14q-0.406 0-0.703-0.297t-0.297-0.703 0.297-0.703l7-7q0.297-0.297 0.703-0.297t0.703 0.297l7 7q0.297 0.297 0.297 0.703z'; var arrowUp = 'M16 11q0 0.406-0.297 0.703t-0.703 0.297h-14q-0.406 0-0.703-0.297t-0.297-0.703 0.297-0.703l7-7q0.297-0.297 0.703-0.297t0.703 0.297l7 7q0.297 0.297 0.297 0.703z'; var arrowDown = 'M16 17q0 0.406-0.297 0.703l-7 7q-0.297 0.297-0.703 0.297t-0.703-0.297l-7-7q-0.297-0.297-0.297-0.703t0.297-0.703 0.703-0.297h14q0.406 0 0.703 0.297t0.297 0.703z'; var headers = [].slice.call(thead.querySelectorAll('th')).map(function (th) { return { el: th, key: th.getAttribute('data-sortKey'), order: 'asc' }; }).filter(function (_ref) { var key = _ref.key; return !!key; }); var rows = [].slice.call(tbody.querySelectorAll('tr')).map(function (tr) { return { el: tr }; }); headers.forEach(function (header) { var el = header.el; el.addEventListener('click', sortRows); header.arrows = el.appendChild(createArrows()); }); function sortRows(_ref2) { var target = _ref2.target; var sortKey = target.getAttribute('data-sortKey'); var header = headers.filter(function (th) { var key = th.key; var matchesKey = key === sortKey; if (matchesKey) { return matchesKey; } else { th.order = 'asc'; th.arrows.children.item(0).setAttribute('d', arrowsPath); return matchesKey; } })[0]; var order = header.order; rows.sort(function (row1, row2) { var value1 = getData(row1, sortKey); var value2 = getData(row2, sortKey); if (Number.isNaN(Number(value1))) { return value1.localeCompare(value2); } else { return Number(value1) - Number(value2); } }); if (order === 'desc') { rows.reverse(); header.arrows.children.item(0).setAttribute('d', arrowDown); } else { header.arrows.children.item(0).setAttribute('d', arrowUp); } header.order = order === 'desc' ? 'asc' : 'desc'; rows.forEach(function (_ref3) { var el = _ref3.el; tbody.appendChild(el); }); } function getData(row, key) { var value = row[key]; var el = row.el; if (!value) { [].slice.call(el.children).forEach(function (child) { var data = child.getAttribute('data-' + key); if (!!data) { row[key] = data; value = data; } }); } return value; } function createArrows() { var svgNS = "http://www.w3.org/2000/svg"; var svg = document.createElementNS(svgNS, 'svg'); var path = document.createElementNS(svgNS, 'path'); svg.setAttribute('viewBox', '0 0 16 28'); svg.setAttribute('width', '10'); svg.setAttribute('height', '16'); path.setAttribute('d', arrowsPath); svg.appendChild(path); return svg; } return { destroy: function destroy() { headers.forEach(function (_ref4) { var el = _ref4.el; var arrows = _ref4.arrows; el.removeEventListener('click', sortRows); el.removeChild(arrows); }); } };
}
Sorting Table - JS - Script Codes
Sorting Table - JS - Script Codes
Home Page Home
Developer Nick Hehr
Username HipsterBrown
Uploaded August 15, 2022
Rating 3
Size 4,809 Kb
Views 26,312
Do you need developer help for Sorting Table - JS?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Hehr (HipsterBrown) Script Codes
Name
Sassy CodePen Icon
Triangular Pattern Background
Cubical Pattern Background
SVG Basics
Lettering Pure JS
Open Letter to YouTube
The CodePen Quiz
Hexagonal Icon Backgrounds in CSS
Responsive Icons in CSS
Welcome to Mavericks
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!