JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table id="dataTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>B</th>
      <th>C</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td data-order="0">Z_First</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td data-order="1">A_Second</td>
      <td>4</td>
    </tr>
  </tbody>
</table>

JavaScript

$(document).ready( function () {
    var table = $('#dataTable').DataTable();
    
    table.clear();
    table.row.add({"0": "John", "1":{"display":"Z_First2", "@data-order":"0"}, "2": "3"})
    table.row.add({"0": "Doe", "1":{"display":"A_Second1", "@data-order":"1"}, "2": "4"})
    table.draw();
} );