JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.20/sc-2.0.1/datatables.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.20/sc-2.0.1/datatables.js"></script>
<head>
  <script type="text/javascript">
  $(document).ready(function() {
    fillTable();
  } );
      var g_table;

    function fillTable() {
        var data = [];
        for ( var i=0; i< 500; i++ ) {
          var num_as_text = String(i);
          while (num_as_text.length < 3) {
            num_as_text = "0" + num_as_text;
          }
            data.push( [
              num_as_text + "A",
              num_as_text + "B",
              num_as_text + "C",
              num_as_text + "D",
              num_as_text + "E"
            ] );
        }

        if (g_table) {
          g_table.destroy();
        }

        g_table = $('#example').DataTable( {
            data:           data,
            deferRender:    true,
            scrollY:        200,
            scrollCollapse: true,
            scroller:       true
        } );
        console.log("Reseted DT");
    }

    function generateErrorViaBug() {
      $('#example').dataTable().fnUpdate(['XXX', 'XXX', 'XXX', 'XXX', 'XXX'], 100, undefined, false, false);
    }

    function avoidError() {
      for (var i = 0; i < 5; ++i) {
        $('#example').dataTable().fnUpdate('XXX', 100, i, false, false);
      }
    }
  </script>
</head>
<body>
  <div id="bob">
    <button onclick="fillTable();">Reset</button>
      <button onclick="generateErrorViaBug();">SetLine100ToXXX</button>
        <button onclick="avoidError();">SetLine100ToXXXButAvoidError</button>
    <table id="example" class="display nowrap" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>First name</th>
          <th>Last name</th>
          <th>ZIP / Post code</th>
          <th>Country</th>
        </tr>
      </thead>
    </table>
  </div>
</body>