JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
 <div class="box-body table-responsive"> 
          <table id="example1" class="display">
            <thead>
              <tr>
                <th>S.No</th>
                <th>Date</th>
                <th>EO Number</th>
                <th>Total Amount</th>
                 <th style="display:none;">ID[hidden column for sorting]</th>
              </tr>
            </thead>
            <tbody>
              
              <tr>
                <td></td>
                <td>3/2/2015</td>
                <td>56</td>
                <td>344</td>
                <td style="display:none;">3</td>
              </tr>
                
                <tr>
                <td></td>
                <td>5/2/2015</td>
                <td>98</td>
                <td>233</td>
                <td style="display:none;">1</td>
              </tr>
                
                <tr>
                <td></td>
                <td>4/2/2015</td>
                <td>23233</td>
                <td>567</td>
                <td style="display:none;">2</td>
              </tr>

            </tbody>
          </table>
        </div>

JavaScript

$(document).ready(function() {
$('#example1').dataTable({
  "aaSorting": [[ 4, "desc" ]],
        
       "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            //debugger;
            var index = iDisplayIndexFull + 1;
            $("td:first", nRow).html(index);
            return nRow;
        },
    });

} );