JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css">

<table width="100%"String class="display"String id="example"String cellspacing="0"String>

        <thead>

            <tr>

                <th class="select-filter">Name</th>

                <th class="text-filter">Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>

        <tfoot>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </tfoot>

        <tbody>

            <tr>

                <td>Tiger.Nixon</td>

                <td>System Architect</td>

                <td>Edinburgh</td>

                <td>61</td>

                <td>2011/04/25</td>

                <td>$320,800</td>

            </tr>

            <tr>

                <td>Garrett Winters</td>

                <td>Accountant</td>

                <td>Tokyo</td>

                <td>63</td>

                <td>2011/07/25</td>

                <td>$170,750</td>

            </tr>

            <tr>

                <td>Ashton Cox</td>

                <td>Junior Technical Author</td>

                <td>San Francisco</td>

                <td>66</td>

                <td>2009/01/12</td>

                <td>$86,000</td>

            </tr>

            <tr>

                <td>Cedric Kelly</td>

                <td>Senior Javascript Developer</td>

                <td>Edinburgh</td>

                <td>22</td>

                <td>2012/03/29</td>

                <td>$433,060</td>

            </tr>

            <tr>

     ...

JavaScript

$(document).ready(function () {
 var table = $('#example').DataTable({
                processing: true,
                stateSave: true,
                 initComplete: function () {
                    this.api().columns('.select-filter').every(function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).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>')
                        });
                    })
                    this.api().columns('.text-filter').every(function () {
                        var column = this;
                        var textbox = $('<input type="text" style="width:100%"  />')
                            .appendTo($(column.footer()).empty())
                            .on('keyup change', function () {
                                if (column.search() !== this.value) {
                                    column
                                        .search(this.value)
                                        .draw();
                                }
                            });

                    });

                }
                
      });
      
       // Restore state text-search
            var state = table.state.loaded();
            if (state) {
                table.columns().eq(0).each(function (colIdx) {
                    var colSearch =...