JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/select/1.2.2/js/dataTables.select.min.js"></script>
<button id="btn">Add a row</button>
<label id="lbl" style="margin-left:40px;"></label>
<hr />
<table id="UsersTable" class="table table-bordered table-stripped">
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>26403b9f-6117-4d32-95c0-f884696c8647</td>
      <td>jeff</td>
    </tr>
    <tr>
      <td>306b602b-4b65-4765-9c28-c92385835535</td>
      <td>jed</td>
    </tr>
    <tr>
      <td>3efccce9-222e-47eb-968b-edd7d40f973b</td>
      <td>org</td>
    </tr>
    <tr>
      <td>512569c7-dcc5-44c6-8fc5-7a44c893de95</td>
      <td>sth</td>
    </tr>
    <tr>
      <td>52cf0a58-d317-42df-be9a-78f2eb4a7740</td>
      <td>new</td>
    </tr>
    <tr>
      <td>5b1062c6-4996-422f-97f0-a96fb27f7f29</td>
      <td>ped</td>
    </tr>
    <tr>
      <td>5b8d1cb6-8709-4aa1-861d-09f448f27f79</td>
      <td>newman</td>
    </tr>
    <tr>
      <td>8be50c0f-e692-4b67-94bf-d0bf6edc6f16</td>
      <td>greg</td>
    </tr>
    <tr>
      <td>9bdc39a7-7571-43bd-a783-1bc36f0e08e7</td>
      <td>carl</td>
    </tr>
    <tr>
      <td>ba0e4ccc-78d9-4daf-8827-bc3b0d6a17f7</td>
      <td>jud</td>
    </tr>
    <tr>
      <td>e58e947d-5623-4cc7-bd20-24744ae110db</td>
      <td>med</td>
    </tr>
    <tr>
      <td>ee10eed4-a001-4d66-b7ec-890c56786aee</td>
      <td>geek</td>
    </tr>
    <tr>
      <td>eea8f02a-552b-4b94-aeee-9d2d9b42bb57</td>
      <td>sed</td>
    </tr>
  </tbody>
</table>

JavaScript

jQuery.fn.dataTable.Api.register('page.jumpToData()', function(data, column) {
  var pos = this.column(column, {
    order: 'current'
  }).data().indexOf(data);
  if (pos >= 0) {
    var page = Math.floor(pos / this.page.info().length);
    //alert("pos: " + pos);
    this.page(page).draw(false);
  }
  return this;
});

$(document).ready(function() {
  GetNumber.num = 0;
  var table = $('#UsersTable').DataTable({
    select: {
      style: 'single',
      info: false
    }
  });

  $('#btn').click(function() {
    var GUID = GenGuid();
    var name = 'name-' + GetNumber();

    var rowAdded = table.row.add([
      GUID,
      name
    ]).draw();

    table.$('tr.selected').removeClass('selected');
    rowAdded.nodes().to$().addClass('selected');
    table.page.jumpToData(GUID, 0);
    var info = table.page.info();

    $('#lbl').text('row ' + "\"" + name + "\"" + ' page(index): ' + info.page + ', row(index): ' + table.$('tr.selected').index());
  });

  $('#UsersTable tbody').on('click', 'tr', function() {
    table.$('tr.selected').removeClass('selected');
    $(this).addClass('selected');
  });

  function GenGuid() {
    var d = new Date().getTime();
    if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
      d += performance.now(); //use high-precision timer if available
    }
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });
  }

  function GetNumber() {
    return ++GetNumber.num;
  }
});