Coding simple html table sorter

This is a small code to serve as an example of how to sort rows in an html table by a given column. The code is not intended to suit every situation, but only to provide the basis for this type of sorting. This code was created during the shooting of the YouTube video, so it has not been tested for production purposes. Click on table header of your choice to sort the table.

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Table Sorter</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
	</head>
	<body>

		<table class="sortable">
			<thead>
				<tr>
					<th>ID</th>
					<th>Name</th>
					<th>City</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>2</td>
					<td>Sofia</td>
					<td>San Diego</td>
				</tr>
				<tr>
					<td>1</td>
					<td>John</td>
					<td>Boston</td>
				</tr>
				<tr>
					<td>3</td>
					<td>Maria</td>
					<td>Bon</td>
				</tr>
				<tr>
					<td>23</td>
					<td>Test</td>
					<td>Test</td>
				</tr>
			</tbody>
		</table>
		
		<style>
		
			table
			{
				width:400px;
				margin:50px auto;
				border-collapse:collapse;
			}
			
			table,
			table th,
			table td
			{
				padding:5px 0;
				text-align:center;
				border:1px solid #000;
			}
			
			table.sortable thead th
			{
				cursor:pointer;
				user-select:none;
			}
		
		</style>
		
		<script>
		
			function table_sorter(table)
			{
				let head = table.getElementsByTagName('thead');
				if(head.length != 1) return;
				head = head[0];
				
				let body = table.getElementsByTagName('tbody');
				if(body.length != 1) return;
				body = body[0];
				
				for(let i = 0; i < head.rows[0].cells.length; i++)
				{
					head.rows[0].cells[i].addEventListener('click', function()
					{
						table_sort(body, i);
					});
				}
			}
			
			function table_sort(table, column, direction = 'asc', reverse = true)
			{
				let sorting = true;
				let reorder = false;
				let rows = table.rows;
				
				while(sorting)
				{
					sorting = false;
				
					for(let i = 0; i < rows.length - 1; i++)
					{
						let a = rows[i].cells[column].innerHTML;
						let b = rows[i + 1].cells[column].innerHTML;
						a = isNaN(a) ? a.toLowerCase() : Number(a);
						b = isNaN(b) ? b.toLowerCase() : Number(b);

						if((direction == 'asc' && a > b) || (direction == 'desc' && a < b))
						{
							rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
							sorting = true; reorder = true;
						}
					}
				}
				
				if(!reorder && reverse) table_sort(table, column, direction == 'asc' ? 'desc' : 'asc', false);
			}
			
			Array.prototype.map.call(document.getElementsByClassName('sortable'), function(table)
			{
				table_sorter(table);
			});
		
		</script>

	</body>
</html>

Feb 6, 2022