JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<table>
    <thead>
        <tr>
            <td>Normal sort</td>
            <td>Inverted sort</td>
            <td>Broken inverted sort</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>

JavaScript

$.extend( jQuery.fn.dataTableExt.oSort, {
    "invert-asc": function ( a, b ) {
        return -((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "invert-desc": function ( a, b ) {
        return -((a < b) ? 1 : ((a > b) ? -1 : 0));
    },
    
    "broken-pre": function (a) {
        return a;  
    },
    "broken-asc": function ( a, b ) {
        return -((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
    "broken-desc": function ( a, b ) {
        return -((a < b) ? 1 : ((a > b) ? -1 : 0));
    }
});

$("table").DataTable({"aoColumnDefs": [{"sType": "invert", "aTargets": [1]}, {"sType": "broken", "aTargets": [1]}]});