JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">

<table id="example" class="display" style="width:100%">
  <tbody>
      <tr>
          <td>N</td>
          <td>10</td>
          <td>1</td>
          <td>01</td>
          <td>10</td>
          <td>20</td>
      </tr>
      <tr>
        <td>N</td>
        <td>2</td>
        <td>2</td>
        <td>02</td>
        <td>(20)</td>
        <td>20</td>
      </tr>
      <tr>
        <td>N</td>
        <td>1</td>
        <td>1</td>
        <td>02</td>
        <td>(20)</td>
        <td>2</td>
      </tr>
      <tr>
        <td>N</td>
        <td>103</td>
        <td>1</td>
        <td>03</td>
        <td>
            <del>10</del>
        </td>
        <td>20</td>
      </tr>
  </tbody>
  <thead>
      <tr>
          <th rowspan="2">Bldg</th>
          <th rowspan="2">Unit</th>
          <th rowspan="2">Floor</th>
          <th rowspan="2">Stack</th>
          <th colspan="2">
              Floor Level
          </th>
      </tr>
      <tr>
          <th>Floor 1</th>
          <th>Floor 2</th>
      </tr>
      <tr class="filterRow">
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
      </tr>
  </thead>
</table>

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script...

CSS

span.multiselect-native-select{position:relative}span.multiselect-native-select select{border:0!important;clip:rect(0 0 0 0)!important;height:1px!important;margin:-1px -1px -1px -3px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;left:50%;top:30px}.multiselect-container{position:absolute;list-style-type:none;margin:0;padding:0}.multiselect-container .input-group{margin:5px}.multiselect-container .multiselect-reset .input-group{width:93%}.multiselect-container>li{padding:0}.multiselect-container>li>a.multiselect-all label{font-weight:700}.multiselect-container>li.multiselect-group label{margin:0;padding:3px 20px;height:100%;font-weight:700}.multiselect-container>li.multiselect-group-clickable label{cursor:pointer}.multiselect-container>li>a{padding:0}.multiselect-container>li>a>label{margin:0;height:100%;cursor:pointer;font-weight:400;padding:3px 20px 3px 40px}.multiselect-container>li>a>label.checkbox,.multiselect-container>li>a>label.radio{margin:0}.multiselect-container>li>a>label>input[type=checkbox]{margin-bottom:5px}.btn-group>.btn-group:nth-child(2)>.multiselect.btn{border-top-left-radius:4px;border-bottom-left-radius:4px}.form-inline .multiselect-container label.checkbox,.form-inline .multiselect-container label.radio{padding:3px 20px 3px 40px}.form-inline .multiselect-container li a label.checkbox input[type=checkbox],.form-inline .multiselect-container li a label.radio input[type=radio]{margin-left:-20px;margin-right:0}

JavaScript

$(document).ready(function() {
        var table = $("#example").DataTable({
            "order": [ 1, "asc" ],
            // "lengthMenu": [[ 100, 200, 500,-1], [ 100, 200, 500,'All']],
            "pageLength": -1,
            "lengthChange": false,
            "bFilter": "false",
            "searchable": false,
            orderCellsTop: true,
            "bPaginate": false,
            "bInfo": false
        });

        var alreadySelectedArr = [];
        $('.filterRow th').each(function(i) {
            alreadySelectedArr[i] = [];
            var title = $(this).text();

            var select = $('<span class="multiselect-native-select"><select id="multiSelectMatrixCol' + i + '" class="form-control multiSelect" multiple="multiple"></select><div class="btn-group" style="width: 220px;"> <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" data-html="true" title="All" style="width: 100%; overflow: hidden; text-overflow: ellipsis;" aria-expanded="false"><span id="mst'+i+'" class="multiselect-selected-text">All</span> <b class="caret"></b></button> <ul id="multiSelectMatrixDropDown'+i+'" class="multiselect-container dropdown-menu pull-right" x-placement="top-start" style="position: absolute; top: 0px; left: 0px; will-change: top, left;"><li data-value="---" class="multiselect-item multiselect-all multiselect-selected"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" class="selectAll" id="all_'+i+'" checked value="---"> Select all</label></a></li></ul></div></span>')
                .appendTo($(this).empty());
            let includedArr = [];
            let colData = table.column(i).data().unique().sort(function(a,b){return a-b}).each(function(d, j) {
                if (d != "") {
                    var cell = table.column(i).nodes().toArray().find(f => f.innerHTML.trim() == d);
                    var searchValue = $(cell).attr("data-search");
                   ...