JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <title>test</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/dataTables.bootstrap5.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.1.2/css/buttons.bootstrap5.css">
  </head>
  <body>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.1.2/js/dataTables.buttons.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.1.2/js/buttons.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/buttons/3.1.2/js/buttons.html5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    <table id="example">
      <thead>
        <tr>
          <th>project name</th>
          <th>assignee</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>pro 1</td>
          <td>person 1<input type="checkbox" id="pro 1" name="pro 1"><label for="pro 1">remove</label></td>
        </tr>
        <tr>
          <td>pro 2</td>
          <td><input type="checkbox" id="pro 2" name="pro 2"><label for="pro 2">assign</label></td>
        </tr>
        <tr>
          <td>pro 3</td>
          <td>person 2<input type="checkbox" id="pro 3" name="pro...

JavaScript

$(document).ready( function () {
	$('#example thead tr').clone(true).appendTo('#example thead');
  var table = $('#example').DataTable({
    initComplete: function() {
    	this.api().columns().every(function() {
      	let column = this;
        let select = $('<select style="min-width:50px;max-width:200px;"><option value=""></option></select>')
	        .appendTo($('#example thead tr:eq(1) th').eq(column.index()).empty())
          .on('change', function () {
          	var value = $.fn.dataTable.util.escapeRegex($(this).val());
            column
            	.search(value ? '^'+value+'$' : '', true, false)
              .draw();
          });
          column.data().unique().sort().each(function (d, j) {select.append('<option value="'+d+'">'+d+'</option>');});
      });
    }
 });
});