JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.css">
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript"
            src="https://cdn.datatables.net/v/bs4/dt-1.10.18/r-2.2.2/datatables.min.js"></script>
      <table id="data-table" class="table table-striped table-bordered  text-center" style="width:100%;">
        <thead>
          <tr>
            <th>Type</th>
            <th>Date / Time</th>
            <th>Qty</th>
            <th>Voucher</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
            <th>&nbsp;</th>
          </tr>
        </tfoot>
        <tbody>
          <tr>
            <td>SHP</td>
            <td>11/01/18 <span class="text-nowrap">6:00 am</span></td>
            <td>5</td>
            <td>12345</td>
          </tr>
          <tr>
            <td>REC</td>
            <td>11/02/18 <span class="text-nowrap">7:00 am</span></td>
            <td>10</td>
            <td>54321</td>
          </tr>
        </tbody>
        </table>
        <input id="search1" type="button" value="Search 1">
        <input id="search2" type="button" value="Search 2">
        <input id="clear" type="button" value="Clear">

JavaScript

$(function() {
	let data_table = $('#data-table').DataTable();
  $('#search1').click(function() {
  	data_table.column(1).search('01|02', true, true).draw();
  });
  $('#search2').click(function() {
  	data_table.column(1).search('02').draw();
  });
  $('#clear').click(function() {
  	data_table.column(1).search('').draw();
  });
});