JSFiddle - React, Tailwind, and code Playground

HTML

<input 
  type="text" 
  id="myInput" 
  onkeyup="myFunction()" 
  placeholder="Search for names or countries.." 
  title="Type in a name or a country">

<table>
<tr>
<td> 12/20/19</td>
<td> 01:39  </td>
<td> Rens: Wat </td>
<td> </td>
</tr>
<tr>
<td> 12/20/20</td>
<td> 01:40  </td>
<td> Rocco Haagenhuizen: In de chat </td>
<td> </td>
</tr>
<tr>
<td> 12/19/21</td>
<td> 01:40  </td>
<td> Rens: Wacht </td>
<td> </td>
</tr>
<tr>
<td> 12/20/21</td>
<td> 01:40  </td>
<td> Rocco Haagenhuizen: Ga naar je chats </td>
<td> </td>
</tr>
</table>

CSS

body {
  padding: 20px;
}

input {
  margin-bottom: 5px;
  padding: 2px 3px;
  width: 209px;
}

td {
  padding: 4px;
  border: 1px #CCC solid;
  width: 100px;
}

JavaScript

const myFunction = () => {
  const trs = document.querySelectorAll('Table tr')
  const filter = document.querySelector('#myInput').value
  const regex = new RegExp(filter, 'i')
  const isFoundInTds = td => regex.test(td.innerHTML)
  const isFound = childrenArr => childrenArr.some(isFoundInTds)
  const setTrStyleDisplay = ({ style, children }) => {
    style.display = isFound([
      ...children // <-- All columns
    ]) ? '' : 'none' 
  }
  
  trs.forEach(setTrStyleDisplay)
}