JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/jq-3.6.0/dt-1.13.4/datatables.min.js"></script>
<script src="https://debug.datatables.net/bookmarklet/DT_Debug.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.13.4/sorting/ip-address.js"></script>
<table id="sample" class="display">
  <thead>
    <tr>
      <th>id</th>
      <th>IP address</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>192.168.212.10</td>
    </tr>
    <tr>
      <td>12</td>
      <td>192.168.212.112</td><!-- when sort descending, this one should be the first but it is second. -->
    </tr>
    <tr>
      <td>9</td>
      <td>192.168.212.90</td>
    </tr>
  </tbody>
</table>

JavaScript

(function() {
  $('#sample').DataTable({
    columnDefs: [{
      type: 'ip-address',
      targets: 1,
    }]
  });

	let url = 'https://debug.datatables.net/bookmarklet/DT_Debug.js';
	if (typeof DT_Debug != 'undefined') {
        if (DT_Debug.instance !== null) {
            DT_Debug.close();
        } else {
            new DT_Debug();
        }
    } else {
        var n = document.createElement('script');
        n.setAttribute('language', 'JavaScript');
        n.setAttribute('src', url + '?rand=' + new Date().getTime());
        document.body.appendChild(n);
    }
})();