JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
Month:
<select id="selectMonth" class="form-select form-select-sm" aria-label=".form-select-sm example">
  <option value="^(01)" selected>January</option>
  <option value="^(02)">February</option>
  <option value="03">March</option>
  <option value="^(04)">All Months</option>
</select>

<table id="example">
    <thead>
        <tr>
            <td>Supplies</td>
            <td>Training</td>
            <td>Work Orders</td>
        </tr>
    </thead>
  <tbody>
        <tr>
          <td valign="top">
            <table>
             <tbody>
              <tr>
                <td class="dt-control"></td>
                <td>
                   13.76
                </td>
                <td>
                   Stapler
                </td>
                <td>
                  01/02/2021
                </td>
              </tr>
                            <tr>
                <td class="dt-control"></td>
                <td>
                   4.26
                </td>
                <td>
                   Pen
                </td>
                <td>
                  02/05/2021
                </td>
              </tr>
              <tr>
                <td class="dt-control"></td>
                <td>
                   1.99
                </td>
                <td>
                   Printer
                </td>
                <td>
                  03/02/2021
                </td>
              </tr>
              </tbody>
            </table>
          </td>
                    <td valign="top">
            <table>
            <tbody>
              <tr>
                <td class="dt-control"></td>
                <td>
                    9.74
                </td>
                <td>
                   DBA...

CSS

.dataTables_empty {
        display: none;
    }

    table.dataTable thead th {
        border-bottom: none;
    }

    td table.dataTable.no-footer {
        border-bottom: none;
    }

JavaScript

const columns = [
  { title: '' },
]



$(document).ready(function () {


  $('#example').DataTable({
    dom: '',
    "order": [],
    createdRow: function(row, data, dataIndex, cells) {
      $(row).find('td table').DataTable({
        columns: columns,
        "paging": false,
        "order": [],
        dom: '',
        "columnDefs":[
          {
            "targets": [2],
            "visible": false
          },
          {
            "targets": [3],
            "visible": false
          }
        ]
      })

    }
  });

  //For searching all the nested datatables.
  $("#Search_All").keyup(function () {
    $('td table').DataTable().search(this.value).draw();
  })

  //Remove the header for the nested data tables (we don't need to sort them.)
  $("td table thead").remove();

  $('#selectMonth').change(function(){
    $('td table').DataTable().search(this.value,true).draw();


  });

})