JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<input type="text" id="search">
</div>
<table class="table-highlight" id="dados">
<thead>
<tr>
<th data-field="id">Item</th>
<th data-field="numero">Número de Rastreamento</th>
<th data-field="data">Enviado em</th>
<th data-field="status">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Pacote 01</td>
<td><a class="waves-effect waves-light btn" href="#modal1">BR021WMR000016437462</a></td>
<td>20/01/2017</td>
<td><span>Em trânsito</span></td>
</tr>
<tr>
<td>Pacote 02</td>
<td><a class="waves-effect waves-light btn" href="#modal1">SP021WMR000016437462</a></td>
<td>15/01/2017</td>
<td><span>Entregue</span></td>
</tr>
<tr>
<td>Pacote 03</td>
<td><a class="waves-effect waves-light btn" href="#modal1">CR021WMR000016437462</a></td>
<td>20/01/2017</td>
<td><span>Cancelado</span></td>
</tr>
</tbody>
</table>
CSS
tr {
display: block;
}
JavaScript
document.getElementById('search').addEventListener('keyup', pesquisaTabela());
function pesquisaTabela() {
var filter, table, tr, td, i;
table = document.getElementById("dados");
return function() {
tr = table.querySelectorAll("tbody tr");
filter = this.value.toUpperCase();
for (i = 0; i < tr.length; i++) {
var match = tr[i].innerHTML.toUpperCase().indexOf(filter) > -1;
tr[i].style.display = match ? "block" : "none";
}
}
}