JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select2 Test Case Fixed Columns</title>
</head> 

<body>

  <table id="example" class="stripe row-border order-column" style="width:100%">
        <thead>
            <tr>
                <th>First name <select id="testsel"></select></th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>5421</td>
                <td>t.nixon@datatables.net</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>8422</td>
                <td>g.winters@datatables.net</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
              ...

CSS

th, td { white-space: nowrap; }
        div.dataTables_wrapper {
            width: 800px;
            margin: 0 auto;
        }

        th input {
            width: 90%;
        }

JavaScript

$(document).ready(function() {

			$("#testsel").select2();

      function popSelUniques(tbl, selects) {
        $(selects).each(function () {
          var cursel = $(this);
          var count = 1;
          var col = $(this).closest("th").index();
          if ( $(cursel).find(":selected").length == 0 ) {
            cursel.empty();
            tbl.column( col, { search:"applied" } ).data().unique().sort().each(function (d, j) {
              $(cursel).append(new Option(d, count, false, false)).trigger("change.select2");
              count = count + 1;
            });
          }
        });
      }

    // DataTable
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        ordering:       false,
        fixedColumns:   true,
        "drawCallback": function ( settings ) {
          popSelUniques( $("#example").DataTable(), $("table th select") )
        }
    } );
} );