JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.22/filtering/type-based/diacritics-neutralise.js"></script>
<html>
<head>
</head>
<body>
  When there is an empty value somewhere in a particular column, the type detection logic for DataTables assumes 'html' as the type.<br /><br />
  
  <table id="people">
    <thead>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Bob</td>
        <td>Jónes</td>
      </tr>
      <tr>
        <td>Fred</td>
        <td>Smïth</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td></td> <!-- NOTE: empty value here causes the Last Name column to be treated as type 'html' (rather than 'string') -->
      </tr>
    </tbody>
  </table>
</body>
</html>

JavaScript

$(document).ready(function() {
	var peopleTable = $("table#people").DataTable();
  
    console.log('First column is correct type (string):');
    console.log('Column Name: ', peopleTable.settings()[0]['aoColumns'][0]['sTitle']);
  console.log('Column Detected Type: ', peopleTable.settings()[0]['aoColumns'][0]['sType']);
  
  console.log('Second column is wrong type (html) due to an empty value:');
  console.log('Column Name: ', peopleTable.settings()[0]['aoColumns'][1]['sTitle']);
  console.log('Column Detected Type: ', peopleTable.settings()[0]['aoColumns'][1]['sType']);
});