JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.min.css">
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/3.2.0/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.dataTables.css">
<div class="container">
	<table id="sample" class="display">
		<thead>
			<tr>
				<th>Order</th>
				<th>Note</th>
				<th>Checked</th>
				<th>User identification</th>
				<th>Manufacturer</th>
				<th>Model</th>
				<th>Type</th>
				<th>Date registered</th>
				<!-- hidden values -->
				<th>hash_id</th>
				<th>nhsm_id</th>
				<th>user_id</th>
			</tr>
			<tr data-dt-order="disable">
				<th>Order</th> <!-- searchfield -->
				<th></th>
				<th></th>
				<th>User identification</th> <!-- searchfield -->
				<th>Manufacturer</th> <!-- dropdown -->
				<th>Model</th> <!-- dropdown -->
				<th></th>
				<th></th>
				<!-- hidden values -->
				<th></th>
				<th></th>
				<th></th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>21182833</td> <!-- Order -->
				<td><a href="somelink.php?id=21182833"><img src="https://assets.scu.edu/images/icon/note.png"></a></td> <!-- Note -->
				<td><img src="https://assets.scu.edu/images/icon/tick.png"></td> <!-- Checked -->
				<td>LfhEzmtd35</td> <!-- User identification -->
				<td>Trianta Int.</td> <!-- Manufacturer -->
				<td>P238</td> <!-- Model...

CSS

body {
	font: .8em Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #fff;
}
table {
	font: 90%/1.45em Arial, Helvetica, sans-serif;
	color: #333;
	width: 100%;
}
div.container {
	max-width: 96%;
	margin: 0 auto;
}
.dt-search { display: none; }

JavaScript

$(document).ready(function() {
	let tabledata = $('#sample').DataTable( {
		layout: {
			topStart: {
				buttons: ['excelHtml5', 'csvHtml5']
			}
		},
    orderCellsTop: true,
		order: [[7, 'desc']], // 7 = date column
		pageLength: 25,
		columnDefs: [{
			target: [8, 9, 10],
			visible: false,
			searchable: false
		}],
		initComplete: function() {
			this.api()
				.columns([0, 3]) // first & fourth column are searchfields
				.every(function() {
					let column = this;
					let title = column.header().textContent;

					// create input element
					let input = document.createElement('input');
					input.placeholder = title;
          // Sepcify row 1
					column.header(1).replaceChildren(input);

					// event listener for user input
					input.addEventListener('keyup', () => {
						if (column.search() !== this.value) {
							column.search(input.value).draw();
						}
					});
				})
				.columns([4, 5]) // fifth & sixth colum are dropdowns
				.every(function() {
					let column = this;
					let title = column.header().textContent;

					// create select element
					let select = document.createElement('select');
					select.id = title +'_select';
					select.add(new Option(''));
          // Sepcify row 1
					column.header(1).replaceChildren(select);

					// apply listener for user change in value
					select.addEventListener('change', function() {
						column
							.search(select.value, { exact: true })
							.draw();
					});

					// add list of options
					column
						.data()
						.unique()
						.sort()
						.each(function(d, j) {
							select.add(new Option(d));
						});
				})
		}
	});
});