JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/2.6.0/jquery.mockjax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<input type="text" id="inputName" placeholder="Enter your name">
<button type="button" class="btn btn-primary" id="btnModal">button</button>

<div class="modal fade" id="modalUserInfo" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">User List</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <table id="table" class="display" style="width: 100%;">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
            </tr>
          </thead>
        </table>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

html {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

JavaScript

$.mockjax({
  url: '/user/user.do',
  responseText: [{
      'id': 134132,
      'name': 'Tiger'
    },
    {
      'id': 243345,
      'name': 'Garrett'
    },
    {
      'id': 3123214,
      'name': 'Ashton'
    },
    {
      'id': 432234,
      'name': 'Cedric'
    }
  ],
  response: function(s) {
    this.responseText = this.responseText.filter((item) => {
      return item.name == s.data.name;
    })
  }
});


$('#btnModal').click(function() {
  if (!$('#inputName').val()) {
    alert('Enter your name.');
    $('#inputName').focus();
    return false;
  }

  $('#modalUserInfo').modal('show');

  if ($.fn.DataTable.isDataTable('#table')) {
    $('#table').DataTable().ajax.reload();

  } else {
    getUser();
  }
});

function getUser() {
  $('#table').DataTable({
    destroy: true,
    ajax: {
      url: '/user/user.do',
      dataSrc: '',
      data: function(d) {
        d.name = $('#inputName').val();
      }
    },
    columns: [{
        data: 'id'
      },
      {
        data: 'name'
      }
    ]
  });
}