JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<table id="example" class="dataTable display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th class="rank">Rank</th>
                <th class="wider">User Inserted Title Name</th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
                <th class="rotate"><div>Fisrt Number Second Number</div></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td>1</td>
                <td>System Architect and Analyser</td>
                <td>1</td>
                <td>4</td>
                <td>6</td>
                <td>20</td>
                <td>5</td>
                <td>1</td>
                <td>4</td>
                <td>6</td>
                <td>20</td>
                <td>5</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Accountant</td>
                <td>4</td>
                <td>13</td>
                <td>7</td>
                <td>11</td>
                <td>8</td>
                <td>1</td>
                <td>4</td>
                <td>6</td>
                <td>20</td>
  ...

CSS

.dataTable th {
    word-wrap: break-word;
}
td, th {
    border: 1px solid #000;
}
th.rank {
    width: 20px !important;
}
th.wider {
    /*width: 120px !important;*/
}
th.rotate {
	height: 150px;
	padding: 0px;
	/*width: 20px !important;*/
	font-weight: normal;
	
}
th.rotate > div {
  	-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 	width: 150px;
	margin: 0 -58px 40px;
	text-align: left;
}

JavaScript

$('#example').dataTable( {
	"paging":   false,
	"info":     false,
	"filter":     false,
	"scrollX": true,
	
	"order": [[ 1, "desc" ]]
} );