JSFiddle - React, Tailwind, and code Playground

HTML

<table class="raspisanie scrollableFixedHeaderTable" border="1" cellpadding="0" cellspacing="0" width="1120">
				<tbody><tr class="header">
					<th>Пн<br>02.03</th>
					<th>Вт<br>03.03</th>
					<th>Ср<br>04.03</th>
					<th>Чт<br>05.03</th>
					<th>Пт<br>06.03</th>
					<th>Сб<br>07.03</th>
					<th>Вс<br>08.03</th>
				</tr>
				<tr>
					<td class="data1425272400 1425619931 nedostupno" id="1425272400">08:00</td>
					<td class="data1425380400 1425619931 nedostupno" id="1425380400">14:00</td>
					<td class="data1425445200 1425619931 nedostupno" id="1425445200">08:00</td>
					<td class="data1425553200 1425619931 nedostupno" id="1425553200">14:00</td>
					<td class="data1425618000 1425619931 nedostupno" id="1425618000">08:00</td>
					<td class="data empty">&nbsp;</td>
					<td class="data empty">&nbsp;</td>
				</tr>
				<tr>
					<td class="data1425273000 1425619931 nedostupno" id="1425273000">08:10</td>
					<td class="data1425381000 1425619931 nedostupno" id="1425381000">14:10</td>
					<td class="data1425445800 1425619931 nedostupno" id="1425445800">08:10</td>
					<td class="data1425553800 1425619931 nedostupno" id="1425553800">14:10</td>
					<td class="data1425618600 1425619931 nedostupno" id="1425618600">08:10</td>
					<td class="data empty">&nbsp;</td>
					<td class="data empty">&nbsp;</td>
				</tr>
				<tr>
					<td class="data1425273600 1425619931 nedostupno" id="1425273600">08:20</td>
					<td class="data1425381600 1425619931 nedostupno" id="1425381600">14:20</td>
					<td class="data1425446400 1425619931 nedostupno" id="1425446400">08:20</td>
					<td class="data1425554400 1425619931 nedostupno" id="1425554400">14:20</td>
					<td class="data1425619200 1425619931 nedostupno" id="1425619200">08:20</td>
					<td class="data empty">&nbsp;</td>
					<td class="data empty">&nbsp;</td>
				</tr>
				<tr>
					<td class="data1425274200 1425619931 nedostupno" id="1425274200">08:30</td>
					<td class="data1425382200 1425619931 nedostupno"...

CSS

table td.nedostupno{
	background-color:#33e;
	cursor:default;
}

table td.zanyato{
	background-color:#e33;
	cursor:default;
}

table td.svobodno{
	background-color:#3e3;
	cursor:pointer;
}

table td.rezerv{
	background-color:#ee3;
	cursor:default;
}

JavaScript

jQuery.fn.tdData = function(td_class) {
	return $(this).each(function() {
			var cls = $(this).attr("class").split(/\s+/),
			sum = 0;
			for (var i = 0; i < cls.length; i++) sum += td_class[cls[i]] ? td_class[cls[i]] : 0;
				$(this).data({
					"cls": sum
				})
		})
};

function DownCell(table, td_class){
	var row = table.find("tr:gt(0)");
	if(!row.length) return false;
	var colcount = row[0].cells.length;
	$("td", row).tdData(td_class);
	for (var col = 0; col < colcount; col++) {
		var cell = row.find("td:nth-child(1)");
		var arr = $.makeArray(cell);
       
		arr.sort(function(a, b) {
			var res = $(a).data("cls") - $(b).data("cls");
            if (res==0){
                if ($(a).text() > $(b).text()) return 1;    
                if ($(a).text() < $(b).text()) return -1;    
                return 0;
            }
            else return res;
		});
		row.each(function(indx, element) {
			$(this).append(arr[indx])
		})
	}
	return false
}

DownCell($("table.raspisanie.scrollableFixedHeaderTable"), {"nedostupno" : 1, "zanyato" : 2, "rezerv" : 3, "empty" : 4});