JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  
  <head>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
 
 <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 
  </head>
  
  <body>
    <table id="main">
      
      <thead class="tb_cabecalho">
        <th>DT-COMPRA</th>
        <th>QTDE</th>
      </thead>

      <tbody>                    
        <tr>
          <td>02/10/2016</td>
          <td>100</td>
        </tr>
        <tr>
          <td>28/08/2016</td>
          <td>100</td>
        </tr>
         <tr>
          <td>02/08/2015</td>
          <td>100</td>
        </tr>
         <tr>
          <td>02/01/2017</td>
          <td>100</td>
        </tr>
      </tbody>
    </table>

</body>
  
  
</html>

JavaScript

$.extend($.fn.dataTableExt.oSort, {
        "date-br-pre": function(a) {
        if (a == null || a == "") {
        return 0;
        }
        var brDatea = a.split('/');
        return (brDatea[2] + brDatea[1] + brDatea[0]) * 1;
    },
 
    "date-br-asc": function(a, b) {
        return ((a < b) ? -1 : ((a > b) ? 1 : 0));
    },
 
    "date-br-desc": function(a, b) {
            return ((a < b) ? 1 : ((a > b) ? -1 : 0));
        }
    });

$(document).ready(function() {
        $('#main').dataTable(                           
            {
            	lengthMenu: [[100, -1], [100, "Todos"]]
        		},
            {
                columnDefs: [{
                type: 'date-br',
                targets: 0
                }]
            }            
        );
    });