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 5</td>
          <td>person 1<input type="checkbox" id="pro 1" name="pro 1"><label for="pro 1">remove1</label></td>
        </tr>
        <tr>
          <td>pro 2</td>
          <td><input type="checkbox" id="pro 2" name="pro...

JavaScript

$(document).ready( function () {
	$('#example thead tr').clone(true).appendTo('#example thead');
  var table = $('#example').DataTable({
  columnDefs: [
  	{
    	targets: 1,
      render: function (data, type, row) {
      console.log(type);
      	if (type === 'filter') {
          return data.split('<')[0];
        }
        return data;
      }
    }
  ],
    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();
          });
                    	
          // Start with empty array
          var options = [];

          if ( column.index() === 1 ) {
          
          	// If chekcbox column parse the name from the HTML
          	column.data().unique().sort().each(function (d, j) {
          
            	option = d.split('<')[0];
							options.push(option);
              
            });
            
            // Get a unique set of options that are sorted
            options = [...new Set(options)].sort();
            
          
          } else {
          	// Otherwise get an array of unique sorted options
          	column.data().unique().sort().each(function (d, j) {
          
          		options.push(d);
            
          	});
          
          }
          
          // Itereate options to build select lists
          for (i=0; i<options.length; i++) {
          	var option = options[i];
          	if ( option.length > 0 ) {
          		select.append('<option value="'+option+'">'+option+'</option>');
          	}
          }

			});
    }
 });
});