JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<table id="test">
<thead>
<tr><th>Lagerplats</th><th class="sort-alpha-num">Lagerplats</th><th>Värde</th></tr>
</thead>
<tbody>
<tr><td>B10</td><td>B10</td><td>1500</td></tr>
<tr><td>A2</td><td>A2</td><td>100</td></tr>
<tr><td>B1</td><td>B1</td><td>5000</td></tr>
<tr><td>A1</td><td>A1</td><td>1000</td></tr>
<tr><td>C1</td><td>C1</td><td>3000</td></tr>
<tr><td>A11</td><td>A11</td><td>1100</td></tr>
<tr><td>C10</td><td>C10</td><td>1000</td></tr>
<tr><td>B2</td><td>B2</td><td>400</td></tr>
<tr><td>A10</td><td>A10</td><td>500</td></tr>
<tr><td>A3</td><td>A3</td><td>30</td></tr>
<tr><td>Kopieringspapper A4</td><td>Kopieringspapper A4</td><td>2000</td></tr>
</tbody>
</table>
JavaScript
$.fn.dataTableExt.oSort['alpha-num-asc'] = function (a, b) {
var aa = a.match(/([a-z ]+)([0-9]+)/i) || ['',0];
var bb = b.match(/([a-z ]+)([0-9]+)/i) || ['',0];
if (aa[1] == bb[1]) {
return parseInt(aa[2], 10) - parseInt(bb[2], 10);
} else {
return aa[1] > bb[1];
}
};
$.fn.dataTableExt.oSort['alpha-num-desc'] = function (a, b) {
var aa = a.match(/([a-z ]+)([0-9]+)/i) || ['',0];
var bb = b.match(/([a-z ]+)([0-9]+)/i) || ['',0];
if (aa[1] == bb[1]) {
return parseInt(bb[2], 10) - parseInt(aa[2], 10);
} else {
return aa[1] < bb[1];
}
};
$('#test').DataTable({
aoColumnDefs: [{aTargets: ['sort-alpha-num'], sType: 'alpha-num'}],
sDom: 'ftlpr'
});