JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.0/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.0/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/gh/eu81273/jsfiddle-console/console.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<html>

  <head>
    <title>Testing</title>
  </head>

  <body>
    <table id="datatable_editable" class="display nowrap" cellpadding="0" cellspacing="0">
      <thead>
        <tr>
          <th><input type="text" class="search-input" name="name" value="Maria" /></th>
          <th><input type="text" class="search-input" name="email" value="[email protected]" /></th>
        </tr>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Maria</td>
          <td>[email protected]</td>
        </tr>
        <tr>
          <td>Sophie</td>
          <td>[email protected]</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

JavaScript

var table = $('#datatable_editable').DataTable({
  "scrollY": "300px",
  dom: 'Bfrtip',
  "buttons": [{
    className: 'fa fa-search',
    action: function(e, dt, node, config) {
      var data = {};
      var i = 1;
      var n = 0;

      $('input.search-input').each(function() {
        n++;
        if ($(this).val()) {
          data[i] = {
            'searchColumn': $(this).attr('name'),
            'searchValue': $(this).val()
          };
          i++;
        }
      });
      console.log(n);
      console.log(data);

    },
  }]
});