JSFiddle - React, Tailwind, and code Playground

by podgorniy

HTML

<table class="sortable">
	<tr>
		<th>Обасть</th>
		<th>Людей</th>
	</tr>
	<tr>
		<td>Донецкая</td>
		<td>1293125</td>
	</tr>
	<tr>
		<td>Ченобыльская</td>
		<td>9745522</td>
	</tr>
	<tr>
		<td>Одесская</td>
		<td>5145642</td>
	</tr>
	<tr>
		<td>Харьковская</td>
		<td>98е343</td>
	</tr>
	<tr>
		<td>Луганская</td>
		<td>8973253</td>
	</tr>
</table>

CSS

th {
    cursor: pointer;
}

JavaScript

(function () {
	'use strict';

	var forEach;
	var filter;
	var sort;

	forEach = Array.prototype.forEach;
	filter = Array.prototype.filter;
	sort = Array.prototype.sort;

	function initSortForTables() {
		var tables;

		tables = document.querySelectorAll('.sortable');
		forEach.call(tables, function (table) {
			makeSortable(table);
		});
	}

	function makeSortable (table) {
		var headers;

		headers = table.querySelectorAll('th');
		forEach.call(headers, function (header, headerIndex) {
			header.addEventListener('click', function () {
				sortRowsByColumn(table, headerIndex);
			}, false);
		});
	}

	function sortRowsByColumn(table, columnIndex) {
		var sortedRows;
		var rowsToSort;

		rowsToSort = getValuableRows(table);

		sortedRows = sort.call(rowsToSort, function (row1, row2) {
			var val1;
			var val2;
			var val1Int;
			var val2Int;

			val1 = row1.querySelectorAll('td')[columnIndex].innerHTML;
			val2 = row2.querySelectorAll('td')[columnIndex].innerHTML;

			// try to deal with vals as with numbers
			val1Int = parseInt(val1, 10);
			val2Int = parseInt(val2, 10);


			if (!isNaN(val1Int) && !isNaN(val2Int)) {
				// work with numbers
				return val2Int - val1Int;
			} else {
				// work with strings
				return val1 > val2 ? 1 : -1;
			}
		});

		forEach.call(sortedRows, function (row) {
			table.appendChild(row);
		});
	}

	function getValuableRows (table) {
		return filter.call(table.querySelectorAll('tr'), function (row) {
			return row.querySelectorAll('th').length === 0;
		});
	}

	// Init sortable tables on 
	document.addEventListener('DOMContentLoaded', initSortForTables, false);
}());