JSFiddle - React, Tailwind, and code Playground

by 719media

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/jquery.dataTables.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.1/css/colReorder.dataTables.min.css" />

<script src="
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.3.1/js/dataTables.colReorder.min.js"></script>

<div>
  See line 9 in the javascript, where a sort is done on column 0 index, which should be the original index of "name" as the option {'order': 'index'} is being used. This instead sorts on "Age", which is incorrect.
</div>
<div>
  <table id="data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ben</td>
        <td>21</td>
      </tr>
      <tr>
        <td>Steve</td>
        <td>22</td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript

$('#data-table').DataTable({
  dom: 'frtipR'
});

$('#data-table').DataTable().columns([0], {
  'order': 'index'
}).order('desc').draw();

$('#data-table').DataTable().colReorder.order([1, 0], true);
//this should still be sorting the original "name" column, but it does not
$('#data-table').DataTable().columns([0], {
  'order': 'index'
}).order('desc').draw();