JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>

  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>


    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>



    <meta charset=utf-8 />
  </head>

  <body>
    <div class="container">
      <table class="table display" id="example">
        <thead>


          <tr>
            <th>
              Category
            </th>
            <th>
              Name
            </th>
            <th>
              Quantity
            </th>
            <th>
              Price
            </th>
            <th>
              Total
            </th>
          </tr>

          <tr class="cus-footer">
            <th></th>
            <th class="text-input"></th>
            <th class="text-input"></th>
            <th class="text-input"></th>
            <th class="text-input"></th>
          </tr>
        </thead>



        <tbody>
          <tr class="odd" id="row_1" role="row">
            <td class="sorting_1">B</td>
            <td>P1</td>
            <td class=" sum">42</td>
            <td class=" sum">1</td>
            <td class=" sum">42</td>
          </tr>
          <tr class="even" id="row_2" role="row">
            <td class="sorting_1">A</td>
            <td>P2</td>
            <td class=" sum">1</td>
            <td class=" sum">2</td>
            <td class=" sum">2</td>
          </tr>
          <tr class="odd" id="row_3" role="row">
            <td class="sorting_1">A</td>
            <td>P3</td>
            <td class=" sum">1</td>
            <td class=" sum">3</td>
            <td class=" sum">3</td>
          </tr>
          <tr class="even" id="row_4" role="row">
            <td class="sorting_1">A</td>
            <td>P4</td>
            <td class=" sum">1</td>
            <td class=" sum">4</td>
            <td class=" sum">4</td>
         ...

JavaScript

$(document).ready(function() {
   var table = $('#example').DataTable({
     lengthMenu: [
       [10, 50, 100, 500, -1],
       [10, 50, 100, 500, "All"]
     ],
     dom: 'lBfrtip',
     colReorder: true,
     stateSave: true,
     ordering: false,
     "searching": true,
   });

   // Setup - add a text input to each footer cell

   $('#example tr.cus-footer th.text-input').each(function() {
     var title = $(this).text();
     $(this).html('<input type="text" placeholder="' + title + '" />');
   });

   // DataTable
   var table = $('#example').DataTable();

   // Apply the search
   $('#example .text-input').on('keyup', "input", function() {
     console.log(this.value, $(this).parent().index())
     table
       .column($(this).parent().index())
       .search(this.value)
       .draw();
   });


   table.column(0).every(function() {

     var column = this;
     var select = $('<select id="xxx"><option value=""></option></select>')
       .appendTo($(column.header()).empty())
       .on('change', function() {
         var val = $.fn.dataTable.util.escapeRegex(
           $(this).val()
         );

         column
           .search(val ? '^' + val + '$' : '', true, false)
           .draw();
       });

     column.data().unique().sort().each(function(d, j) {
       select.append('<option value="' + d + '">' + d + '</option>')
     });
   });


   table.column(4).every(function() {

     var column = this;
     var select = $('<select id="xxx2"><option value=""></option></select>')
       .appendTo($(column.header()).empty())
       .on('change', function() {
         var val = $.fn.dataTable.util.escapeRegex(
           $(this).val()
         );

         column
           .search(val ? '^' + val + '$' : '', true, false)
           .draw();
       });

     column.data().unique().sort().each(function(d, j) {
       select.append('<option value="' + d + '">' + d + '</option>')
     });
   });

 });