JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.15/css/jquery.dataTables.min.css">
<table>
  <thead>
    <tr><th>Pieces</th></tr>
  </thead>
  <tbody>
    <tr><td>2 Pieces</td></tr>
    <tr><td>20 Pieces</td></tr>
    <tr><td>5 Pieces</td></tr>
  </tbody>
</table>

JavaScript

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
  "formatted-num-pre": function ( a ) {
    a = (a === "-" || a === "") ? 0 : a.replace( /[^\d\-\.]/g, "" );
    return parseFloat( a );
  },
  "formatted-num-asc": function ( a, b ) {
    return a - b;
  },
  "formatted-num-desc": function ( a, b ) {
    return b - a;
  }
} );

$('table').dataTable( {
  columnDefs: [
    { type: 'formatted-num', targets: 0 }
  ]
} );