JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.1/js/jquery.dataTables.min.js"></script>
<!DOCTYPE html>
<table id="work_report" class="table">
<thead>
<tr>
	<th class="area">
		 Area
	</th>
	<th class="area">
		 Work_1
	</th>
	<th class="area">
		 Work_2
	</th>
</tr>
</thead>
<tbody>
    
<tr class="group_folder" data-tt-id="Ukraine" data-tt-parent-id="">
	<td class="depth-0 group_folder">
		 Counrty_1
	</td>
	<td class="area">
		 47399
	</td>
	<td class="area">
		 157395
	</td>
</tr>
    
<tr class="group_folder" data-tt-id="Kharkov" data-tt-parent-id="Ukraine">
	<td class="depth-1 group_folder">
		 City_1
	</td>
	<td class="area">
		 32598
	</td>
	<td class="area">
		 122067
	</td>
</tr>
<tr class="group_folder" data-tt-id="Kharkov East" data-tt-parent-id="Kharkov">
	<td class="depth-2 group_folder">
		 Сity_1_district
	</td>
	<td class="area">
		 16782
	</td>
	<td class="area">
		 70761
	</td>
</tr>
<tr class="group_folder" data-tt-id="V1" data-tt-parent-id="Kharkov East">
	<td class="depth-3 group_folder">
		 V1
	</td>
	<td class="area">
		 7248
	</td>
	<td class="area">
		 34647
	</td>
</tr>
<tr class="field_group" data-tt-id="Oktjabrskoe" data-tt-parent-id="V1">
	<td class="depth-4 field_group">
		 Area
	</td>
	<td class="area">
		 2707
	</td>
	<td class="area">
		 12750
	</td>
</tr>
<tr class="crop_row" data-tt-id="4" data-tt-parent-id="Oktjabrskoe">
	<td class="depth-5">
		 Value_1
	</td>
	<td class="area">
		 1131
	</td>
	<td class="area">
		 4762
	</td>
</tr>
<tr class="crop_row" data-tt-id="4" data-tt-parent-id="Oktjabrskoe">
	<td class="depth-5">
		 Value_2
	</td>
	<td class="area">
		 303
	</td>
	<td class="area">
		 918
	</td>
</tr>
<tr class="crop_row" data-tt-id="4" data-tt-parent-id="Oktjabrskoe">
	<td class="depth-5">
		 Value_3
	</td>
	<td class="area">
		 517
	</td>
	<td class="area">
		 2398
	</td>
</tr>
<tr class="crop_row" data-tt-id="4" data-tt-parent-id="Oktjabrskoe">
	<td class="depth-5">
		 Value_4
	</td>
	<td...

CSS

.action_subtype_header{
  -webkit-transform: rotate(-65deg);
  -moz-transform: rotate(-65deg);
  -ms-transform: rotate(-65deg);
  -o-transform: rotate(-65deg);
  transform: rotate(-65deg);
  margin-bottom: 16px;
  font-weight: normal;
}

th.area{
  width: 56px;
  height: 110px;
  vertical-align: bottom !important;
  border-top: 0px;
}

td{
  border: solid 1px #eee;
}

td.area{
  text-align: right;
}

tr.crop_row td{
  font-size: 12px;
  color: #777;
}

tr.group_folder td{
  font-size: 16px;
  font-weight: bold;
}

tr.group_folder td.area{
  font-size: 13px;
  font-weight: bold;
}

tr.field_group td{
  font-size: 14px;
}

tr.field_group td.area{
  font-size: 13px;
}

td.depth-1{
  padding-left: 10px !important;
}

td.depth-1{
  padding-left: 20px !important;
}

td.depth-2{
  padding-left: 30px !important;
}

td.depth-3{
  padding-left: 40px !important;
}

td.depth-4{
  padding-left: 50px !important;
}

td.depth-5{
  padding-left: 60px !important;
}

td.depth-6{
  padding-left: 70px !important;
}

.page_content_wrapper{
  padding-left: 40px;
  padding-right: 40px;
  padding-top: 12px;
}

JavaScript

$(function() {
    $("#work_report").DataTable({
        "language": {
        "search": "Find"
        },
        "ordering": false,
        "paging": false,
        "info": false
    });
});